From 88243aef2324629e0b734a6121457d919134a29b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E4=BA=9A=E6=98=95?= <1549469775@qq.com>
Date: Fri, 19 Sep 2025 16:31:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=B8=AA=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E4=BD=BF=E7=94=A8=E7=9A=84=E6=A0=B7=E5=BC=8F=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=8C=85=E6=8B=AC=E5=85=A8=E5=B1=80=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E3=80=81Markdown=E6=A0=B7=E5=BC=8F=E5=92=8C=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=EF=BC=8C=E7=AE=80=E5=8C=96=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E7=BB=93=E6=9E=84=EF=BC=8C=E6=8F=90=E5=8D=87=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=8F=AF=E7=BB=B4=E6=8A=A4=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/scss-compiler/page/index/_global.css        | 1188 --------------------
 public/scss-compiler/page/index/index.css          |  136 ---
 public/scss-compiler/page/index/markdown-green.css | 1188 --------------------
 public/scss-compiler/page/index/markdown-reset.css | 1188 --------------------
 public/scss-compiler/page/index/style.css          | 1188 --------------------
 src/controllers/Api/AuthController.js              |   25 +
 src/controllers/Page/AuthController.js             |   35 +
 src/middlewares/install.js                         |   22 +-
 src/services/AuthService.js                        |   84 ++
 src/views/_scss/global.scss                        |   21 +
 src/views/htmx/footer/index.pug                    |   51 +
 src/views/htmx/markdown/index.pug                  |   11 +
 src/views/htmx/markdown/markdown-green.scss        |  290 +++++
 src/views/htmx/markdown/markdown-reset.scss        |  677 +++++++++++
 src/views/htmx/markdown/style.scss                 |  146 +++
 src/views/htmx/navbar/index.pug                    |   26 +
 src/views/layouts/empty.pug                        |   82 +-
 src/views/page/index/_global.scss                  |    0
 src/views/page/index/index.pug                     |   18 +-
 src/views/page/index/markdown-green.scss           |  316 ------
 src/views/page/index/markdown-reset.scss           |  677 -----------
 src/views/page/index/style.scss                    |  146 ---
 src/views/page/login/index.pug                     |    9 +
 23 files changed, 1383 insertions(+), 6141 deletions(-)
 delete mode 100644 public/scss-compiler/page/index/_global.css
 delete mode 100644 public/scss-compiler/page/index/index.css
 delete mode 100644 public/scss-compiler/page/index/markdown-green.css
 delete mode 100644 public/scss-compiler/page/index/markdown-reset.css
 delete mode 100644 public/scss-compiler/page/index/style.css
 create mode 100644 src/controllers/Api/AuthController.js
 create mode 100644 src/controllers/Page/AuthController.js
 create mode 100644 src/services/AuthService.js
 create mode 100644 src/views/_scss/global.scss
 create mode 100644 src/views/htmx/footer/index.pug
 create mode 100644 src/views/htmx/markdown/index.pug
 create mode 100644 src/views/htmx/markdown/markdown-green.scss
 create mode 100644 src/views/htmx/markdown/markdown-reset.scss
 create mode 100644 src/views/htmx/markdown/style.scss
 create mode 100644 src/views/htmx/navbar/index.pug
 delete mode 100644 src/views/page/index/_global.scss
 delete mode 100644 src/views/page/index/markdown-green.scss
 delete mode 100644 src/views/page/index/markdown-reset.scss
 delete mode 100644 src/views/page/index/style.scss
 create mode 100644 src/views/page/login/index.pug

diff --git a/public/scss-compiler/page/index/_global.css b/public/scss-compiler/page/index/_global.css
deleted file mode 100644
index 403ce31..0000000
--- a/public/scss-compiler/page/index/_global.css
+++ /dev/null
@@ -1,1188 +0,0 @@
-@charset "UTF-8";
-/* 首页样式 */
-.hero-section {
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/hero-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.1;
-  z-index: 0;
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-}
-
-.feature-card {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-  transform: translateY(-5px);
-}
-
-.feature-card .material-symbols-light--article,
-.feature-card .material-symbols-light--bookmark,
-.feature-card .material-symbols-light--person {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover .material-symbols-light--article,
-.feature-card:hover .material-symbols-light--bookmark,
-.feature-card:hover .material-symbols-light--person {
-  transform: scale(1.1);
-}
-
-.stats-section {
-  position: relative;
-}
-
-.stats-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/stats-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.05;
-  z-index: 0;
-}
-
-.stat-item {
-  transition: all 0.3s ease;
-}
-
-.stat-item:hover {
-  transform: scale(1.05);
-}
-
-.user-dashboard {
-  position: relative;
-}
-
-.user-dashboard::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/dashboard-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.03;
-  z-index: 0;
-}
-
-.avatar {
-  transition: all 0.3s ease;
-}
-
-.avatar:hover {
-  transform: scale(1.05);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 4rem 0;
-  }
-  .hero-content h1 {
-    font-size: 2.5rem;
-  }
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-  .user-info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-  .user-actions {
-    justify-content: center;
-  }
-}
-@media (max-width: 480px) {
-  .hero-content h1 {
-    font-size: 2rem;
-  }
-  .hero-content p {
-    font-size: 1rem;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  .hero-actions {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  .hero-actions a {
-    width: 100%;
-    text-align: center;
-  }
-}
-/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
-@media (prefers-color-scheme: dark) {
-  .markdown-body {
-    /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: dark;
-  }
-}
-/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
-@media (prefers-color-scheme: light) {
-  .markdown-body {
-    /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: light;
-    /* 定义CSS自定义属性，用于主题色彩管理 */
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
-    --color-fg-subtle: #6e7781;
-    --color-canvas-default: #ffffff;
-    --color-canvas-subtle: #f6f8fa;
-    --color-border-default: #d0d7de;
-    --color-border-muted: hsla(210, 18%, 87%, 1);
-    --color-neutral-muted: rgba(175, 184, 193, 0.2);
-    --color-accent-fg: #0969da;
-    --color-accent-emphasis: #0969da;
-    --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
-    --color-mark-default: rgb(255, 255, 0);
-    --color-mark-fg: rgb(255, 187, 0);
-  }
-}
-/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
-.markdown-body {
-  /* 防止iOS Safari自动调整文本大小 */
-  -webkit-text-size-adjust: 100%;
-  /* 防止IE自动调整文本大小 */
-  -ms-text-size-adjust: 100%;
-  /* 优化文本渲染质量，提升可读性 */
-  text-rendering: optimizelegibility;
-  /* 重置外边距为0 */
-  margin: 0;
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 使用CSS变量设置文本颜色 */
-  color: var(--color-fg-muted);
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body > *:first-child {
-  /* 强制移除顶部外边距，避免不必要的空白 */
-  margin-top: 0 !important;
-}
-.markdown-body {
-  /* 最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body > *:last-child {
-  /* 强制移除底部外边距，避免不必要的空白 */
-  margin-bottom: 0 !important;
-}
-.markdown-body {
-  /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
-}
-.markdown-body p,
-.markdown-body blockquote,
-.markdown-body ul,
-.markdown-body ol,
-.markdown-body dl,
-.markdown-body table,
-.markdown-body hr,
-.markdown-body form,
-.markdown-body pre,
-.markdown-body details {
-  /* 移除顶部外边距，避免重复间距 */
-  margin-top: 0;
-  /* 设置底部外边距为1em，保持适当间距 */
-  margin-bottom: 1em;
-}
-.markdown-body {
-  /* 引用块内部元素间距处理 */
-}
-.markdown-body blockquote {
-  /* 引用块内第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body blockquote > :first-child {
-  margin-top: 0;
-}
-.markdown-body blockquote {
-  /* 引用块内最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body blockquote > :last-child {
-  margin-bottom: 0;
-}
-.markdown-body {
-  /* 统一显示成块状元素 - 确保这些元素独占一行 */
-}
-.markdown-body details,
-.markdown-body figcaption,
-.markdown-body figure {
-  /* 设置为块级元素，独占一行显示 */
-  display: block;
-}
-.markdown-body {
-  /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
-}
-.markdown-body audio,
-.markdown-body canvas,
-.markdown-body video {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-}
-.markdown-body {
-  /* 按钮内部间距统一 - 移除Firefox默认内边距 */
-}
-.markdown-body button::-moz-focus-inner,
-.markdown-body input::-moz-focus-inner {
-  /* 移除Firefox浏览器按钮和输入框的内部内边距 */
-  padding: 0;
-  /* 移除Firefox浏览器按钮和输入框的内部边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 定义元素显示为斜体 - 术语定义样式 */
-}
-.markdown-body dfn {
-  /* 设置字体为斜体，用于术语定义 */
-  font-style: italic;
-}
-.markdown-body {
-  /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
-}
-.markdown-body table {
-  /* 合并表格边框，相邻单元格边框合并为一条 */
-  border-collapse: collapse;
-  /* 设置表格单元格间距为0 */
-  border-spacing: 0;
-  /* 设置为块级元素，可以设置宽高 */
-  display: block;
-  /* 宽度根据内容自适应 */
-  width: max-content;
-  /* 最大宽度不超过父容器 */
-  max-width: 100%;
-  /* 内容溢出时显示滚动条 */
-  overflow: auto;
-}
-.markdown-body {
-  /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
-}
-.markdown-body [draggable] {
-  /* 设置鼠标悬停时显示移动光标 */
-  cursor: move;
-}
-.markdown-body {
-  /* 加粗元素 - 粗体文本样式 */
-}
-.markdown-body b,
-.markdown-body strong {
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-}
-.markdown-body {
-  /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
-}
-.markdown-body abbr,
-.markdown-body acronym {
-  /* 移除底部边框 */
-  border-bottom: none;
-  /* 设置字体变体为正常 */
-  font-variant: normal;
-  /* 设置虚线下划线装饰 */
-  text-decoration: underline dotted;
-}
-.markdown-body {
-  /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
-}
-.markdown-body abbr {
-  /* 设置鼠标悬停时显示帮助光标 */
-  cursor: help;
-}
-.markdown-body {
-  /* 一致的 del 样式 - 删除线文本样式 */
-}
-.markdown-body del {
-  /* 设置文本装饰为删除线 */
-  text-decoration: line-through;
-}
-.markdown-body {
-  /* a标签去除下划线 - 链接样式处理 */
-}
-.markdown-body a {
-  /* 默认移除下划线，保持页面简洁 */
-  text-decoration: none;
-  /* 没有href属性的链接样式 */
-}
-.markdown-body a:not([href]) {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 移除下划线装饰 */
-  text-decoration: none;
-}
-.markdown-body a {
-  /* 鼠标悬停时显示下划线 */
-}
-.markdown-body a:hover {
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
-}
-.markdown-body ins {
-  /* 移除下划线装饰，保持页面简洁 */
-  text-decoration: none;
-}
-.markdown-body {
-  /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
-  * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
-  * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
-  * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
-  * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
-  */
-}
-.markdown-body u,
-.markdown-body .typo-u {
-  /* 设置文本装饰为下划线，用于专名号显示 */
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
-}
-.markdown-body [hidden] {
-  /* 强制隐藏元素，优先级最高 */
-  display: none !important;
-}
-.markdown-body {
-  /* 伸缩框显示为列表元素 - 详情框摘要样式 */
-}
-.markdown-body summary {
-  /* 设置为列表项显示，显示为可点击的列表项 */
-  display: list-item;
-}
-.markdown-body {
-  /* 引用元素前后内容 - 移除默认引号 */
-}
-.markdown-body q:before,
-.markdown-body q:after {
-  /* 移除引用元素前后的默认引号内容 */
-  content: "";
-}
-.markdown-body {
-  /* 表格标题和表头文本对齐 - 默认左对齐 */
-}
-.markdown-body caption,
-.markdown-body th {
-  /* 设置文本左对齐 */
-  text-align: left;
-}
-.markdown-body {
-  /* 居中对齐的表格标题和表头 */
-}
-.markdown-body caption[align=center],
-.markdown-body th[align=center] {
-  /* 设置文本居中对齐 */
-  text-align: center;
-}
-.markdown-body {
-  /* 特定元素字体粗细统一 - 地址、标题、引用等 */
-}
-.markdown-body address,
-.markdown-body caption,
-.markdown-body cite,
-.markdown-body em,
-.markdown-body th,
-.markdown-body var {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body {
-  /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
-}
-.markdown-body mark {
-  /* 设置标记背景色，使用CSS变量 */
-  background: var(--color-mark-default);
-  /* 设置内边距，增加标记的可读性 */
-  padding: 2px;
-  /* 激活状态的标记样式 */
-}
-.markdown-body mark.active {
-  /* 激活时使用强调色背景 */
-  background: var(--color-mark-fg);
-}
-.markdown-body {
-  /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
-}
-.markdown-body h1 {
-  /* 设置上下外边距为0.67em */
-  margin: 0.67em 0;
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-  /* 设置字体大小为2倍基础大小 */
-  font-size: 2em;
-}
-.markdown-body {
-  /* small字体缩小 - 小字体文本样式 */
-}
-.markdown-body small {
-  /* 设置字体大小为父元素的90% */
-  font-size: 90%;
-}
-.markdown-body {
-  /* 上下标显示 - 下标和上标文本样式 */
-}
-.markdown-body sub,
-.markdown-body sup {
-  /* 设置字体大小为75% */
-  font-size: 75%;
-  /* 设置行高为0，避免影响行间距 */
-  line-height: 0;
-  /* 设置相对定位，用于精确控制位置 */
-  position: relative;
-  /* 设置垂直对齐为基线 */
-  vertical-align: baseline;
-}
-.markdown-body {
-  /* 上下标内链接样式 */
-}
-.markdown-body sub a,
-.markdown-body sup a {
-  /* 设置左右内边距为0.1em */
-  padding: 0 0.1em;
-}
-.markdown-body {
-  /* 下标位置调整 */
-}
-.markdown-body sub {
-  /* 向下偏移0.25em */
-  bottom: -0.25em;
-}
-.markdown-body {
-  /* 上标位置调整 */
-}
-.markdown-body sup {
-  /* 向上偏移0.5em */
-  top: -0.5em;
-}
-.markdown-body {
-  /* 代码相关的字体大小统一 - 代码元素字体样式 */
-}
-.markdown-body code,
-.markdown-body kbd,
-.markdown-body pre,
-.markdown-body samp,
-.markdown-body pre tt {
-  /* 设置字体为等宽字体，便于代码阅读 */
-  font-family: monospace;
-  /* 设置字体大小为1em，保持一致性 */
-  font-size: 1em;
-}
-.markdown-body {
-  /* 去除默认边框 - 移除字段集和图片的默认边框 */
-}
-.markdown-body fieldset,
-.markdown-body img {
-  /* 移除边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 图片初始化样式 - 图片元素基础样式 */
-}
-.markdown-body img {
-  /* 设置边框样式为无 */
-  border-style: none;
-  /* 设置最大宽度为100%，防止溢出 */
-  max-width: 100%;
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 设置左右外边距为自动，实现居中 */
-  margin: 0 auto;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-default);
-}
-.markdown-body {
-  /* 可附标题内容元素的间距 - 图片容器样式 */
-}
-.markdown-body figure {
-  /* 设置上下外边距为1em，左右外边距为40px */
-  margin: 1em 40px;
-}
-.markdown-body {
-  /* 间隔线 - 水平分隔线样式 */
-  /* 一致化 horizontal rule - 统一水平分隔线样式 */
-}
-.markdown-body hr {
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 隐藏溢出内容 */
-  overflow: hidden;
-  /* 设置背景为透明 */
-  background: transparent;
-  /* 设置底部边框，使用CSS变量 */
-  border-bottom: 1px solid var(--color-border-muted);
-  /* 设置高度为0.25em */
-  height: 0.25em;
-  /* 移除内边距 */
-  padding: 0;
-  /* 设置上下外边距为24px */
-  margin: 24px 0;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-border-default);
-  /* 移除边框 */
-  border: 0;
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body hr::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body hr {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body hr::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
-}
-.markdown-body button,
-.markdown-body input,
-.markdown-body select,
-.markdown-body textarea {
-  /* 继承父元素的字体样式 */
-  font: inherit;
-  /* 移除外边距 */
-  margin: 0;
-  /* 设置溢出为可见 */
-  overflow: visible;
-  /* 继承父元素的字体族 */
-  font-family: inherit;
-  /* 继承父元素的字体大小 */
-  font-size: inherit;
-  /* 继承父元素的行高 */
-  line-height: inherit;
-}
-.markdown-body {
-  /* 外观显示为按钮 - 按钮类型输入框样式 */
-}
-.markdown-body [type=button],
-.markdown-body [type=reset],
-.markdown-body [type=submit] {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 设置标准按钮外观，提高兼容性 */
-  appearance: button;
-}
-.markdown-body {
-  /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
-}
-.markdown-body [type=checkbox],
-.markdown-body [type=radio] {
-  /* 设置盒模型为边框盒模型 */
-  box-sizing: border-box;
-  /* 移除内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
-}
-.markdown-body [type=number]::-webkit-inner-spin-button,
-.markdown-body [type=number]::-webkit-outer-spin-button {
-  /* 设置高度为自动，适应内容 */
-  height: auto;
-}
-.markdown-body {
-  /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
-}
-.markdown-body [type=search]::-webkit-search-cancel-button,
-.markdown-body [type=search]::-webkit-search-decoration {
-  /* 移除WebKit浏览器搜索框默认样式 */
-  -webkit-appearance: none;
-}
-.markdown-body {
-  /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
-}
-.markdown-body ::-webkit-input-placeholder {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 设置透明度为0.54，创建半透明效果 */
-  opacity: 0.54;
-}
-.markdown-body {
-  /* 文件选择按钮样式统一 - 文件上传按钮样式 */
-}
-.markdown-body ::-webkit-file-upload-button {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 继承父元素字体样式 */
-  font: inherit;
-}
-.markdown-body {
-  /* 占位符显示统一 - 通用占位符样式 */
-}
-.markdown-body ::placeholder {
-  /* 设置占位符颜色，使用CSS变量 */
-  color: var(--color-fg-subtle);
-  /* 设置完全不透明 */
-  opacity: 1;
-}
-.markdown-body {
-  /* table内的td,th去除留白 - 表格单元格样式 */
-}
-.markdown-body td,
-.markdown-body th {
-  /* 移除表格单元格内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 伸缩框鼠标显示 - 详情框摘要样式 */
-}
-.markdown-body details summary {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
-}
-.markdown-body details:not([open]) > *:not(summary) {
-  /* 强制隐藏未展开详情框内的非摘要内容 */
-  display: none !important;
-}
-.markdown-body {
-  /* 按键显示 - 键盘按键样式 */
-}
-.markdown-body kbd {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-  /* 设置内边距为3px上下，5px左右 */
-  padding: 3px 5px;
-  /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
-  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-  /* 设置行高为10px */
-  line-height: 10px;
-  /* 设置文本颜色，使用CSS变量 */
-  color: var(--color-fg-default);
-  /* 设置垂直对齐为中间 */
-  vertical-align: middle;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-subtle);
-  /* 设置边框为1px实线，使用CSS变量 */
-  border: solid 1px var(--color-neutral-muted);
-  /* 设置底部边框颜色，使用CSS变量 */
-  border-bottom-color: var(--color-neutral-muted);
-  /* 设置圆角为6px */
-  border-radius: 6px;
-  /* 设置内阴影，创建按键凹陷效果 */
-  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
-}
-.markdown-body {
-  /* 清除浮动工具类 - 清除浮动伪元素 */
-}
-.markdown-body .clearfix:before,
-.markdown-body .clearfix:after {
-  /* 空内容，仅用于布局 */
-  content: "";
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-}
-.markdown-body {
-  /* 清除浮动工具类 - after伪元素 */
-}
-.markdown-body .clearfix:after {
-  /* 清除左右浮动 */
-  clear: both;
-}
-.markdown-body {
-  /* 清除浮动工具类 - 主容器 */
-}
-.markdown-body .clearfix {
-  /* 触发IE的hasLayout属性，用于清除浮动 */
-  zoom: 1;
-}
-.markdown-body {
-  /* 强制文本换行 - 文本换行工具类 */
-}
-.markdown-body .textwrap,
-.markdown-body .textwrap td,
-.markdown-body .textwrap th {
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 强制在任意字符间换行，防止溢出 */
-  word-break: break-all;
-}
-.markdown-body {
-  /* 文本换行表格 - 固定表格布局 */
-}
-.markdown-body .textwrap-table {
-  /* 设置表格布局为固定，提高渲染性能 */
-  table-layout: fixed;
-}
-.markdown-body {
-  /* 无序列表样式 - 项目符号列表 */
-}
-.markdown-body ul {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为实心圆点 */
-  list-style: disc;
-}
-.markdown-body {
-  /* 有序列表样式 - 数字列表 */
-}
-.markdown-body ol {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为数字 */
-  list-style: decimal;
-  /* 列表项样式 */
-}
-.markdown-body ol li {
-  /* 设置左内边距为0.4em，增加数字与文本间距 */
-  padding-left: 0.4em;
-}
-.markdown-body {
-  /* 相邻列表项间距 - 列表项之间的间距 */
-}
-.markdown-body li + li {
-  /* 设置顶部外边距为0.25em，增加列表项间距 */
-  margin-top: 0.25em;
-}
-.markdown-body {
-  /* 嵌套列表样式 - 列表项内的子列表 */
-}
-.markdown-body li {
-  /* 无序子列表样式 */
-}
-.markdown-body li ul {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-  /* 设置列表样式为空心圆点 */
-  list-style: circle;
-  /* 三级无序列表样式 */
-}
-.markdown-body li ul li ul {
-  /* 设置列表样式为实心方块 */
-  list-style: square;
-}
-.markdown-body li {
-  /* 有序子列表样式 */
-}
-.markdown-body li ol {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-}
-.markdown-body {
-  /* 任务列表项样式 - 待办事项列表项 */
-}
-.markdown-body .task-list-item {
-  /* 移除列表样式，不显示项目符号 */
-  list-style-type: none;
-  /* 设置相对定位，用于绝对定位子元素 */
-  position: relative;
-  /* 第一个子输入框样式 */
-}
-.markdown-body .task-list-item > input {
-  /* 第一个子元素右边距 */
-}
-.markdown-body .task-list-item > input:nth-child(1) {
-  /* 设置右边距为6px */
-  margin-right: 6px;
-}
-.markdown-body .task-list-item {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item label {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body .task-list-item {
-  /* 拖拽手柄样式 */
-}
-.markdown-body .task-list-item .handle {
-  /* 隐藏拖拽手柄 */
-  display: none;
-}
-.markdown-body .task-list-item {
-  /* 复选框样式 */
-}
-.markdown-body .task-list-item input[type=checkbox] {
-  /* 设置宽度为0.9em */
-  width: 0.9em;
-  /* 设置高度为0.9em */
-  height: 0.9em;
-  /* 设置绝对定位 */
-  position: absolute;
-  /* 向左偏移1.3em */
-  left: -1.3em;
-  /* 向下偏移0.35em */
-  top: 0.35em;
-}
-.markdown-body {
-  /* 启用的任务列表项样式 */
-}
-.markdown-body .task-list-item.enabled {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item.enabled label {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 相邻任务列表项间距 */
-}
-.markdown-body .task-list-item + .task-list-item {
-  /* 设置顶部外边距为3px */
-  margin-top: 3px;
-}
-.markdown-body {
-  /* 包含任务列表的容器样式 */
-}
-.markdown-body .contains-task-list {
-  /* 从右到左文本方向样式 */
-}
-.markdown-body .contains-task-list:dir(rtl) .task-list-item input[type=checkbox] {
-  /* 设置复选框外边距，适配RTL布局 */
-  margin: 0 -1.6em 0.25em 0.2em;
-}
-.markdown-body {
-  /* 目录样式 - 表格目录容器 */
-}
-.markdown-body .toc {
-  /* 重置左边距为0 */
-  margin-left: 0;
-}
-.markdown-body {
-  /* 定义列表样式 - 描述列表容器 */
-}
-.markdown-body dl {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置块级起始外边距为1em */
-  margin-block-start: 1em;
-  /* 设置块级结束外边距为1em */
-  margin-block-end: 1em;
-  /* 设置内联起始外边距为0px */
-  margin-inline-start: 0px;
-  /* 设置内联结束外边距为0px */
-  margin-inline-end: 0px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-  /* 定义术语样式 */
-}
-.markdown-body dl dt {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-.markdown-body dl {
-  /* 定义描述样式 */
-}
-.markdown-body dl dd {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置内联起始外边距为40px，创建缩进效果 */
-  margin-inline-start: 40px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-
-.markdown-body {
-  --color-base: #ef4444;
-  --markdown-bg: white;
-  --color-bg: #ff47479c;
-  --color-light: #ef44441a;
-  --color-extra: rgba(239, 68, 68, 0.3);
-  --color-more: rgba(239, 68, 68, 0.4);
-}
-
-.markdown-body.green {
-  background-color: var(--markdown-bg);
-  @apply p-3 lg:p-6;
-}
-.markdown-body.green strong::before {
-  content: "『";
-}
-.markdown-body.green strong::after {
-  content: "』";
-}
-.markdown-body.green {
-  /* 块/段落引用 */
-}
-.markdown-body.green blockquote {
-  position: relative;
-  z-index: 600;
-  padding: 20px 20px 15px 20px;
-  line-height: 1.4 !important;
-  background-color: rgba(239, 68, 68, 0.06);
-  border-radius: 0.4em;
-}
-.markdown-body.green blockquote > * {
-  position: relative;
-}
-.markdown-body.green blockquote > *:first-child:before {
-  content: "“";
-  color: var(--color-light);
-  font-size: 6.5em;
-  font-weight: 700;
-  transform: rotate(15deg) translateX(-10px);
-  opacity: 1;
-  position: absolute;
-  top: -0.4em;
-  left: -0.2em;
-  text-shadow: none;
-  z-index: -10;
-}
-.markdown-body.green .tabs {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-.markdown-body.green {
-  /* 让链接在 hover 状态下显示下划线 */
-}
-.markdown-body.green a {
-  position: relative;
-  z-index: 10;
-  transition: color 0.3s linear;
-  cursor: pointer;
-  font-weight: bolder;
-  text-decoration: none;
-  color: var(--color-base);
-  border-bottom: 1px solid currentColor;
-  padding: 0 4px;
-}
-.markdown-body.green a[data-footnote-backref], .markdown-body.green a[data-footnote-ref] {
-  border: none;
-}
-.markdown-body.green a[data-footnote-backref]:hover, .markdown-body.green a[data-footnote-ref]:hover {
-  background: none;
-  animation: none;
-}
-.markdown-body.green a:hover {
-  content: "";
-  border: none;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
-  background-size: 20px auto;
-  animation: waveMove 1s infinite linear;
-}
-@keyframes waveMove {
-  0% {
-    background-position: 0 100%;
-  }
-  100% {
-    background-position: -20px 100%;
-  }
-}
-.markdown-body.green pre {
-  background: var(--prism-background);
-  font-size: var(--prism-font-size);
-  display: block;
-  -webkit-overflow-scrolling: touch;
-}
-.markdown-body.green pre,
-.markdown-body.green pre code {
-  font-family: var(--prism-font-family);
-}
-.markdown-body.green small,
-.markdown-body.green figcaption {
-  font-size: 0.75em;
-  color: #888;
-}
-.markdown-body.green legend {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green caption {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green del {
-  text-decoration: line-through var(--color-base) 2px;
-}
-.markdown-body.green code {
-  color: rgb(45, 55, 72);
-  background-color: rgba(160, 174, 192, 0.25);
-  font-family: inherit;
-  font-size: 1em;
-  border-radius: 4px;
-  padding: 1px 6px;
-  margin: 0 2px;
-  vertical-align: bottom;
-}
-.markdown-body.green pre code {
-  padding: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  white-space: pre;
-  background-color: transparent;
-  vertical-align: baseline;
-  border-radius: 0;
-  margin: 0;
-}
-.markdown-body.green table {
-  width: 100%;
-  display: table;
-  border: 1px solid var(--color-light);
-}
-.markdown-body.green table tr:hover {
-  background: var(--color-light);
-}
-.markdown-body.green table:hover {
-  border: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover th {
-  border-right: 1px solid var(--color-extra);
-  background: var(--color-extra);
-  border-bottom: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover td {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover caption {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green table th {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  background: var(--color-light);
-  border-bottom: 1px solid var(--color-light);
-}
-.markdown-body.green table td {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-}
-.markdown-body.green table caption {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  border-bottom: none;
-}
-.markdown-body.green table thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green h1,
-.markdown-body.green h2,
-.markdown-body.green h3,
-.markdown-body.green h4,
-.markdown-body.green h5,
-.markdown-body.green h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.6em;
-  line-height: 1.35;
-  position: relative;
-}
-.markdown-body.green h1 {
-  font-size: 1.8em;
-}
-.markdown-body.green h2 {
-  font-size: 1.6em;
-}
-.markdown-body.green h3 {
-  font-size: 1.4em;
-}
-.markdown-body.green h4 {
-  font-size: 1.2em;
-}
-.markdown-body.green h5 {
-  font-size: 1em;
-}
-.markdown-body.green h6 {
-  font-size: 1em;
-}
-.markdown-body.green ::-webkit-calendar-picker-indicator {
-  filter: invert(50%);
-}
-.markdown-body.green em {
-  font-weight: inherit;
-  position: relative;
-}
-.markdown-body.green em:after {
-  position: absolute;
-  top: 0.65em;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  pointer-events: none;
-  color: var(--color-base);
-  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
-}
-.markdown-body.green ul.toc li {
-  list-style-type: none;
-}
-.markdown-body.green ul.toc li a {
-  text-decoration: none;
-  border: 0;
-  list-style-type: none;
-}
-.markdown-body.green.chinese {
-  text-indent: 1.5em;
-  font-weight: 300;
-}
-.markdown-body.green.chinese h1,
-.markdown-body.green.chinese h2,
-.markdown-body.green.chinese h3,
-.markdown-body.green.chinese h4,
-.markdown-body.green.chinese h5,
-.markdown-body.green.chinese h6,
-.markdown-body.green.chinese ol,
-.markdown-body.green.chinese ul,
-.markdown-body.green.chinese blockquote,
-.markdown-body.green.chinese details,
-.markdown-body.green.chinese summary,
-.markdown-body.green.chinese pre,
-.markdown-body.green.chinese .tabs {
-  text-indent: 0;
-}
\ No newline at end of file
diff --git a/public/scss-compiler/page/index/index.css b/public/scss-compiler/page/index/index.css
deleted file mode 100644
index 4189666..0000000
--- a/public/scss-compiler/page/index/index.css
+++ /dev/null
@@ -1,136 +0,0 @@
-@charset "UTF-8";
-/* 首页样式 */
-.hero-section {
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/hero-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.1;
-  z-index: 0;
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-}
-
-.feature-card {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-  transform: translateY(-5px);
-}
-
-.feature-card .material-symbols-light--article,
-.feature-card .material-symbols-light--bookmark,
-.feature-card .material-symbols-light--person {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover .material-symbols-light--article,
-.feature-card:hover .material-symbols-light--bookmark,
-.feature-card:hover .material-symbols-light--person {
-  transform: scale(1.1);
-}
-
-.stats-section {
-  position: relative;
-}
-
-.stats-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/stats-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.05;
-  z-index: 0;
-}
-
-.stat-item {
-  transition: all 0.3s ease;
-}
-
-.stat-item:hover {
-  transform: scale(1.05);
-}
-
-.user-dashboard {
-  position: relative;
-}
-
-.user-dashboard::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/dashboard-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.03;
-  z-index: 0;
-}
-
-.avatar {
-  transition: all 0.3s ease;
-}
-
-.avatar:hover {
-  transform: scale(1.05);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 4rem 0;
-  }
-  .hero-content h1 {
-    font-size: 2.5rem;
-  }
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-  .user-info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-  .user-actions {
-    justify-content: center;
-  }
-}
-@media (max-width: 480px) {
-  .hero-content h1 {
-    font-size: 2rem;
-  }
-  .hero-content p {
-    font-size: 1rem;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  .hero-actions {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  .hero-actions a {
-    width: 100%;
-    text-align: center;
-  }
-}
\ No newline at end of file
diff --git a/public/scss-compiler/page/index/markdown-green.css b/public/scss-compiler/page/index/markdown-green.css
deleted file mode 100644
index 403ce31..0000000
--- a/public/scss-compiler/page/index/markdown-green.css
+++ /dev/null
@@ -1,1188 +0,0 @@
-@charset "UTF-8";
-/* 首页样式 */
-.hero-section {
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/hero-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.1;
-  z-index: 0;
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-}
-
-.feature-card {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-  transform: translateY(-5px);
-}
-
-.feature-card .material-symbols-light--article,
-.feature-card .material-symbols-light--bookmark,
-.feature-card .material-symbols-light--person {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover .material-symbols-light--article,
-.feature-card:hover .material-symbols-light--bookmark,
-.feature-card:hover .material-symbols-light--person {
-  transform: scale(1.1);
-}
-
-.stats-section {
-  position: relative;
-}
-
-.stats-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/stats-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.05;
-  z-index: 0;
-}
-
-.stat-item {
-  transition: all 0.3s ease;
-}
-
-.stat-item:hover {
-  transform: scale(1.05);
-}
-
-.user-dashboard {
-  position: relative;
-}
-
-.user-dashboard::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/dashboard-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.03;
-  z-index: 0;
-}
-
-.avatar {
-  transition: all 0.3s ease;
-}
-
-.avatar:hover {
-  transform: scale(1.05);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 4rem 0;
-  }
-  .hero-content h1 {
-    font-size: 2.5rem;
-  }
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-  .user-info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-  .user-actions {
-    justify-content: center;
-  }
-}
-@media (max-width: 480px) {
-  .hero-content h1 {
-    font-size: 2rem;
-  }
-  .hero-content p {
-    font-size: 1rem;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  .hero-actions {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  .hero-actions a {
-    width: 100%;
-    text-align: center;
-  }
-}
-/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
-@media (prefers-color-scheme: dark) {
-  .markdown-body {
-    /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: dark;
-  }
-}
-/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
-@media (prefers-color-scheme: light) {
-  .markdown-body {
-    /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: light;
-    /* 定义CSS自定义属性，用于主题色彩管理 */
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
-    --color-fg-subtle: #6e7781;
-    --color-canvas-default: #ffffff;
-    --color-canvas-subtle: #f6f8fa;
-    --color-border-default: #d0d7de;
-    --color-border-muted: hsla(210, 18%, 87%, 1);
-    --color-neutral-muted: rgba(175, 184, 193, 0.2);
-    --color-accent-fg: #0969da;
-    --color-accent-emphasis: #0969da;
-    --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
-    --color-mark-default: rgb(255, 255, 0);
-    --color-mark-fg: rgb(255, 187, 0);
-  }
-}
-/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
-.markdown-body {
-  /* 防止iOS Safari自动调整文本大小 */
-  -webkit-text-size-adjust: 100%;
-  /* 防止IE自动调整文本大小 */
-  -ms-text-size-adjust: 100%;
-  /* 优化文本渲染质量，提升可读性 */
-  text-rendering: optimizelegibility;
-  /* 重置外边距为0 */
-  margin: 0;
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 使用CSS变量设置文本颜色 */
-  color: var(--color-fg-muted);
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body > *:first-child {
-  /* 强制移除顶部外边距，避免不必要的空白 */
-  margin-top: 0 !important;
-}
-.markdown-body {
-  /* 最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body > *:last-child {
-  /* 强制移除底部外边距，避免不必要的空白 */
-  margin-bottom: 0 !important;
-}
-.markdown-body {
-  /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
-}
-.markdown-body p,
-.markdown-body blockquote,
-.markdown-body ul,
-.markdown-body ol,
-.markdown-body dl,
-.markdown-body table,
-.markdown-body hr,
-.markdown-body form,
-.markdown-body pre,
-.markdown-body details {
-  /* 移除顶部外边距，避免重复间距 */
-  margin-top: 0;
-  /* 设置底部外边距为1em，保持适当间距 */
-  margin-bottom: 1em;
-}
-.markdown-body {
-  /* 引用块内部元素间距处理 */
-}
-.markdown-body blockquote {
-  /* 引用块内第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body blockquote > :first-child {
-  margin-top: 0;
-}
-.markdown-body blockquote {
-  /* 引用块内最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body blockquote > :last-child {
-  margin-bottom: 0;
-}
-.markdown-body {
-  /* 统一显示成块状元素 - 确保这些元素独占一行 */
-}
-.markdown-body details,
-.markdown-body figcaption,
-.markdown-body figure {
-  /* 设置为块级元素，独占一行显示 */
-  display: block;
-}
-.markdown-body {
-  /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
-}
-.markdown-body audio,
-.markdown-body canvas,
-.markdown-body video {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-}
-.markdown-body {
-  /* 按钮内部间距统一 - 移除Firefox默认内边距 */
-}
-.markdown-body button::-moz-focus-inner,
-.markdown-body input::-moz-focus-inner {
-  /* 移除Firefox浏览器按钮和输入框的内部内边距 */
-  padding: 0;
-  /* 移除Firefox浏览器按钮和输入框的内部边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 定义元素显示为斜体 - 术语定义样式 */
-}
-.markdown-body dfn {
-  /* 设置字体为斜体，用于术语定义 */
-  font-style: italic;
-}
-.markdown-body {
-  /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
-}
-.markdown-body table {
-  /* 合并表格边框，相邻单元格边框合并为一条 */
-  border-collapse: collapse;
-  /* 设置表格单元格间距为0 */
-  border-spacing: 0;
-  /* 设置为块级元素，可以设置宽高 */
-  display: block;
-  /* 宽度根据内容自适应 */
-  width: max-content;
-  /* 最大宽度不超过父容器 */
-  max-width: 100%;
-  /* 内容溢出时显示滚动条 */
-  overflow: auto;
-}
-.markdown-body {
-  /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
-}
-.markdown-body [draggable] {
-  /* 设置鼠标悬停时显示移动光标 */
-  cursor: move;
-}
-.markdown-body {
-  /* 加粗元素 - 粗体文本样式 */
-}
-.markdown-body b,
-.markdown-body strong {
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-}
-.markdown-body {
-  /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
-}
-.markdown-body abbr,
-.markdown-body acronym {
-  /* 移除底部边框 */
-  border-bottom: none;
-  /* 设置字体变体为正常 */
-  font-variant: normal;
-  /* 设置虚线下划线装饰 */
-  text-decoration: underline dotted;
-}
-.markdown-body {
-  /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
-}
-.markdown-body abbr {
-  /* 设置鼠标悬停时显示帮助光标 */
-  cursor: help;
-}
-.markdown-body {
-  /* 一致的 del 样式 - 删除线文本样式 */
-}
-.markdown-body del {
-  /* 设置文本装饰为删除线 */
-  text-decoration: line-through;
-}
-.markdown-body {
-  /* a标签去除下划线 - 链接样式处理 */
-}
-.markdown-body a {
-  /* 默认移除下划线，保持页面简洁 */
-  text-decoration: none;
-  /* 没有href属性的链接样式 */
-}
-.markdown-body a:not([href]) {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 移除下划线装饰 */
-  text-decoration: none;
-}
-.markdown-body a {
-  /* 鼠标悬停时显示下划线 */
-}
-.markdown-body a:hover {
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
-}
-.markdown-body ins {
-  /* 移除下划线装饰，保持页面简洁 */
-  text-decoration: none;
-}
-.markdown-body {
-  /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
-  * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
-  * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
-  * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
-  * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
-  */
-}
-.markdown-body u,
-.markdown-body .typo-u {
-  /* 设置文本装饰为下划线，用于专名号显示 */
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
-}
-.markdown-body [hidden] {
-  /* 强制隐藏元素，优先级最高 */
-  display: none !important;
-}
-.markdown-body {
-  /* 伸缩框显示为列表元素 - 详情框摘要样式 */
-}
-.markdown-body summary {
-  /* 设置为列表项显示，显示为可点击的列表项 */
-  display: list-item;
-}
-.markdown-body {
-  /* 引用元素前后内容 - 移除默认引号 */
-}
-.markdown-body q:before,
-.markdown-body q:after {
-  /* 移除引用元素前后的默认引号内容 */
-  content: "";
-}
-.markdown-body {
-  /* 表格标题和表头文本对齐 - 默认左对齐 */
-}
-.markdown-body caption,
-.markdown-body th {
-  /* 设置文本左对齐 */
-  text-align: left;
-}
-.markdown-body {
-  /* 居中对齐的表格标题和表头 */
-}
-.markdown-body caption[align=center],
-.markdown-body th[align=center] {
-  /* 设置文本居中对齐 */
-  text-align: center;
-}
-.markdown-body {
-  /* 特定元素字体粗细统一 - 地址、标题、引用等 */
-}
-.markdown-body address,
-.markdown-body caption,
-.markdown-body cite,
-.markdown-body em,
-.markdown-body th,
-.markdown-body var {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body {
-  /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
-}
-.markdown-body mark {
-  /* 设置标记背景色，使用CSS变量 */
-  background: var(--color-mark-default);
-  /* 设置内边距，增加标记的可读性 */
-  padding: 2px;
-  /* 激活状态的标记样式 */
-}
-.markdown-body mark.active {
-  /* 激活时使用强调色背景 */
-  background: var(--color-mark-fg);
-}
-.markdown-body {
-  /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
-}
-.markdown-body h1 {
-  /* 设置上下外边距为0.67em */
-  margin: 0.67em 0;
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-  /* 设置字体大小为2倍基础大小 */
-  font-size: 2em;
-}
-.markdown-body {
-  /* small字体缩小 - 小字体文本样式 */
-}
-.markdown-body small {
-  /* 设置字体大小为父元素的90% */
-  font-size: 90%;
-}
-.markdown-body {
-  /* 上下标显示 - 下标和上标文本样式 */
-}
-.markdown-body sub,
-.markdown-body sup {
-  /* 设置字体大小为75% */
-  font-size: 75%;
-  /* 设置行高为0，避免影响行间距 */
-  line-height: 0;
-  /* 设置相对定位，用于精确控制位置 */
-  position: relative;
-  /* 设置垂直对齐为基线 */
-  vertical-align: baseline;
-}
-.markdown-body {
-  /* 上下标内链接样式 */
-}
-.markdown-body sub a,
-.markdown-body sup a {
-  /* 设置左右内边距为0.1em */
-  padding: 0 0.1em;
-}
-.markdown-body {
-  /* 下标位置调整 */
-}
-.markdown-body sub {
-  /* 向下偏移0.25em */
-  bottom: -0.25em;
-}
-.markdown-body {
-  /* 上标位置调整 */
-}
-.markdown-body sup {
-  /* 向上偏移0.5em */
-  top: -0.5em;
-}
-.markdown-body {
-  /* 代码相关的字体大小统一 - 代码元素字体样式 */
-}
-.markdown-body code,
-.markdown-body kbd,
-.markdown-body pre,
-.markdown-body samp,
-.markdown-body pre tt {
-  /* 设置字体为等宽字体，便于代码阅读 */
-  font-family: monospace;
-  /* 设置字体大小为1em，保持一致性 */
-  font-size: 1em;
-}
-.markdown-body {
-  /* 去除默认边框 - 移除字段集和图片的默认边框 */
-}
-.markdown-body fieldset,
-.markdown-body img {
-  /* 移除边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 图片初始化样式 - 图片元素基础样式 */
-}
-.markdown-body img {
-  /* 设置边框样式为无 */
-  border-style: none;
-  /* 设置最大宽度为100%，防止溢出 */
-  max-width: 100%;
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 设置左右外边距为自动，实现居中 */
-  margin: 0 auto;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-default);
-}
-.markdown-body {
-  /* 可附标题内容元素的间距 - 图片容器样式 */
-}
-.markdown-body figure {
-  /* 设置上下外边距为1em，左右外边距为40px */
-  margin: 1em 40px;
-}
-.markdown-body {
-  /* 间隔线 - 水平分隔线样式 */
-  /* 一致化 horizontal rule - 统一水平分隔线样式 */
-}
-.markdown-body hr {
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 隐藏溢出内容 */
-  overflow: hidden;
-  /* 设置背景为透明 */
-  background: transparent;
-  /* 设置底部边框，使用CSS变量 */
-  border-bottom: 1px solid var(--color-border-muted);
-  /* 设置高度为0.25em */
-  height: 0.25em;
-  /* 移除内边距 */
-  padding: 0;
-  /* 设置上下外边距为24px */
-  margin: 24px 0;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-border-default);
-  /* 移除边框 */
-  border: 0;
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body hr::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body hr {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body hr::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
-}
-.markdown-body button,
-.markdown-body input,
-.markdown-body select,
-.markdown-body textarea {
-  /* 继承父元素的字体样式 */
-  font: inherit;
-  /* 移除外边距 */
-  margin: 0;
-  /* 设置溢出为可见 */
-  overflow: visible;
-  /* 继承父元素的字体族 */
-  font-family: inherit;
-  /* 继承父元素的字体大小 */
-  font-size: inherit;
-  /* 继承父元素的行高 */
-  line-height: inherit;
-}
-.markdown-body {
-  /* 外观显示为按钮 - 按钮类型输入框样式 */
-}
-.markdown-body [type=button],
-.markdown-body [type=reset],
-.markdown-body [type=submit] {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 设置标准按钮外观，提高兼容性 */
-  appearance: button;
-}
-.markdown-body {
-  /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
-}
-.markdown-body [type=checkbox],
-.markdown-body [type=radio] {
-  /* 设置盒模型为边框盒模型 */
-  box-sizing: border-box;
-  /* 移除内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
-}
-.markdown-body [type=number]::-webkit-inner-spin-button,
-.markdown-body [type=number]::-webkit-outer-spin-button {
-  /* 设置高度为自动，适应内容 */
-  height: auto;
-}
-.markdown-body {
-  /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
-}
-.markdown-body [type=search]::-webkit-search-cancel-button,
-.markdown-body [type=search]::-webkit-search-decoration {
-  /* 移除WebKit浏览器搜索框默认样式 */
-  -webkit-appearance: none;
-}
-.markdown-body {
-  /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
-}
-.markdown-body ::-webkit-input-placeholder {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 设置透明度为0.54，创建半透明效果 */
-  opacity: 0.54;
-}
-.markdown-body {
-  /* 文件选择按钮样式统一 - 文件上传按钮样式 */
-}
-.markdown-body ::-webkit-file-upload-button {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 继承父元素字体样式 */
-  font: inherit;
-}
-.markdown-body {
-  /* 占位符显示统一 - 通用占位符样式 */
-}
-.markdown-body ::placeholder {
-  /* 设置占位符颜色，使用CSS变量 */
-  color: var(--color-fg-subtle);
-  /* 设置完全不透明 */
-  opacity: 1;
-}
-.markdown-body {
-  /* table内的td,th去除留白 - 表格单元格样式 */
-}
-.markdown-body td,
-.markdown-body th {
-  /* 移除表格单元格内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 伸缩框鼠标显示 - 详情框摘要样式 */
-}
-.markdown-body details summary {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
-}
-.markdown-body details:not([open]) > *:not(summary) {
-  /* 强制隐藏未展开详情框内的非摘要内容 */
-  display: none !important;
-}
-.markdown-body {
-  /* 按键显示 - 键盘按键样式 */
-}
-.markdown-body kbd {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-  /* 设置内边距为3px上下，5px左右 */
-  padding: 3px 5px;
-  /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
-  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-  /* 设置行高为10px */
-  line-height: 10px;
-  /* 设置文本颜色，使用CSS变量 */
-  color: var(--color-fg-default);
-  /* 设置垂直对齐为中间 */
-  vertical-align: middle;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-subtle);
-  /* 设置边框为1px实线，使用CSS变量 */
-  border: solid 1px var(--color-neutral-muted);
-  /* 设置底部边框颜色，使用CSS变量 */
-  border-bottom-color: var(--color-neutral-muted);
-  /* 设置圆角为6px */
-  border-radius: 6px;
-  /* 设置内阴影，创建按键凹陷效果 */
-  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
-}
-.markdown-body {
-  /* 清除浮动工具类 - 清除浮动伪元素 */
-}
-.markdown-body .clearfix:before,
-.markdown-body .clearfix:after {
-  /* 空内容，仅用于布局 */
-  content: "";
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-}
-.markdown-body {
-  /* 清除浮动工具类 - after伪元素 */
-}
-.markdown-body .clearfix:after {
-  /* 清除左右浮动 */
-  clear: both;
-}
-.markdown-body {
-  /* 清除浮动工具类 - 主容器 */
-}
-.markdown-body .clearfix {
-  /* 触发IE的hasLayout属性，用于清除浮动 */
-  zoom: 1;
-}
-.markdown-body {
-  /* 强制文本换行 - 文本换行工具类 */
-}
-.markdown-body .textwrap,
-.markdown-body .textwrap td,
-.markdown-body .textwrap th {
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 强制在任意字符间换行，防止溢出 */
-  word-break: break-all;
-}
-.markdown-body {
-  /* 文本换行表格 - 固定表格布局 */
-}
-.markdown-body .textwrap-table {
-  /* 设置表格布局为固定，提高渲染性能 */
-  table-layout: fixed;
-}
-.markdown-body {
-  /* 无序列表样式 - 项目符号列表 */
-}
-.markdown-body ul {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为实心圆点 */
-  list-style: disc;
-}
-.markdown-body {
-  /* 有序列表样式 - 数字列表 */
-}
-.markdown-body ol {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为数字 */
-  list-style: decimal;
-  /* 列表项样式 */
-}
-.markdown-body ol li {
-  /* 设置左内边距为0.4em，增加数字与文本间距 */
-  padding-left: 0.4em;
-}
-.markdown-body {
-  /* 相邻列表项间距 - 列表项之间的间距 */
-}
-.markdown-body li + li {
-  /* 设置顶部外边距为0.25em，增加列表项间距 */
-  margin-top: 0.25em;
-}
-.markdown-body {
-  /* 嵌套列表样式 - 列表项内的子列表 */
-}
-.markdown-body li {
-  /* 无序子列表样式 */
-}
-.markdown-body li ul {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-  /* 设置列表样式为空心圆点 */
-  list-style: circle;
-  /* 三级无序列表样式 */
-}
-.markdown-body li ul li ul {
-  /* 设置列表样式为实心方块 */
-  list-style: square;
-}
-.markdown-body li {
-  /* 有序子列表样式 */
-}
-.markdown-body li ol {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-}
-.markdown-body {
-  /* 任务列表项样式 - 待办事项列表项 */
-}
-.markdown-body .task-list-item {
-  /* 移除列表样式，不显示项目符号 */
-  list-style-type: none;
-  /* 设置相对定位，用于绝对定位子元素 */
-  position: relative;
-  /* 第一个子输入框样式 */
-}
-.markdown-body .task-list-item > input {
-  /* 第一个子元素右边距 */
-}
-.markdown-body .task-list-item > input:nth-child(1) {
-  /* 设置右边距为6px */
-  margin-right: 6px;
-}
-.markdown-body .task-list-item {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item label {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body .task-list-item {
-  /* 拖拽手柄样式 */
-}
-.markdown-body .task-list-item .handle {
-  /* 隐藏拖拽手柄 */
-  display: none;
-}
-.markdown-body .task-list-item {
-  /* 复选框样式 */
-}
-.markdown-body .task-list-item input[type=checkbox] {
-  /* 设置宽度为0.9em */
-  width: 0.9em;
-  /* 设置高度为0.9em */
-  height: 0.9em;
-  /* 设置绝对定位 */
-  position: absolute;
-  /* 向左偏移1.3em */
-  left: -1.3em;
-  /* 向下偏移0.35em */
-  top: 0.35em;
-}
-.markdown-body {
-  /* 启用的任务列表项样式 */
-}
-.markdown-body .task-list-item.enabled {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item.enabled label {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 相邻任务列表项间距 */
-}
-.markdown-body .task-list-item + .task-list-item {
-  /* 设置顶部外边距为3px */
-  margin-top: 3px;
-}
-.markdown-body {
-  /* 包含任务列表的容器样式 */
-}
-.markdown-body .contains-task-list {
-  /* 从右到左文本方向样式 */
-}
-.markdown-body .contains-task-list:dir(rtl) .task-list-item input[type=checkbox] {
-  /* 设置复选框外边距，适配RTL布局 */
-  margin: 0 -1.6em 0.25em 0.2em;
-}
-.markdown-body {
-  /* 目录样式 - 表格目录容器 */
-}
-.markdown-body .toc {
-  /* 重置左边距为0 */
-  margin-left: 0;
-}
-.markdown-body {
-  /* 定义列表样式 - 描述列表容器 */
-}
-.markdown-body dl {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置块级起始外边距为1em */
-  margin-block-start: 1em;
-  /* 设置块级结束外边距为1em */
-  margin-block-end: 1em;
-  /* 设置内联起始外边距为0px */
-  margin-inline-start: 0px;
-  /* 设置内联结束外边距为0px */
-  margin-inline-end: 0px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-  /* 定义术语样式 */
-}
-.markdown-body dl dt {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-.markdown-body dl {
-  /* 定义描述样式 */
-}
-.markdown-body dl dd {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置内联起始外边距为40px，创建缩进效果 */
-  margin-inline-start: 40px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-
-.markdown-body {
-  --color-base: #ef4444;
-  --markdown-bg: white;
-  --color-bg: #ff47479c;
-  --color-light: #ef44441a;
-  --color-extra: rgba(239, 68, 68, 0.3);
-  --color-more: rgba(239, 68, 68, 0.4);
-}
-
-.markdown-body.green {
-  background-color: var(--markdown-bg);
-  @apply p-3 lg:p-6;
-}
-.markdown-body.green strong::before {
-  content: "『";
-}
-.markdown-body.green strong::after {
-  content: "』";
-}
-.markdown-body.green {
-  /* 块/段落引用 */
-}
-.markdown-body.green blockquote {
-  position: relative;
-  z-index: 600;
-  padding: 20px 20px 15px 20px;
-  line-height: 1.4 !important;
-  background-color: rgba(239, 68, 68, 0.06);
-  border-radius: 0.4em;
-}
-.markdown-body.green blockquote > * {
-  position: relative;
-}
-.markdown-body.green blockquote > *:first-child:before {
-  content: "“";
-  color: var(--color-light);
-  font-size: 6.5em;
-  font-weight: 700;
-  transform: rotate(15deg) translateX(-10px);
-  opacity: 1;
-  position: absolute;
-  top: -0.4em;
-  left: -0.2em;
-  text-shadow: none;
-  z-index: -10;
-}
-.markdown-body.green .tabs {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-.markdown-body.green {
-  /* 让链接在 hover 状态下显示下划线 */
-}
-.markdown-body.green a {
-  position: relative;
-  z-index: 10;
-  transition: color 0.3s linear;
-  cursor: pointer;
-  font-weight: bolder;
-  text-decoration: none;
-  color: var(--color-base);
-  border-bottom: 1px solid currentColor;
-  padding: 0 4px;
-}
-.markdown-body.green a[data-footnote-backref], .markdown-body.green a[data-footnote-ref] {
-  border: none;
-}
-.markdown-body.green a[data-footnote-backref]:hover, .markdown-body.green a[data-footnote-ref]:hover {
-  background: none;
-  animation: none;
-}
-.markdown-body.green a:hover {
-  content: "";
-  border: none;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
-  background-size: 20px auto;
-  animation: waveMove 1s infinite linear;
-}
-@keyframes waveMove {
-  0% {
-    background-position: 0 100%;
-  }
-  100% {
-    background-position: -20px 100%;
-  }
-}
-.markdown-body.green pre {
-  background: var(--prism-background);
-  font-size: var(--prism-font-size);
-  display: block;
-  -webkit-overflow-scrolling: touch;
-}
-.markdown-body.green pre,
-.markdown-body.green pre code {
-  font-family: var(--prism-font-family);
-}
-.markdown-body.green small,
-.markdown-body.green figcaption {
-  font-size: 0.75em;
-  color: #888;
-}
-.markdown-body.green legend {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green caption {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green del {
-  text-decoration: line-through var(--color-base) 2px;
-}
-.markdown-body.green code {
-  color: rgb(45, 55, 72);
-  background-color: rgba(160, 174, 192, 0.25);
-  font-family: inherit;
-  font-size: 1em;
-  border-radius: 4px;
-  padding: 1px 6px;
-  margin: 0 2px;
-  vertical-align: bottom;
-}
-.markdown-body.green pre code {
-  padding: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  white-space: pre;
-  background-color: transparent;
-  vertical-align: baseline;
-  border-radius: 0;
-  margin: 0;
-}
-.markdown-body.green table {
-  width: 100%;
-  display: table;
-  border: 1px solid var(--color-light);
-}
-.markdown-body.green table tr:hover {
-  background: var(--color-light);
-}
-.markdown-body.green table:hover {
-  border: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover th {
-  border-right: 1px solid var(--color-extra);
-  background: var(--color-extra);
-  border-bottom: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover td {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover caption {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green table th {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  background: var(--color-light);
-  border-bottom: 1px solid var(--color-light);
-}
-.markdown-body.green table td {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-}
-.markdown-body.green table caption {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  border-bottom: none;
-}
-.markdown-body.green table thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green h1,
-.markdown-body.green h2,
-.markdown-body.green h3,
-.markdown-body.green h4,
-.markdown-body.green h5,
-.markdown-body.green h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.6em;
-  line-height: 1.35;
-  position: relative;
-}
-.markdown-body.green h1 {
-  font-size: 1.8em;
-}
-.markdown-body.green h2 {
-  font-size: 1.6em;
-}
-.markdown-body.green h3 {
-  font-size: 1.4em;
-}
-.markdown-body.green h4 {
-  font-size: 1.2em;
-}
-.markdown-body.green h5 {
-  font-size: 1em;
-}
-.markdown-body.green h6 {
-  font-size: 1em;
-}
-.markdown-body.green ::-webkit-calendar-picker-indicator {
-  filter: invert(50%);
-}
-.markdown-body.green em {
-  font-weight: inherit;
-  position: relative;
-}
-.markdown-body.green em:after {
-  position: absolute;
-  top: 0.65em;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  pointer-events: none;
-  color: var(--color-base);
-  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
-}
-.markdown-body.green ul.toc li {
-  list-style-type: none;
-}
-.markdown-body.green ul.toc li a {
-  text-decoration: none;
-  border: 0;
-  list-style-type: none;
-}
-.markdown-body.green.chinese {
-  text-indent: 1.5em;
-  font-weight: 300;
-}
-.markdown-body.green.chinese h1,
-.markdown-body.green.chinese h2,
-.markdown-body.green.chinese h3,
-.markdown-body.green.chinese h4,
-.markdown-body.green.chinese h5,
-.markdown-body.green.chinese h6,
-.markdown-body.green.chinese ol,
-.markdown-body.green.chinese ul,
-.markdown-body.green.chinese blockquote,
-.markdown-body.green.chinese details,
-.markdown-body.green.chinese summary,
-.markdown-body.green.chinese pre,
-.markdown-body.green.chinese .tabs {
-  text-indent: 0;
-}
\ No newline at end of file
diff --git a/public/scss-compiler/page/index/markdown-reset.css b/public/scss-compiler/page/index/markdown-reset.css
deleted file mode 100644
index 403ce31..0000000
--- a/public/scss-compiler/page/index/markdown-reset.css
+++ /dev/null
@@ -1,1188 +0,0 @@
-@charset "UTF-8";
-/* 首页样式 */
-.hero-section {
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/hero-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.1;
-  z-index: 0;
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-}
-
-.feature-card {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-  transform: translateY(-5px);
-}
-
-.feature-card .material-symbols-light--article,
-.feature-card .material-symbols-light--bookmark,
-.feature-card .material-symbols-light--person {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover .material-symbols-light--article,
-.feature-card:hover .material-symbols-light--bookmark,
-.feature-card:hover .material-symbols-light--person {
-  transform: scale(1.1);
-}
-
-.stats-section {
-  position: relative;
-}
-
-.stats-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/stats-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.05;
-  z-index: 0;
-}
-
-.stat-item {
-  transition: all 0.3s ease;
-}
-
-.stat-item:hover {
-  transform: scale(1.05);
-}
-
-.user-dashboard {
-  position: relative;
-}
-
-.user-dashboard::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/dashboard-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.03;
-  z-index: 0;
-}
-
-.avatar {
-  transition: all 0.3s ease;
-}
-
-.avatar:hover {
-  transform: scale(1.05);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 4rem 0;
-  }
-  .hero-content h1 {
-    font-size: 2.5rem;
-  }
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-  .user-info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-  .user-actions {
-    justify-content: center;
-  }
-}
-@media (max-width: 480px) {
-  .hero-content h1 {
-    font-size: 2rem;
-  }
-  .hero-content p {
-    font-size: 1rem;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  .hero-actions {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  .hero-actions a {
-    width: 100%;
-    text-align: center;
-  }
-}
-/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
-@media (prefers-color-scheme: dark) {
-  .markdown-body {
-    /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: dark;
-  }
-}
-/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
-@media (prefers-color-scheme: light) {
-  .markdown-body {
-    /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: light;
-    /* 定义CSS自定义属性，用于主题色彩管理 */
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
-    --color-fg-subtle: #6e7781;
-    --color-canvas-default: #ffffff;
-    --color-canvas-subtle: #f6f8fa;
-    --color-border-default: #d0d7de;
-    --color-border-muted: hsla(210, 18%, 87%, 1);
-    --color-neutral-muted: rgba(175, 184, 193, 0.2);
-    --color-accent-fg: #0969da;
-    --color-accent-emphasis: #0969da;
-    --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
-    --color-mark-default: rgb(255, 255, 0);
-    --color-mark-fg: rgb(255, 187, 0);
-  }
-}
-/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
-.markdown-body {
-  /* 防止iOS Safari自动调整文本大小 */
-  -webkit-text-size-adjust: 100%;
-  /* 防止IE自动调整文本大小 */
-  -ms-text-size-adjust: 100%;
-  /* 优化文本渲染质量，提升可读性 */
-  text-rendering: optimizelegibility;
-  /* 重置外边距为0 */
-  margin: 0;
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 使用CSS变量设置文本颜色 */
-  color: var(--color-fg-muted);
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body > *:first-child {
-  /* 强制移除顶部外边距，避免不必要的空白 */
-  margin-top: 0 !important;
-}
-.markdown-body {
-  /* 最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body > *:last-child {
-  /* 强制移除底部外边距，避免不必要的空白 */
-  margin-bottom: 0 !important;
-}
-.markdown-body {
-  /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
-}
-.markdown-body p,
-.markdown-body blockquote,
-.markdown-body ul,
-.markdown-body ol,
-.markdown-body dl,
-.markdown-body table,
-.markdown-body hr,
-.markdown-body form,
-.markdown-body pre,
-.markdown-body details {
-  /* 移除顶部外边距，避免重复间距 */
-  margin-top: 0;
-  /* 设置底部外边距为1em，保持适当间距 */
-  margin-bottom: 1em;
-}
-.markdown-body {
-  /* 引用块内部元素间距处理 */
-}
-.markdown-body blockquote {
-  /* 引用块内第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body blockquote > :first-child {
-  margin-top: 0;
-}
-.markdown-body blockquote {
-  /* 引用块内最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body blockquote > :last-child {
-  margin-bottom: 0;
-}
-.markdown-body {
-  /* 统一显示成块状元素 - 确保这些元素独占一行 */
-}
-.markdown-body details,
-.markdown-body figcaption,
-.markdown-body figure {
-  /* 设置为块级元素，独占一行显示 */
-  display: block;
-}
-.markdown-body {
-  /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
-}
-.markdown-body audio,
-.markdown-body canvas,
-.markdown-body video {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-}
-.markdown-body {
-  /* 按钮内部间距统一 - 移除Firefox默认内边距 */
-}
-.markdown-body button::-moz-focus-inner,
-.markdown-body input::-moz-focus-inner {
-  /* 移除Firefox浏览器按钮和输入框的内部内边距 */
-  padding: 0;
-  /* 移除Firefox浏览器按钮和输入框的内部边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 定义元素显示为斜体 - 术语定义样式 */
-}
-.markdown-body dfn {
-  /* 设置字体为斜体，用于术语定义 */
-  font-style: italic;
-}
-.markdown-body {
-  /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
-}
-.markdown-body table {
-  /* 合并表格边框，相邻单元格边框合并为一条 */
-  border-collapse: collapse;
-  /* 设置表格单元格间距为0 */
-  border-spacing: 0;
-  /* 设置为块级元素，可以设置宽高 */
-  display: block;
-  /* 宽度根据内容自适应 */
-  width: max-content;
-  /* 最大宽度不超过父容器 */
-  max-width: 100%;
-  /* 内容溢出时显示滚动条 */
-  overflow: auto;
-}
-.markdown-body {
-  /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
-}
-.markdown-body [draggable] {
-  /* 设置鼠标悬停时显示移动光标 */
-  cursor: move;
-}
-.markdown-body {
-  /* 加粗元素 - 粗体文本样式 */
-}
-.markdown-body b,
-.markdown-body strong {
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-}
-.markdown-body {
-  /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
-}
-.markdown-body abbr,
-.markdown-body acronym {
-  /* 移除底部边框 */
-  border-bottom: none;
-  /* 设置字体变体为正常 */
-  font-variant: normal;
-  /* 设置虚线下划线装饰 */
-  text-decoration: underline dotted;
-}
-.markdown-body {
-  /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
-}
-.markdown-body abbr {
-  /* 设置鼠标悬停时显示帮助光标 */
-  cursor: help;
-}
-.markdown-body {
-  /* 一致的 del 样式 - 删除线文本样式 */
-}
-.markdown-body del {
-  /* 设置文本装饰为删除线 */
-  text-decoration: line-through;
-}
-.markdown-body {
-  /* a标签去除下划线 - 链接样式处理 */
-}
-.markdown-body a {
-  /* 默认移除下划线，保持页面简洁 */
-  text-decoration: none;
-  /* 没有href属性的链接样式 */
-}
-.markdown-body a:not([href]) {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 移除下划线装饰 */
-  text-decoration: none;
-}
-.markdown-body a {
-  /* 鼠标悬停时显示下划线 */
-}
-.markdown-body a:hover {
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
-}
-.markdown-body ins {
-  /* 移除下划线装饰，保持页面简洁 */
-  text-decoration: none;
-}
-.markdown-body {
-  /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
-  * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
-  * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
-  * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
-  * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
-  */
-}
-.markdown-body u,
-.markdown-body .typo-u {
-  /* 设置文本装饰为下划线，用于专名号显示 */
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
-}
-.markdown-body [hidden] {
-  /* 强制隐藏元素，优先级最高 */
-  display: none !important;
-}
-.markdown-body {
-  /* 伸缩框显示为列表元素 - 详情框摘要样式 */
-}
-.markdown-body summary {
-  /* 设置为列表项显示，显示为可点击的列表项 */
-  display: list-item;
-}
-.markdown-body {
-  /* 引用元素前后内容 - 移除默认引号 */
-}
-.markdown-body q:before,
-.markdown-body q:after {
-  /* 移除引用元素前后的默认引号内容 */
-  content: "";
-}
-.markdown-body {
-  /* 表格标题和表头文本对齐 - 默认左对齐 */
-}
-.markdown-body caption,
-.markdown-body th {
-  /* 设置文本左对齐 */
-  text-align: left;
-}
-.markdown-body {
-  /* 居中对齐的表格标题和表头 */
-}
-.markdown-body caption[align=center],
-.markdown-body th[align=center] {
-  /* 设置文本居中对齐 */
-  text-align: center;
-}
-.markdown-body {
-  /* 特定元素字体粗细统一 - 地址、标题、引用等 */
-}
-.markdown-body address,
-.markdown-body caption,
-.markdown-body cite,
-.markdown-body em,
-.markdown-body th,
-.markdown-body var {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body {
-  /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
-}
-.markdown-body mark {
-  /* 设置标记背景色，使用CSS变量 */
-  background: var(--color-mark-default);
-  /* 设置内边距，增加标记的可读性 */
-  padding: 2px;
-  /* 激活状态的标记样式 */
-}
-.markdown-body mark.active {
-  /* 激活时使用强调色背景 */
-  background: var(--color-mark-fg);
-}
-.markdown-body {
-  /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
-}
-.markdown-body h1 {
-  /* 设置上下外边距为0.67em */
-  margin: 0.67em 0;
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-  /* 设置字体大小为2倍基础大小 */
-  font-size: 2em;
-}
-.markdown-body {
-  /* small字体缩小 - 小字体文本样式 */
-}
-.markdown-body small {
-  /* 设置字体大小为父元素的90% */
-  font-size: 90%;
-}
-.markdown-body {
-  /* 上下标显示 - 下标和上标文本样式 */
-}
-.markdown-body sub,
-.markdown-body sup {
-  /* 设置字体大小为75% */
-  font-size: 75%;
-  /* 设置行高为0，避免影响行间距 */
-  line-height: 0;
-  /* 设置相对定位，用于精确控制位置 */
-  position: relative;
-  /* 设置垂直对齐为基线 */
-  vertical-align: baseline;
-}
-.markdown-body {
-  /* 上下标内链接样式 */
-}
-.markdown-body sub a,
-.markdown-body sup a {
-  /* 设置左右内边距为0.1em */
-  padding: 0 0.1em;
-}
-.markdown-body {
-  /* 下标位置调整 */
-}
-.markdown-body sub {
-  /* 向下偏移0.25em */
-  bottom: -0.25em;
-}
-.markdown-body {
-  /* 上标位置调整 */
-}
-.markdown-body sup {
-  /* 向上偏移0.5em */
-  top: -0.5em;
-}
-.markdown-body {
-  /* 代码相关的字体大小统一 - 代码元素字体样式 */
-}
-.markdown-body code,
-.markdown-body kbd,
-.markdown-body pre,
-.markdown-body samp,
-.markdown-body pre tt {
-  /* 设置字体为等宽字体，便于代码阅读 */
-  font-family: monospace;
-  /* 设置字体大小为1em，保持一致性 */
-  font-size: 1em;
-}
-.markdown-body {
-  /* 去除默认边框 - 移除字段集和图片的默认边框 */
-}
-.markdown-body fieldset,
-.markdown-body img {
-  /* 移除边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 图片初始化样式 - 图片元素基础样式 */
-}
-.markdown-body img {
-  /* 设置边框样式为无 */
-  border-style: none;
-  /* 设置最大宽度为100%，防止溢出 */
-  max-width: 100%;
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 设置左右外边距为自动，实现居中 */
-  margin: 0 auto;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-default);
-}
-.markdown-body {
-  /* 可附标题内容元素的间距 - 图片容器样式 */
-}
-.markdown-body figure {
-  /* 设置上下外边距为1em，左右外边距为40px */
-  margin: 1em 40px;
-}
-.markdown-body {
-  /* 间隔线 - 水平分隔线样式 */
-  /* 一致化 horizontal rule - 统一水平分隔线样式 */
-}
-.markdown-body hr {
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 隐藏溢出内容 */
-  overflow: hidden;
-  /* 设置背景为透明 */
-  background: transparent;
-  /* 设置底部边框，使用CSS变量 */
-  border-bottom: 1px solid var(--color-border-muted);
-  /* 设置高度为0.25em */
-  height: 0.25em;
-  /* 移除内边距 */
-  padding: 0;
-  /* 设置上下外边距为24px */
-  margin: 24px 0;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-border-default);
-  /* 移除边框 */
-  border: 0;
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body hr::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body hr {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body hr::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
-}
-.markdown-body button,
-.markdown-body input,
-.markdown-body select,
-.markdown-body textarea {
-  /* 继承父元素的字体样式 */
-  font: inherit;
-  /* 移除外边距 */
-  margin: 0;
-  /* 设置溢出为可见 */
-  overflow: visible;
-  /* 继承父元素的字体族 */
-  font-family: inherit;
-  /* 继承父元素的字体大小 */
-  font-size: inherit;
-  /* 继承父元素的行高 */
-  line-height: inherit;
-}
-.markdown-body {
-  /* 外观显示为按钮 - 按钮类型输入框样式 */
-}
-.markdown-body [type=button],
-.markdown-body [type=reset],
-.markdown-body [type=submit] {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 设置标准按钮外观，提高兼容性 */
-  appearance: button;
-}
-.markdown-body {
-  /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
-}
-.markdown-body [type=checkbox],
-.markdown-body [type=radio] {
-  /* 设置盒模型为边框盒模型 */
-  box-sizing: border-box;
-  /* 移除内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
-}
-.markdown-body [type=number]::-webkit-inner-spin-button,
-.markdown-body [type=number]::-webkit-outer-spin-button {
-  /* 设置高度为自动，适应内容 */
-  height: auto;
-}
-.markdown-body {
-  /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
-}
-.markdown-body [type=search]::-webkit-search-cancel-button,
-.markdown-body [type=search]::-webkit-search-decoration {
-  /* 移除WebKit浏览器搜索框默认样式 */
-  -webkit-appearance: none;
-}
-.markdown-body {
-  /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
-}
-.markdown-body ::-webkit-input-placeholder {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 设置透明度为0.54，创建半透明效果 */
-  opacity: 0.54;
-}
-.markdown-body {
-  /* 文件选择按钮样式统一 - 文件上传按钮样式 */
-}
-.markdown-body ::-webkit-file-upload-button {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 继承父元素字体样式 */
-  font: inherit;
-}
-.markdown-body {
-  /* 占位符显示统一 - 通用占位符样式 */
-}
-.markdown-body ::placeholder {
-  /* 设置占位符颜色，使用CSS变量 */
-  color: var(--color-fg-subtle);
-  /* 设置完全不透明 */
-  opacity: 1;
-}
-.markdown-body {
-  /* table内的td,th去除留白 - 表格单元格样式 */
-}
-.markdown-body td,
-.markdown-body th {
-  /* 移除表格单元格内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 伸缩框鼠标显示 - 详情框摘要样式 */
-}
-.markdown-body details summary {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
-}
-.markdown-body details:not([open]) > *:not(summary) {
-  /* 强制隐藏未展开详情框内的非摘要内容 */
-  display: none !important;
-}
-.markdown-body {
-  /* 按键显示 - 键盘按键样式 */
-}
-.markdown-body kbd {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-  /* 设置内边距为3px上下，5px左右 */
-  padding: 3px 5px;
-  /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
-  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-  /* 设置行高为10px */
-  line-height: 10px;
-  /* 设置文本颜色，使用CSS变量 */
-  color: var(--color-fg-default);
-  /* 设置垂直对齐为中间 */
-  vertical-align: middle;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-subtle);
-  /* 设置边框为1px实线，使用CSS变量 */
-  border: solid 1px var(--color-neutral-muted);
-  /* 设置底部边框颜色，使用CSS变量 */
-  border-bottom-color: var(--color-neutral-muted);
-  /* 设置圆角为6px */
-  border-radius: 6px;
-  /* 设置内阴影，创建按键凹陷效果 */
-  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
-}
-.markdown-body {
-  /* 清除浮动工具类 - 清除浮动伪元素 */
-}
-.markdown-body .clearfix:before,
-.markdown-body .clearfix:after {
-  /* 空内容，仅用于布局 */
-  content: "";
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-}
-.markdown-body {
-  /* 清除浮动工具类 - after伪元素 */
-}
-.markdown-body .clearfix:after {
-  /* 清除左右浮动 */
-  clear: both;
-}
-.markdown-body {
-  /* 清除浮动工具类 - 主容器 */
-}
-.markdown-body .clearfix {
-  /* 触发IE的hasLayout属性，用于清除浮动 */
-  zoom: 1;
-}
-.markdown-body {
-  /* 强制文本换行 - 文本换行工具类 */
-}
-.markdown-body .textwrap,
-.markdown-body .textwrap td,
-.markdown-body .textwrap th {
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 强制在任意字符间换行，防止溢出 */
-  word-break: break-all;
-}
-.markdown-body {
-  /* 文本换行表格 - 固定表格布局 */
-}
-.markdown-body .textwrap-table {
-  /* 设置表格布局为固定，提高渲染性能 */
-  table-layout: fixed;
-}
-.markdown-body {
-  /* 无序列表样式 - 项目符号列表 */
-}
-.markdown-body ul {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为实心圆点 */
-  list-style: disc;
-}
-.markdown-body {
-  /* 有序列表样式 - 数字列表 */
-}
-.markdown-body ol {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为数字 */
-  list-style: decimal;
-  /* 列表项样式 */
-}
-.markdown-body ol li {
-  /* 设置左内边距为0.4em，增加数字与文本间距 */
-  padding-left: 0.4em;
-}
-.markdown-body {
-  /* 相邻列表项间距 - 列表项之间的间距 */
-}
-.markdown-body li + li {
-  /* 设置顶部外边距为0.25em，增加列表项间距 */
-  margin-top: 0.25em;
-}
-.markdown-body {
-  /* 嵌套列表样式 - 列表项内的子列表 */
-}
-.markdown-body li {
-  /* 无序子列表样式 */
-}
-.markdown-body li ul {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-  /* 设置列表样式为空心圆点 */
-  list-style: circle;
-  /* 三级无序列表样式 */
-}
-.markdown-body li ul li ul {
-  /* 设置列表样式为实心方块 */
-  list-style: square;
-}
-.markdown-body li {
-  /* 有序子列表样式 */
-}
-.markdown-body li ol {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-}
-.markdown-body {
-  /* 任务列表项样式 - 待办事项列表项 */
-}
-.markdown-body .task-list-item {
-  /* 移除列表样式，不显示项目符号 */
-  list-style-type: none;
-  /* 设置相对定位，用于绝对定位子元素 */
-  position: relative;
-  /* 第一个子输入框样式 */
-}
-.markdown-body .task-list-item > input {
-  /* 第一个子元素右边距 */
-}
-.markdown-body .task-list-item > input:nth-child(1) {
-  /* 设置右边距为6px */
-  margin-right: 6px;
-}
-.markdown-body .task-list-item {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item label {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body .task-list-item {
-  /* 拖拽手柄样式 */
-}
-.markdown-body .task-list-item .handle {
-  /* 隐藏拖拽手柄 */
-  display: none;
-}
-.markdown-body .task-list-item {
-  /* 复选框样式 */
-}
-.markdown-body .task-list-item input[type=checkbox] {
-  /* 设置宽度为0.9em */
-  width: 0.9em;
-  /* 设置高度为0.9em */
-  height: 0.9em;
-  /* 设置绝对定位 */
-  position: absolute;
-  /* 向左偏移1.3em */
-  left: -1.3em;
-  /* 向下偏移0.35em */
-  top: 0.35em;
-}
-.markdown-body {
-  /* 启用的任务列表项样式 */
-}
-.markdown-body .task-list-item.enabled {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item.enabled label {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 相邻任务列表项间距 */
-}
-.markdown-body .task-list-item + .task-list-item {
-  /* 设置顶部外边距为3px */
-  margin-top: 3px;
-}
-.markdown-body {
-  /* 包含任务列表的容器样式 */
-}
-.markdown-body .contains-task-list {
-  /* 从右到左文本方向样式 */
-}
-.markdown-body .contains-task-list:dir(rtl) .task-list-item input[type=checkbox] {
-  /* 设置复选框外边距，适配RTL布局 */
-  margin: 0 -1.6em 0.25em 0.2em;
-}
-.markdown-body {
-  /* 目录样式 - 表格目录容器 */
-}
-.markdown-body .toc {
-  /* 重置左边距为0 */
-  margin-left: 0;
-}
-.markdown-body {
-  /* 定义列表样式 - 描述列表容器 */
-}
-.markdown-body dl {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置块级起始外边距为1em */
-  margin-block-start: 1em;
-  /* 设置块级结束外边距为1em */
-  margin-block-end: 1em;
-  /* 设置内联起始外边距为0px */
-  margin-inline-start: 0px;
-  /* 设置内联结束外边距为0px */
-  margin-inline-end: 0px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-  /* 定义术语样式 */
-}
-.markdown-body dl dt {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-.markdown-body dl {
-  /* 定义描述样式 */
-}
-.markdown-body dl dd {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置内联起始外边距为40px，创建缩进效果 */
-  margin-inline-start: 40px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-
-.markdown-body {
-  --color-base: #ef4444;
-  --markdown-bg: white;
-  --color-bg: #ff47479c;
-  --color-light: #ef44441a;
-  --color-extra: rgba(239, 68, 68, 0.3);
-  --color-more: rgba(239, 68, 68, 0.4);
-}
-
-.markdown-body.green {
-  background-color: var(--markdown-bg);
-  @apply p-3 lg:p-6;
-}
-.markdown-body.green strong::before {
-  content: "『";
-}
-.markdown-body.green strong::after {
-  content: "』";
-}
-.markdown-body.green {
-  /* 块/段落引用 */
-}
-.markdown-body.green blockquote {
-  position: relative;
-  z-index: 600;
-  padding: 20px 20px 15px 20px;
-  line-height: 1.4 !important;
-  background-color: rgba(239, 68, 68, 0.06);
-  border-radius: 0.4em;
-}
-.markdown-body.green blockquote > * {
-  position: relative;
-}
-.markdown-body.green blockquote > *:first-child:before {
-  content: "“";
-  color: var(--color-light);
-  font-size: 6.5em;
-  font-weight: 700;
-  transform: rotate(15deg) translateX(-10px);
-  opacity: 1;
-  position: absolute;
-  top: -0.4em;
-  left: -0.2em;
-  text-shadow: none;
-  z-index: -10;
-}
-.markdown-body.green .tabs {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-.markdown-body.green {
-  /* 让链接在 hover 状态下显示下划线 */
-}
-.markdown-body.green a {
-  position: relative;
-  z-index: 10;
-  transition: color 0.3s linear;
-  cursor: pointer;
-  font-weight: bolder;
-  text-decoration: none;
-  color: var(--color-base);
-  border-bottom: 1px solid currentColor;
-  padding: 0 4px;
-}
-.markdown-body.green a[data-footnote-backref], .markdown-body.green a[data-footnote-ref] {
-  border: none;
-}
-.markdown-body.green a[data-footnote-backref]:hover, .markdown-body.green a[data-footnote-ref]:hover {
-  background: none;
-  animation: none;
-}
-.markdown-body.green a:hover {
-  content: "";
-  border: none;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
-  background-size: 20px auto;
-  animation: waveMove 1s infinite linear;
-}
-@keyframes waveMove {
-  0% {
-    background-position: 0 100%;
-  }
-  100% {
-    background-position: -20px 100%;
-  }
-}
-.markdown-body.green pre {
-  background: var(--prism-background);
-  font-size: var(--prism-font-size);
-  display: block;
-  -webkit-overflow-scrolling: touch;
-}
-.markdown-body.green pre,
-.markdown-body.green pre code {
-  font-family: var(--prism-font-family);
-}
-.markdown-body.green small,
-.markdown-body.green figcaption {
-  font-size: 0.75em;
-  color: #888;
-}
-.markdown-body.green legend {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green caption {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green del {
-  text-decoration: line-through var(--color-base) 2px;
-}
-.markdown-body.green code {
-  color: rgb(45, 55, 72);
-  background-color: rgba(160, 174, 192, 0.25);
-  font-family: inherit;
-  font-size: 1em;
-  border-radius: 4px;
-  padding: 1px 6px;
-  margin: 0 2px;
-  vertical-align: bottom;
-}
-.markdown-body.green pre code {
-  padding: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  white-space: pre;
-  background-color: transparent;
-  vertical-align: baseline;
-  border-radius: 0;
-  margin: 0;
-}
-.markdown-body.green table {
-  width: 100%;
-  display: table;
-  border: 1px solid var(--color-light);
-}
-.markdown-body.green table tr:hover {
-  background: var(--color-light);
-}
-.markdown-body.green table:hover {
-  border: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover th {
-  border-right: 1px solid var(--color-extra);
-  background: var(--color-extra);
-  border-bottom: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover td {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover caption {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green table th {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  background: var(--color-light);
-  border-bottom: 1px solid var(--color-light);
-}
-.markdown-body.green table td {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-}
-.markdown-body.green table caption {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  border-bottom: none;
-}
-.markdown-body.green table thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green h1,
-.markdown-body.green h2,
-.markdown-body.green h3,
-.markdown-body.green h4,
-.markdown-body.green h5,
-.markdown-body.green h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.6em;
-  line-height: 1.35;
-  position: relative;
-}
-.markdown-body.green h1 {
-  font-size: 1.8em;
-}
-.markdown-body.green h2 {
-  font-size: 1.6em;
-}
-.markdown-body.green h3 {
-  font-size: 1.4em;
-}
-.markdown-body.green h4 {
-  font-size: 1.2em;
-}
-.markdown-body.green h5 {
-  font-size: 1em;
-}
-.markdown-body.green h6 {
-  font-size: 1em;
-}
-.markdown-body.green ::-webkit-calendar-picker-indicator {
-  filter: invert(50%);
-}
-.markdown-body.green em {
-  font-weight: inherit;
-  position: relative;
-}
-.markdown-body.green em:after {
-  position: absolute;
-  top: 0.65em;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  pointer-events: none;
-  color: var(--color-base);
-  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
-}
-.markdown-body.green ul.toc li {
-  list-style-type: none;
-}
-.markdown-body.green ul.toc li a {
-  text-decoration: none;
-  border: 0;
-  list-style-type: none;
-}
-.markdown-body.green.chinese {
-  text-indent: 1.5em;
-  font-weight: 300;
-}
-.markdown-body.green.chinese h1,
-.markdown-body.green.chinese h2,
-.markdown-body.green.chinese h3,
-.markdown-body.green.chinese h4,
-.markdown-body.green.chinese h5,
-.markdown-body.green.chinese h6,
-.markdown-body.green.chinese ol,
-.markdown-body.green.chinese ul,
-.markdown-body.green.chinese blockquote,
-.markdown-body.green.chinese details,
-.markdown-body.green.chinese summary,
-.markdown-body.green.chinese pre,
-.markdown-body.green.chinese .tabs {
-  text-indent: 0;
-}
\ No newline at end of file
diff --git a/public/scss-compiler/page/index/style.css b/public/scss-compiler/page/index/style.css
deleted file mode 100644
index 403ce31..0000000
--- a/public/scss-compiler/page/index/style.css
+++ /dev/null
@@ -1,1188 +0,0 @@
-@charset "UTF-8";
-/* 首页样式 */
-.hero-section {
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/hero-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.1;
-  z-index: 0;
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-}
-
-.feature-card {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-  transform: translateY(-5px);
-}
-
-.feature-card .material-symbols-light--article,
-.feature-card .material-symbols-light--bookmark,
-.feature-card .material-symbols-light--person {
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover .material-symbols-light--article,
-.feature-card:hover .material-symbols-light--bookmark,
-.feature-card:hover .material-symbols-light--person {
-  transform: scale(1.1);
-}
-
-.stats-section {
-  position: relative;
-}
-
-.stats-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/stats-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.05;
-  z-index: 0;
-}
-
-.stat-item {
-  transition: all 0.3s ease;
-}
-
-.stat-item:hover {
-  transform: scale(1.05);
-}
-
-.user-dashboard {
-  position: relative;
-}
-
-.user-dashboard::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("/images/dashboard-bg.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 0.03;
-  z-index: 0;
-}
-
-.avatar {
-  transition: all 0.3s ease;
-}
-
-.avatar:hover {
-  transform: scale(1.05);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 4rem 0;
-  }
-  .hero-content h1 {
-    font-size: 2.5rem;
-  }
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-  .user-info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-  .user-actions {
-    justify-content: center;
-  }
-}
-@media (max-width: 480px) {
-  .hero-content h1 {
-    font-size: 2rem;
-  }
-  .hero-content p {
-    font-size: 1rem;
-  }
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  .hero-actions {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  .hero-actions a {
-    width: 100%;
-    text-align: center;
-  }
-}
-/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
-@media (prefers-color-scheme: dark) {
-  .markdown-body {
-    /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: dark;
-  }
-}
-/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
-@media (prefers-color-scheme: light) {
-  .markdown-body {
-    /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
-    color-scheme: light;
-    /* 定义CSS自定义属性，用于主题色彩管理 */
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
-    --color-fg-subtle: #6e7781;
-    --color-canvas-default: #ffffff;
-    --color-canvas-subtle: #f6f8fa;
-    --color-border-default: #d0d7de;
-    --color-border-muted: hsla(210, 18%, 87%, 1);
-    --color-neutral-muted: rgba(175, 184, 193, 0.2);
-    --color-accent-fg: #0969da;
-    --color-accent-emphasis: #0969da;
-    --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
-    --color-mark-default: rgb(255, 255, 0);
-    --color-mark-fg: rgb(255, 187, 0);
-  }
-}
-/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
-.markdown-body {
-  /* 防止iOS Safari自动调整文本大小 */
-  -webkit-text-size-adjust: 100%;
-  /* 防止IE自动调整文本大小 */
-  -ms-text-size-adjust: 100%;
-  /* 优化文本渲染质量，提升可读性 */
-  text-rendering: optimizelegibility;
-  /* 重置外边距为0 */
-  margin: 0;
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 使用CSS变量设置文本颜色 */
-  color: var(--color-fg-muted);
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body > *:first-child {
-  /* 强制移除顶部外边距，避免不必要的空白 */
-  margin-top: 0 !important;
-}
-.markdown-body {
-  /* 最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body > *:last-child {
-  /* 强制移除底部外边距，避免不必要的空白 */
-  margin-bottom: 0 !important;
-}
-.markdown-body {
-  /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
-}
-.markdown-body p,
-.markdown-body blockquote,
-.markdown-body ul,
-.markdown-body ol,
-.markdown-body dl,
-.markdown-body table,
-.markdown-body hr,
-.markdown-body form,
-.markdown-body pre,
-.markdown-body details {
-  /* 移除顶部外边距，避免重复间距 */
-  margin-top: 0;
-  /* 设置底部外边距为1em，保持适当间距 */
-  margin-bottom: 1em;
-}
-.markdown-body {
-  /* 引用块内部元素间距处理 */
-}
-.markdown-body blockquote {
-  /* 引用块内第一个子元素 - 移除顶部外边距 */
-}
-.markdown-body blockquote > :first-child {
-  margin-top: 0;
-}
-.markdown-body blockquote {
-  /* 引用块内最后一个子元素 - 移除底部外边距 */
-}
-.markdown-body blockquote > :last-child {
-  margin-bottom: 0;
-}
-.markdown-body {
-  /* 统一显示成块状元素 - 确保这些元素独占一行 */
-}
-.markdown-body details,
-.markdown-body figcaption,
-.markdown-body figure {
-  /* 设置为块级元素，独占一行显示 */
-  display: block;
-}
-.markdown-body {
-  /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
-}
-.markdown-body audio,
-.markdown-body canvas,
-.markdown-body video {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-}
-.markdown-body {
-  /* 按钮内部间距统一 - 移除Firefox默认内边距 */
-}
-.markdown-body button::-moz-focus-inner,
-.markdown-body input::-moz-focus-inner {
-  /* 移除Firefox浏览器按钮和输入框的内部内边距 */
-  padding: 0;
-  /* 移除Firefox浏览器按钮和输入框的内部边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 定义元素显示为斜体 - 术语定义样式 */
-}
-.markdown-body dfn {
-  /* 设置字体为斜体，用于术语定义 */
-  font-style: italic;
-}
-.markdown-body {
-  /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
-}
-.markdown-body table {
-  /* 合并表格边框，相邻单元格边框合并为一条 */
-  border-collapse: collapse;
-  /* 设置表格单元格间距为0 */
-  border-spacing: 0;
-  /* 设置为块级元素，可以设置宽高 */
-  display: block;
-  /* 宽度根据内容自适应 */
-  width: max-content;
-  /* 最大宽度不超过父容器 */
-  max-width: 100%;
-  /* 内容溢出时显示滚动条 */
-  overflow: auto;
-}
-.markdown-body {
-  /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
-}
-.markdown-body [draggable] {
-  /* 设置鼠标悬停时显示移动光标 */
-  cursor: move;
-}
-.markdown-body {
-  /* 加粗元素 - 粗体文本样式 */
-}
-.markdown-body b,
-.markdown-body strong {
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-}
-.markdown-body {
-  /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
-}
-.markdown-body abbr,
-.markdown-body acronym {
-  /* 移除底部边框 */
-  border-bottom: none;
-  /* 设置字体变体为正常 */
-  font-variant: normal;
-  /* 设置虚线下划线装饰 */
-  text-decoration: underline dotted;
-}
-.markdown-body {
-  /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
-}
-.markdown-body abbr {
-  /* 设置鼠标悬停时显示帮助光标 */
-  cursor: help;
-}
-.markdown-body {
-  /* 一致的 del 样式 - 删除线文本样式 */
-}
-.markdown-body del {
-  /* 设置文本装饰为删除线 */
-  text-decoration: line-through;
-}
-.markdown-body {
-  /* a标签去除下划线 - 链接样式处理 */
-}
-.markdown-body a {
-  /* 默认移除下划线，保持页面简洁 */
-  text-decoration: none;
-  /* 没有href属性的链接样式 */
-}
-.markdown-body a:not([href]) {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 移除下划线装饰 */
-  text-decoration: none;
-}
-.markdown-body a {
-  /* 鼠标悬停时显示下划线 */
-}
-.markdown-body a:hover {
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
-}
-.markdown-body ins {
-  /* 移除下划线装饰，保持页面简洁 */
-  text-decoration: none;
-}
-.markdown-body {
-  /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
-  * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
-  * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
-  * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
-  * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
-  */
-}
-.markdown-body u,
-.markdown-body .typo-u {
-  /* 设置文本装饰为下划线，用于专名号显示 */
-  text-decoration: underline;
-}
-.markdown-body {
-  /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
-}
-.markdown-body [hidden] {
-  /* 强制隐藏元素，优先级最高 */
-  display: none !important;
-}
-.markdown-body {
-  /* 伸缩框显示为列表元素 - 详情框摘要样式 */
-}
-.markdown-body summary {
-  /* 设置为列表项显示，显示为可点击的列表项 */
-  display: list-item;
-}
-.markdown-body {
-  /* 引用元素前后内容 - 移除默认引号 */
-}
-.markdown-body q:before,
-.markdown-body q:after {
-  /* 移除引用元素前后的默认引号内容 */
-  content: "";
-}
-.markdown-body {
-  /* 表格标题和表头文本对齐 - 默认左对齐 */
-}
-.markdown-body caption,
-.markdown-body th {
-  /* 设置文本左对齐 */
-  text-align: left;
-}
-.markdown-body {
-  /* 居中对齐的表格标题和表头 */
-}
-.markdown-body caption[align=center],
-.markdown-body th[align=center] {
-  /* 设置文本居中对齐 */
-  text-align: center;
-}
-.markdown-body {
-  /* 特定元素字体粗细统一 - 地址、标题、引用等 */
-}
-.markdown-body address,
-.markdown-body caption,
-.markdown-body cite,
-.markdown-body em,
-.markdown-body th,
-.markdown-body var {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body {
-  /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
-}
-.markdown-body mark {
-  /* 设置标记背景色，使用CSS变量 */
-  background: var(--color-mark-default);
-  /* 设置内边距，增加标记的可读性 */
-  padding: 2px;
-  /* 激活状态的标记样式 */
-}
-.markdown-body mark.active {
-  /* 激活时使用强调色背景 */
-  background: var(--color-mark-fg);
-}
-.markdown-body {
-  /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
-}
-.markdown-body h1 {
-  /* 设置上下外边距为0.67em */
-  margin: 0.67em 0;
-  /* 设置字体粗细，使用CSS变量或默认600 */
-  font-weight: var(--base-text-weight-semibold, 600);
-  /* 设置字体大小为2倍基础大小 */
-  font-size: 2em;
-}
-.markdown-body {
-  /* small字体缩小 - 小字体文本样式 */
-}
-.markdown-body small {
-  /* 设置字体大小为父元素的90% */
-  font-size: 90%;
-}
-.markdown-body {
-  /* 上下标显示 - 下标和上标文本样式 */
-}
-.markdown-body sub,
-.markdown-body sup {
-  /* 设置字体大小为75% */
-  font-size: 75%;
-  /* 设置行高为0，避免影响行间距 */
-  line-height: 0;
-  /* 设置相对定位，用于精确控制位置 */
-  position: relative;
-  /* 设置垂直对齐为基线 */
-  vertical-align: baseline;
-}
-.markdown-body {
-  /* 上下标内链接样式 */
-}
-.markdown-body sub a,
-.markdown-body sup a {
-  /* 设置左右内边距为0.1em */
-  padding: 0 0.1em;
-}
-.markdown-body {
-  /* 下标位置调整 */
-}
-.markdown-body sub {
-  /* 向下偏移0.25em */
-  bottom: -0.25em;
-}
-.markdown-body {
-  /* 上标位置调整 */
-}
-.markdown-body sup {
-  /* 向上偏移0.5em */
-  top: -0.5em;
-}
-.markdown-body {
-  /* 代码相关的字体大小统一 - 代码元素字体样式 */
-}
-.markdown-body code,
-.markdown-body kbd,
-.markdown-body pre,
-.markdown-body samp,
-.markdown-body pre tt {
-  /* 设置字体为等宽字体，便于代码阅读 */
-  font-family: monospace;
-  /* 设置字体大小为1em，保持一致性 */
-  font-size: 1em;
-}
-.markdown-body {
-  /* 去除默认边框 - 移除字段集和图片的默认边框 */
-}
-.markdown-body fieldset,
-.markdown-body img {
-  /* 移除边框 */
-  border: 0;
-}
-.markdown-body {
-  /* 图片初始化样式 - 图片元素基础样式 */
-}
-.markdown-body img {
-  /* 设置边框样式为无 */
-  border-style: none;
-  /* 设置最大宽度为100%，防止溢出 */
-  max-width: 100%;
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 设置左右外边距为自动，实现居中 */
-  margin: 0 auto;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-default);
-}
-.markdown-body {
-  /* 可附标题内容元素的间距 - 图片容器样式 */
-}
-.markdown-body figure {
-  /* 设置上下外边距为1em，左右外边距为40px */
-  margin: 1em 40px;
-}
-.markdown-body {
-  /* 间隔线 - 水平分隔线样式 */
-  /* 一致化 horizontal rule - 统一水平分隔线样式 */
-}
-.markdown-body hr {
-  /* 设置盒模型为内容盒模型 */
-  box-sizing: content-box;
-  /* 隐藏溢出内容 */
-  overflow: hidden;
-  /* 设置背景为透明 */
-  background: transparent;
-  /* 设置底部边框，使用CSS变量 */
-  border-bottom: 1px solid var(--color-border-muted);
-  /* 设置高度为0.25em */
-  height: 0.25em;
-  /* 移除内边距 */
-  padding: 0;
-  /* 设置上下外边距为24px */
-  margin: 24px 0;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-border-default);
-  /* 移除边框 */
-  border: 0;
-  /* 伪元素before - 用于清除浮动 */
-}
-.markdown-body hr::before {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body hr {
-  /* 伪元素after - 用于清除浮动 */
-}
-.markdown-body hr::after {
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-  /* 清除左右浮动 */
-  clear: both;
-  /* 空内容，仅用于布局 */
-  content: "";
-}
-.markdown-body {
-  /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
-}
-.markdown-body button,
-.markdown-body input,
-.markdown-body select,
-.markdown-body textarea {
-  /* 继承父元素的字体样式 */
-  font: inherit;
-  /* 移除外边距 */
-  margin: 0;
-  /* 设置溢出为可见 */
-  overflow: visible;
-  /* 继承父元素的字体族 */
-  font-family: inherit;
-  /* 继承父元素的字体大小 */
-  font-size: inherit;
-  /* 继承父元素的行高 */
-  line-height: inherit;
-}
-.markdown-body {
-  /* 外观显示为按钮 - 按钮类型输入框样式 */
-}
-.markdown-body [type=button],
-.markdown-body [type=reset],
-.markdown-body [type=submit] {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 设置标准按钮外观，提高兼容性 */
-  appearance: button;
-}
-.markdown-body {
-  /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
-}
-.markdown-body [type=checkbox],
-.markdown-body [type=radio] {
-  /* 设置盒模型为边框盒模型 */
-  box-sizing: border-box;
-  /* 移除内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
-}
-.markdown-body [type=number]::-webkit-inner-spin-button,
-.markdown-body [type=number]::-webkit-outer-spin-button {
-  /* 设置高度为自动，适应内容 */
-  height: auto;
-}
-.markdown-body {
-  /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
-}
-.markdown-body [type=search]::-webkit-search-cancel-button,
-.markdown-body [type=search]::-webkit-search-decoration {
-  /* 移除WebKit浏览器搜索框默认样式 */
-  -webkit-appearance: none;
-}
-.markdown-body {
-  /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
-}
-.markdown-body ::-webkit-input-placeholder {
-  /* 继承父元素颜色 */
-  color: inherit;
-  /* 设置透明度为0.54，创建半透明效果 */
-  opacity: 0.54;
-}
-.markdown-body {
-  /* 文件选择按钮样式统一 - 文件上传按钮样式 */
-}
-.markdown-body ::-webkit-file-upload-button {
-  /* 设置WebKit浏览器按钮外观 */
-  -webkit-appearance: button;
-  /* 继承父元素字体样式 */
-  font: inherit;
-}
-.markdown-body {
-  /* 占位符显示统一 - 通用占位符样式 */
-}
-.markdown-body ::placeholder {
-  /* 设置占位符颜色，使用CSS变量 */
-  color: var(--color-fg-subtle);
-  /* 设置完全不透明 */
-  opacity: 1;
-}
-.markdown-body {
-  /* table内的td,th去除留白 - 表格单元格样式 */
-}
-.markdown-body td,
-.markdown-body th {
-  /* 移除表格单元格内边距 */
-  padding: 0;
-}
-.markdown-body {
-  /* 伸缩框鼠标显示 - 详情框摘要样式 */
-}
-.markdown-body details summary {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
-}
-.markdown-body details:not([open]) > *:not(summary) {
-  /* 强制隐藏未展开详情框内的非摘要内容 */
-  display: none !important;
-}
-.markdown-body {
-  /* 按键显示 - 键盘按键样式 */
-}
-.markdown-body kbd {
-  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-  display: inline-block;
-  /* 设置内边距为3px上下，5px左右 */
-  padding: 3px 5px;
-  /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
-  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-  /* 设置行高为10px */
-  line-height: 10px;
-  /* 设置文本颜色，使用CSS变量 */
-  color: var(--color-fg-default);
-  /* 设置垂直对齐为中间 */
-  vertical-align: middle;
-  /* 设置背景色，使用CSS变量 */
-  background-color: var(--color-canvas-subtle);
-  /* 设置边框为1px实线，使用CSS变量 */
-  border: solid 1px var(--color-neutral-muted);
-  /* 设置底部边框颜色，使用CSS变量 */
-  border-bottom-color: var(--color-neutral-muted);
-  /* 设置圆角为6px */
-  border-radius: 6px;
-  /* 设置内阴影，创建按键凹陷效果 */
-  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
-}
-.markdown-body {
-  /* 清除浮动工具类 - 清除浮动伪元素 */
-}
-.markdown-body .clearfix:before,
-.markdown-body .clearfix:after {
-  /* 空内容，仅用于布局 */
-  content: "";
-  /* 设置为表格显示模式，用于清除浮动 */
-  display: table;
-}
-.markdown-body {
-  /* 清除浮动工具类 - after伪元素 */
-}
-.markdown-body .clearfix:after {
-  /* 清除左右浮动 */
-  clear: both;
-}
-.markdown-body {
-  /* 清除浮动工具类 - 主容器 */
-}
-.markdown-body .clearfix {
-  /* 触发IE的hasLayout属性，用于清除浮动 */
-  zoom: 1;
-}
-.markdown-body {
-  /* 强制文本换行 - 文本换行工具类 */
-}
-.markdown-body .textwrap,
-.markdown-body .textwrap td,
-.markdown-body .textwrap th {
-  /* 允许长单词在必要时换行，防止溢出 */
-  word-wrap: break-word;
-  /* 强制在任意字符间换行，防止溢出 */
-  word-break: break-all;
-}
-.markdown-body {
-  /* 文本换行表格 - 固定表格布局 */
-}
-.markdown-body .textwrap-table {
-  /* 设置表格布局为固定，提高渲染性能 */
-  table-layout: fixed;
-}
-.markdown-body {
-  /* 无序列表样式 - 项目符号列表 */
-}
-.markdown-body ul {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为实心圆点 */
-  list-style: disc;
-}
-.markdown-body {
-  /* 有序列表样式 - 数字列表 */
-}
-.markdown-body ol {
-  /* 重置左边距为0 */
-  margin-left: 0;
-  /* 重置左内边距为0 */
-  padding-left: 0;
-  /* 设置左边距为2em，创建缩进效果 */
-  margin-left: 2em;
-  /* 设置列表样式为数字 */
-  list-style: decimal;
-  /* 列表项样式 */
-}
-.markdown-body ol li {
-  /* 设置左内边距为0.4em，增加数字与文本间距 */
-  padding-left: 0.4em;
-}
-.markdown-body {
-  /* 相邻列表项间距 - 列表项之间的间距 */
-}
-.markdown-body li + li {
-  /* 设置顶部外边距为0.25em，增加列表项间距 */
-  margin-top: 0.25em;
-}
-.markdown-body {
-  /* 嵌套列表样式 - 列表项内的子列表 */
-}
-.markdown-body li {
-  /* 无序子列表样式 */
-}
-.markdown-body li ul {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-  /* 设置列表样式为空心圆点 */
-  list-style: circle;
-  /* 三级无序列表样式 */
-}
-.markdown-body li ul li ul {
-  /* 设置列表样式为实心方块 */
-  list-style: square;
-}
-.markdown-body li {
-  /* 有序子列表样式 */
-}
-.markdown-body li ol {
-  /* 设置底部外边距为0.8em */
-  margin-bottom: 0.8em;
-  /* 设置左边距为2em，创建嵌套缩进 */
-  margin-left: 2em;
-}
-.markdown-body {
-  /* 任务列表项样式 - 待办事项列表项 */
-}
-.markdown-body .task-list-item {
-  /* 移除列表样式，不显示项目符号 */
-  list-style-type: none;
-  /* 设置相对定位，用于绝对定位子元素 */
-  position: relative;
-  /* 第一个子输入框样式 */
-}
-.markdown-body .task-list-item > input {
-  /* 第一个子元素右边距 */
-}
-.markdown-body .task-list-item > input:nth-child(1) {
-  /* 设置右边距为6px */
-  margin-right: 6px;
-}
-.markdown-body .task-list-item {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item label {
-  /* 设置字体粗细为正常（400） */
-  font-weight: 400;
-}
-.markdown-body .task-list-item {
-  /* 拖拽手柄样式 */
-}
-.markdown-body .task-list-item .handle {
-  /* 隐藏拖拽手柄 */
-  display: none;
-}
-.markdown-body .task-list-item {
-  /* 复选框样式 */
-}
-.markdown-body .task-list-item input[type=checkbox] {
-  /* 设置宽度为0.9em */
-  width: 0.9em;
-  /* 设置高度为0.9em */
-  height: 0.9em;
-  /* 设置绝对定位 */
-  position: absolute;
-  /* 向左偏移1.3em */
-  left: -1.3em;
-  /* 向下偏移0.35em */
-  top: 0.35em;
-}
-.markdown-body {
-  /* 启用的任务列表项样式 */
-}
-.markdown-body .task-list-item.enabled {
-  /* 标签样式 */
-}
-.markdown-body .task-list-item.enabled label {
-  /* 设置鼠标悬停时显示手型光标 */
-  cursor: pointer;
-}
-.markdown-body {
-  /* 相邻任务列表项间距 */
-}
-.markdown-body .task-list-item + .task-list-item {
-  /* 设置顶部外边距为3px */
-  margin-top: 3px;
-}
-.markdown-body {
-  /* 包含任务列表的容器样式 */
-}
-.markdown-body .contains-task-list {
-  /* 从右到左文本方向样式 */
-}
-.markdown-body .contains-task-list:dir(rtl) .task-list-item input[type=checkbox] {
-  /* 设置复选框外边距，适配RTL布局 */
-  margin: 0 -1.6em 0.25em 0.2em;
-}
-.markdown-body {
-  /* 目录样式 - 表格目录容器 */
-}
-.markdown-body .toc {
-  /* 重置左边距为0 */
-  margin-left: 0;
-}
-.markdown-body {
-  /* 定义列表样式 - 描述列表容器 */
-}
-.markdown-body dl {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置块级起始外边距为1em */
-  margin-block-start: 1em;
-  /* 设置块级结束外边距为1em */
-  margin-block-end: 1em;
-  /* 设置内联起始外边距为0px */
-  margin-inline-start: 0px;
-  /* 设置内联结束外边距为0px */
-  margin-inline-end: 0px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-  /* 定义术语样式 */
-}
-.markdown-body dl dt {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-.markdown-body dl {
-  /* 定义描述样式 */
-}
-.markdown-body dl dd {
-  /* 设置为块级元素 */
-  display: block;
-  /* 设置内联起始外边距为40px，创建缩进效果 */
-  margin-inline-start: 40px;
-  /* 设置Unicode双向算法为隔离 */
-  unicode-bidi: isolate;
-}
-
-.markdown-body {
-  --color-base: #ef4444;
-  --markdown-bg: white;
-  --color-bg: #ff47479c;
-  --color-light: #ef44441a;
-  --color-extra: rgba(239, 68, 68, 0.3);
-  --color-more: rgba(239, 68, 68, 0.4);
-}
-
-.markdown-body.green {
-  background-color: var(--markdown-bg);
-  @apply p-3 lg:p-6;
-}
-.markdown-body.green strong::before {
-  content: "『";
-}
-.markdown-body.green strong::after {
-  content: "』";
-}
-.markdown-body.green {
-  /* 块/段落引用 */
-}
-.markdown-body.green blockquote {
-  position: relative;
-  z-index: 600;
-  padding: 20px 20px 15px 20px;
-  line-height: 1.4 !important;
-  background-color: rgba(239, 68, 68, 0.06);
-  border-radius: 0.4em;
-}
-.markdown-body.green blockquote > * {
-  position: relative;
-}
-.markdown-body.green blockquote > *:first-child:before {
-  content: "“";
-  color: var(--color-light);
-  font-size: 6.5em;
-  font-weight: 700;
-  transform: rotate(15deg) translateX(-10px);
-  opacity: 1;
-  position: absolute;
-  top: -0.4em;
-  left: -0.2em;
-  text-shadow: none;
-  z-index: -10;
-}
-.markdown-body.green .tabs {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-.markdown-body.green {
-  /* 让链接在 hover 状态下显示下划线 */
-}
-.markdown-body.green a {
-  position: relative;
-  z-index: 10;
-  transition: color 0.3s linear;
-  cursor: pointer;
-  font-weight: bolder;
-  text-decoration: none;
-  color: var(--color-base);
-  border-bottom: 1px solid currentColor;
-  padding: 0 4px;
-}
-.markdown-body.green a[data-footnote-backref], .markdown-body.green a[data-footnote-ref] {
-  border: none;
-}
-.markdown-body.green a[data-footnote-backref]:hover, .markdown-body.green a[data-footnote-ref]:hover {
-  background: none;
-  animation: none;
-}
-.markdown-body.green a:hover {
-  content: "";
-  border: none;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
-  background-size: 20px auto;
-  animation: waveMove 1s infinite linear;
-}
-@keyframes waveMove {
-  0% {
-    background-position: 0 100%;
-  }
-  100% {
-    background-position: -20px 100%;
-  }
-}
-.markdown-body.green pre {
-  background: var(--prism-background);
-  font-size: var(--prism-font-size);
-  display: block;
-  -webkit-overflow-scrolling: touch;
-}
-.markdown-body.green pre,
-.markdown-body.green pre code {
-  font-family: var(--prism-font-family);
-}
-.markdown-body.green small,
-.markdown-body.green figcaption {
-  font-size: 0.75em;
-  color: #888;
-}
-.markdown-body.green legend {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green caption {
-  color: #000;
-  font-weight: inherit;
-}
-.markdown-body.green del {
-  text-decoration: line-through var(--color-base) 2px;
-}
-.markdown-body.green code {
-  color: rgb(45, 55, 72);
-  background-color: rgba(160, 174, 192, 0.25);
-  font-family: inherit;
-  font-size: 1em;
-  border-radius: 4px;
-  padding: 1px 6px;
-  margin: 0 2px;
-  vertical-align: bottom;
-}
-.markdown-body.green pre code {
-  padding: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  white-space: pre;
-  background-color: transparent;
-  vertical-align: baseline;
-  border-radius: 0;
-  margin: 0;
-}
-.markdown-body.green table {
-  width: 100%;
-  display: table;
-  border: 1px solid var(--color-light);
-}
-.markdown-body.green table tr:hover {
-  background: var(--color-light);
-}
-.markdown-body.green table:hover {
-  border: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover th {
-  border-right: 1px solid var(--color-extra);
-  background: var(--color-extra);
-  border-bottom: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover td {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover caption {
-  border-right: 1px solid var(--color-extra);
-}
-.markdown-body.green table:hover thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green table th {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  background: var(--color-light);
-  border-bottom: 1px solid var(--color-light);
-}
-.markdown-body.green table td {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-}
-.markdown-body.green table caption {
-  border-right: 1px solid var(--color-light);
-  padding: 0.5em 1em;
-  border-bottom: none;
-}
-.markdown-body.green table thead th {
-  background: var(--color-extra);
-}
-.markdown-body.green h1,
-.markdown-body.green h2,
-.markdown-body.green h3,
-.markdown-body.green h4,
-.markdown-body.green h5,
-.markdown-body.green h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.6em;
-  line-height: 1.35;
-  position: relative;
-}
-.markdown-body.green h1 {
-  font-size: 1.8em;
-}
-.markdown-body.green h2 {
-  font-size: 1.6em;
-}
-.markdown-body.green h3 {
-  font-size: 1.4em;
-}
-.markdown-body.green h4 {
-  font-size: 1.2em;
-}
-.markdown-body.green h5 {
-  font-size: 1em;
-}
-.markdown-body.green h6 {
-  font-size: 1em;
-}
-.markdown-body.green ::-webkit-calendar-picker-indicator {
-  filter: invert(50%);
-}
-.markdown-body.green em {
-  font-weight: inherit;
-  position: relative;
-}
-.markdown-body.green em:after {
-  position: absolute;
-  top: 0.65em;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  pointer-events: none;
-  color: var(--color-base);
-  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
-}
-.markdown-body.green ul.toc li {
-  list-style-type: none;
-}
-.markdown-body.green ul.toc li a {
-  text-decoration: none;
-  border: 0;
-  list-style-type: none;
-}
-.markdown-body.green.chinese {
-  text-indent: 1.5em;
-  font-weight: 300;
-}
-.markdown-body.green.chinese h1,
-.markdown-body.green.chinese h2,
-.markdown-body.green.chinese h3,
-.markdown-body.green.chinese h4,
-.markdown-body.green.chinese h5,
-.markdown-body.green.chinese h6,
-.markdown-body.green.chinese ol,
-.markdown-body.green.chinese ul,
-.markdown-body.green.chinese blockquote,
-.markdown-body.green.chinese details,
-.markdown-body.green.chinese summary,
-.markdown-body.green.chinese pre,
-.markdown-body.green.chinese .tabs {
-  text-indent: 0;
-}
\ No newline at end of file
diff --git a/src/controllers/Api/AuthController.js b/src/controllers/Api/AuthController.js
new file mode 100644
index 0000000..a4c61fd
--- /dev/null
+++ b/src/controllers/Api/AuthController.js
@@ -0,0 +1,25 @@
+import { R } from "utils/helper.js"
+import Router from "utils/router.js"
+import BaseController from "@/base/BaseController.js"
+
+class AuthController extends BaseController {
+    constructor() {
+        super()
+    }
+
+    async loginPost(ctx) {
+        return this.success(ctx, null, "登录成功")
+    }
+
+    /**
+     * 路由注册
+     */
+    static createRoutes() {
+        const controller = new AuthController()
+        const router = new Router({ prefix: "/api/auth", auth: "try" })
+        router.post("/login", controller.handleRequest(controller.loginPost))
+        return router
+    }
+}
+
+export default AuthController
diff --git a/src/controllers/Page/AuthController.js b/src/controllers/Page/AuthController.js
new file mode 100644
index 0000000..4287a5d
--- /dev/null
+++ b/src/controllers/Page/AuthController.js
@@ -0,0 +1,35 @@
+import Router from "utils/router.js"
+import { logger } from "@/logger.js"
+import BaseController from "@/base/BaseController.js"
+
+export default class AuthController extends BaseController {
+    constructor() {
+        super()
+    }
+
+    // 首页
+    async loginGet(ctx) {
+        return this.render(ctx, "page/login/index", {})
+    }
+
+    async loginPost(ctx) {
+        console.log(ctx.request.body);
+        return this.success(ctx, null, "登录成功")
+    }
+
+    /**
+     * 创建基础页面相关路由
+     * @returns {Router} 路由实例
+     */
+    static createRoutes() {
+        const controller = new AuthController()
+        const router = new Router({ auth: false })
+
+        // 首页
+        router.get("", controller.handleRequest(controller.loginGet))
+        router.get("/login", controller.handleRequest(controller.loginGet))
+        router.post("/login", controller.handleRequest(controller.loginPost))
+
+        return router
+    }
+}
diff --git a/src/middlewares/install.js b/src/middlewares/install.js
index 24ac31f..b302e8e 100644
--- a/src/middlewares/install.js
+++ b/src/middlewares/install.js
@@ -105,32 +105,17 @@ export default async app => {
             options: {
                 basedir: resolve(__dirname, "../views"),
                 filters: {
-                    "my-own-filter": function (text, options) {
-                        if (options.addStart) text = "Start\n" + text
-                        if (options.addEnd) text = text + "\nEnd"
-                        return text
-                    },
                     scss: function (text, options) {
                         //- process.env.SASS_PATH = "D:/@code/demo/koa3-demo/src/views/page/index"
                         const root = path.resolve(__dirname, "../views")
                         const publicPath = path.resolve(__dirname, "../../public")
                         const publicScssPath = path.resolve(publicPath, "scss-compiler")
-                        const result = render(text, {
+                        const globalScss = `@import "_scss/global";`
+                        const result = render(globalScss + "\n" + text, {
                             ...options,
                             includePaths: [...(options.includePaths || []), path.resolve(__dirname, "../views")],
                         })
-                        const links = []
-                        // result.dependencies.forEach(file => {
-                        //     const scssFile = path.resolve(publicScssPath, path.relative(root, file))
-                        //     const cssFile = scssFile.replace(path.extname(scssFile), ".css")
-                        //     if (!fs.existsSync(scssFile)) {
-                        //         fs.mkdirSync(path.parse(scssFile).dir, { recursive: true })
-                        //     }
-                        //     fs.writeFileSync(cssFile, result.body)
-                        //     links.push(cssFile)
-                        // })
-                        return `${links.map(v=>`<link rel="stylesheet" href="${config.base + path.relative(publicPath, v).replaceAll("\\", "/")}">`).join("\n")}
-                        <style>${result.body}</style>`
+                        return `<style>${result.body}</style>`
                     },
                 },
             },
@@ -153,6 +138,7 @@ export default async app => {
         })
     )
     // 验证用户
+    // 注入全局变量：ctx.state.user
     app.use(VerifyUserMiddleware())
     // 请求体解析
     app.use(bodyParser())
diff --git a/src/services/AuthService.js b/src/services/AuthService.js
new file mode 100644
index 0000000..f528411
--- /dev/null
+++ b/src/services/AuthService.js
@@ -0,0 +1,84 @@
+import UserModel from "../db/models/UserModel.js"
+import CommonError from "utils/error/CommonError.js"
+import { comparePassword } from "utils/bcrypt.js"
+
+/**
+ * 认证服务类
+ * 提供认证相关的业务逻辑
+ */
+class AuthService {
+    // 注册新用户
+    static async register(data) {
+        try {
+            if (!data.username || !data.password) {
+                throw new CommonError("用户名和密码不能为空")
+            }
+
+            // 检查用户名是否已存在
+            const existUser = await UserModel.findByUsername(data.username)
+            if (existUser) {
+                throw new CommonError(`用户名${data.username}已存在`)
+            }
+
+            // 检查邮箱是否已存在
+            if (data.email) {
+                const existEmail = await UserModel.findByEmail(data.email)
+                if (existEmail) {
+                    throw new CommonError(`邮箱${data.email}已被使用`)
+                }
+            }
+
+            // 密码加密
+            const hashed = await hashPassword(data.password)
+
+            const user = await UserModel.create({ ...data, password: hashed })
+
+            // 返回脱敏信息
+            const { password, ...userInfo } = Array.isArray(user) ? user[0] : user
+            return userInfo
+        } catch (error) {
+            if (error instanceof CommonError) throw error
+            throw new CommonError(`注册失败: ${error.message}`)
+        }
+    }
+    
+    // 登录
+    static async login({ username, email, password }) {
+        try {
+            if (!password) {
+                throw new CommonError("密码不能为空")
+            }
+
+            if (!username && !email) {
+                throw new CommonError("用户名或邮箱不能为空")
+            }
+
+            let user
+            if (username) {
+                user = await UserModel.findByUsername(username)
+            } else if (email) {
+                user = await UserModel.findByEmail(email)
+            }
+
+            if (!user) {
+                throw new CommonError("用户不存在")
+            }
+
+            // 校验密码
+            const ok = await comparePassword(password, user.password)
+            if (!ok) {
+                throw new CommonError("密码错误")
+            }
+
+            // 生成token
+            const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, { expiresIn: "2h" })
+
+            // 返回token和用户信息
+            const { password: pwd, ...userInfo } = user
+            return { token, user: userInfo }
+        } catch (error) {
+            if (error instanceof CommonError) throw error
+            throw new CommonError(`登录失败: ${error.message}`)
+        }
+    }
+}
diff --git a/src/views/_scss/global.scss b/src/views/_scss/global.scss
new file mode 100644
index 0000000..9ad559c
--- /dev/null
+++ b/src/views/_scss/global.scss
@@ -0,0 +1,21 @@
+@mixin chinese() {
+    &.chinese {
+        text-indent: 1.5em;
+        font-weight: 300;
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        ol,
+        ul,
+        blockquote,
+        details,
+        summary,
+        pre,
+        .tabs {
+            text-indent: 0;
+        }
+    }
+}
diff --git a/src/views/htmx/footer/index.pug b/src/views/htmx/footer/index.pug
new file mode 100644
index 0000000..bee9a6b
--- /dev/null
+++ b/src/views/htmx/footer/index.pug
@@ -0,0 +1,51 @@
+footer.footer.shadow.mt-5
+    .footer-panel(class="bg-white border-t border-gray-200")
+      .footer-content.container(class="pt-12 pb-6")
+        .footer-main(class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8")
+          .footer-section
+            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") #{siteConfig.site_title}
+            p.footer-desc(class="text-gray-600 text-sm leading-relaxed") 明月照佳人，用真心对待世界。<br>岁月催人老，用真情对待自己。
+          
+          .footer-section
+            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 快速链接
+            ul.footer-links(class="space-y-3")
+              li
+                a(href="/" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 首页
+              li
+                a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我们
+              li
+                a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我们
+              li
+                a(href="/help" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 帮助中心
+          
+          .footer-section
+            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 服务支持
+            ul.footer-links(class="space-y-3")
+              li
+                a(href="/terms" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 服务条款
+              li
+                a(href="/privacy" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 隐私政策
+              li
+                a(href="/faq" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 常见问题
+              li
+                a(href="/feedback" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 意见反馈
+          
+          .footer-section
+            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 关注我
+            .social-links(class="flex space-x-4 flex-wrap")
+              a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信")
+                span.streamline-ultimate-color--wechat-logo
+              a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ")
+                span.cib--tencent-qq
+              a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub")
+                span.ri--github-fill
+              a(href="https://blog.xieyaxin.top" target="_blank" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub")
+                span.icomoon-free--blog
+        
+        .footer-bottom(class="border-t border-gray-200 pt-6")
+          .footer-bottom-content(class="flex flex-col md:flex-row justify-between items-center")
+            .copyright(class="text-gray-500 text-sm mb-4 md:mb-0")
+              | © 2023-#{new Date().getFullYear()} #{siteConfig.site_author}. 保留所有权利。
+            .footer-actions(class="flex items-center space-x-6")
+              a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图
+              a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅
diff --git a/src/views/htmx/markdown/index.pug b/src/views/htmx/markdown/index.pug
new file mode 100644
index 0000000..133c6d4
--- /dev/null
+++ b/src/views/htmx/markdown/index.pug
@@ -0,0 +1,11 @@
+:scss
+    @import "./style.scss";
+    @import "./markdown-reset.scss";
+    @import "./markdown-green.scss";
+
+.markdown-body.green
+    :markdown-it(linkify langPrefix='highlight-')
+        # 关于
+        这是一个关于页面，欢迎访问。
+
+        > 世上本无事，庸人自扰之。
\ No newline at end of file
diff --git a/src/views/htmx/markdown/markdown-green.scss b/src/views/htmx/markdown/markdown-green.scss
new file mode 100644
index 0000000..8221c10
--- /dev/null
+++ b/src/views/htmx/markdown/markdown-green.scss
@@ -0,0 +1,290 @@
+
+.markdown-body.green {
+
+    --color-base: #ef4444;
+    --color-base-text: #fff;
+    --color-bg: #ff47479c;
+    --color-light: #ef44441a;
+    --color-extra: rgba(239, 68, 68, 0.3);
+    --color-more: rgba(239, 68, 68, 0.4);
+    
+    --prism-background: #eeeeee;
+    --prism-font-size: 14px;
+    --prism-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+
+    ::selection {
+        background-color:  var(--color-base);
+        color: var(--color-base-text);
+    }
+
+    strong {
+        &::before {
+            content: "『";
+        }
+        &::after {
+            content: "』";
+        }
+        // color: #ff4d20;
+    }
+
+    /* 块/段落引用 */
+    // blockquote {
+    //     position: relative;
+    //     // color: #555;
+    //     font-weight: 400;
+    //     border-left: 6px solid var(--color-base);
+    //     padding-left: 1em;
+    //     margin-left: 0;
+    //     padding: 1em;
+    //     background-color: var(--color-light);
+    // }
+
+    blockquote {
+        position: relative;
+        z-index: 600;
+        padding: 20px 20px 15px 20px;
+        line-height: 1.4 !important;
+        background-color: rgba(239, 68, 68, 0.06);
+        border-radius: 0.4em;
+        > * {
+            position: relative;
+            &:first-child:before {
+                content: "\201C";
+                color: var(--color-light);
+                font-size: 6.5em;
+                font-weight: 700;
+                transform: rotate(15deg) translateX(-10px);
+                opacity: 1;
+                position: absolute;
+                top: -0.4em;
+                left: -0.2em;
+                text-shadow: none;
+                z-index: -10;
+            }
+        }
+    }
+
+    .tabs {
+        margin-top: 0;
+        margin-bottom: 1em;
+    }
+
+    /* 让链接在 hover 状态下显示下划线 */
+    // a {
+    //     color: var(--color-base);
+    //     text-decoration: none;
+    //     &:hover {
+    //         text-decoration: underline;
+    //     }
+    // }
+    a {
+        position: relative;
+        z-index: 10;
+        transition: color 0.3s linear;
+        cursor: pointer;
+        font-weight: bolder;
+        // text-decoration: underline #c7254e;
+        text-decoration: none;
+        color: var(--color-base);
+        border-bottom: 1px solid currentColor;
+        padding: 0 4px;
+        &[data-footnote-backref],
+        &[data-footnote-ref] {
+            // text-decoration: none;
+            border: none;
+            &:hover {
+                background: none;
+                animation: none;
+            }
+        }
+        &:hover {
+            content: "";
+            // text-decoration: none;
+            border: none;
+            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")
+                repeat-x 0 100%;
+            background-size: 20px auto;
+            animation: waveMove 1s infinite linear;
+        }
+        @keyframes waveMove {
+            0% {
+                background-position: 0 100%;
+            }
+            100% {
+                background-position: -20px 100%;
+            }
+        }
+    }
+
+    // 由prism.scss处理了
+    pre {
+        background: var(--prism-background);
+        font-size: var(--prism-font-size);
+        //     /* border: 1px solid #ddd; */
+        // padding: 1em 1.5em;
+        display: block;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    pre,
+    pre code {
+        font-family: var(--prism-font-family);
+    }
+
+    //     /* 底部印刷体、版本等标记 */
+    small,
+        /* 图片说明 */
+        figcaption {
+        font-size: 0.75em;
+        color: #888;
+    }
+    // .markdown-body {
+    legend {
+        color: #000;
+        font-weight: inherit;
+    }
+    caption {
+        color: #000;
+        font-weight: inherit;
+    }
+    del {
+        text-decoration: line-through var(--color-base) 2px;
+    }
+    code {
+        color: rgb(45, 55, 72);
+        background-color: rgba(160, 174, 192, 0.25);
+        font-family: inherit;
+        font-size: 1em;
+        // color: #ffffff;
+        // background-color: #ff4c209c;
+        border-radius: 4px;
+        padding: 1px 6px;
+        // font-size: 0.875em;
+        // font-size: 1.0769em;
+        // position: relative;
+        // top: 0.1em;
+        margin: 0 2px;
+        vertical-align: bottom;
+    }
+    pre {
+        code {
+            padding: 0;
+            font-size: inherit;
+            font-weight: inherit;
+            color: inherit;
+            white-space: pre;
+            background-color: transparent;
+            vertical-align: baseline;
+            border-radius: 0;
+            margin: 0;
+        }
+    }
+    table {
+        width: 100%;
+        display: table;
+        border: 1px solid var(--color-light);
+        tr:hover {
+            background: var(--color-light);
+        }
+        &:hover {
+            border: 1px solid var(--color-extra);
+            th {
+                border-right: 1px solid var(--color-extra);
+                background: var(--color-extra);
+                border-bottom: 1px solid var(--color-extra);
+            }
+            td {
+                border-right: 1px solid var(--color-extra);
+            }
+            caption {
+                border-right: 1px solid var(--color-extra);
+            }
+            thead {
+                th {
+                    background: var(--color-extra);
+                }
+            }
+        }
+        // table-layout: fixed;
+        th {
+            border-right: 1px solid var(--color-light);
+            padding: 0.5em 1em;
+            background: var(--color-light);
+            border-bottom: 1px solid var(--color-light);
+        }
+        td {
+            border-right: 1px solid var(--color-light);
+            padding: 0.5em 1em;
+        }
+        caption {
+            border-right: 1px solid var(--color-light);
+            padding: 0.5em 1em;
+            border-bottom: none;
+        }
+        thead {
+            th {
+                background: var(--color-extra);
+            }
+        }
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-top: 1.2em;
+        margin-bottom: 0.6em;
+        line-height: 1.35;
+        position: relative;
+    }
+    h1 {
+        font-size: 1.8em;
+    }
+    h2 {
+        font-size: 1.6em;
+    }
+    h3 {
+        font-size: 1.4em;
+    }
+    h4 {
+        font-size: 1.2em;
+    }
+    h5 {
+        font-size: 1em;
+    }
+    h6 {
+        font-size: 1em;
+    }
+
+    ::-webkit-calendar-picker-indicator {
+        filter: invert(50%);
+    }
+    em {
+        // color: #000;
+        font-weight: inherit;
+        position: relative;
+        &:after {
+            position: absolute;
+            top: 0.65em;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            pointer-events: none;
+            color: var(--color-base);
+            content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
+        }
+    }
+    ul.toc {
+        li {
+            list-style-type: none;
+            a {
+                text-decoration: none;
+                border: 0;
+                list-style-type: none;
+            }
+        }
+    }
+    @include chinese;
+}
diff --git a/src/views/htmx/markdown/markdown-reset.scss b/src/views/htmx/markdown/markdown-reset.scss
new file mode 100644
index 0000000..d0dabe1
--- /dev/null
+++ b/src/views/htmx/markdown/markdown-reset.scss
@@ -0,0 +1,677 @@
+
+/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
+@media (prefers-color-scheme: dark) {
+    .markdown-body {
+        /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
+        color-scheme: dark;
+    }
+}
+/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
+@media (prefers-color-scheme: light) {
+    // https://verytoolz.com/blog/03bfb3598f/
+    .markdown-body {
+        /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
+        color-scheme: light;
+        /* 定义CSS自定义属性，用于主题色彩管理 */
+        --color-fg-default: #24292f; // 文本色-默认 - 主要文本颜色
+        --color-fg-muted: #57606a; // 文本色-柔和 - 次要文本颜色
+        --color-fg-subtle: #6e7781; // 文本色-微妙 - 最淡的文本颜色
+        --color-canvas-default: #ffffff; // 底色-默认 - 主要背景颜色
+        --color-canvas-subtle: #f6f8fa; // 底色-微妙 - 次要背景颜色
+        --color-border-default: #d0d7de; // 边框色-默认 - 主要边框颜色
+        --color-border-muted: hsla(210, 18%, 87%, 1); // 边框色-柔和 - 次要边框颜色
+        --color-neutral-muted: rgba(175, 184, 193, 0.2); // 边框色-中性 - 中性边框颜色
+        --color-accent-fg: #0969da; // 文本强调色 - 强调文本颜色
+        --color-accent-emphasis: #0969da; // 背景强调色 - 强调背景颜色
+        --color-attention-subtle: #fff8c5; // 背景注意色 - 注意提示背景色
+        --color-danger-fg: #cf222e; // 文本危险色 - 危险/错误文本颜色
+        --color-mark-default: rgb(255, 255, 0); // mark 默认色 - 标记默认背景色
+        --color-mark-fg: rgb(255, 187, 0); // mark 强调色 - 标记强调背景色
+    }
+}
+
+/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
+.markdown-body {
+    /* 防止iOS Safari自动调整文本大小 */
+    -webkit-text-size-adjust: 100%;
+    /* 防止IE自动调整文本大小 */
+    -ms-text-size-adjust: 100%;
+    /* 优化文本渲染质量，提升可读性 */
+    text-rendering: optimizelegibility;
+    /* 重置外边距为0 */
+    margin: 0;
+    /* 允许长单词在必要时换行，防止溢出 */
+    word-wrap: break-word;
+    /* 使用CSS变量设置文本颜色 */
+    color: var(--color-fg-muted);
+    /* 伪元素before - 用于清除浮动 */
+    &::before {
+        /* 设置为表格显示模式，用于清除浮动 */
+        display: table;
+        /* 空内容，仅用于布局 */
+        content: "";
+    }
+    /* 伪元素after - 用于清除浮动 */
+    &::after {
+        /* 设置为表格显示模式，用于清除浮动 */
+        display: table;
+        /* 清除左右浮动 */
+        clear: both;
+        /* 空内容，仅用于布局 */
+        content: "";
+    }
+    /* 第一个子元素 - 移除顶部外边距 */
+    > *:first-child {
+        /* 强制移除顶部外边距，避免不必要的空白 */
+        margin-top: 0 !important;
+    }
+    /* 最后一个子元素 - 移除底部外边距 */
+    > *:last-child {
+        /* 强制移除底部外边距，避免不必要的空白 */
+        margin-bottom: 0 !important;
+    }
+    /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
+    p,
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    hr,
+    form,
+    pre,
+    details {
+        /* 移除顶部外边距，避免重复间距 */
+        margin-top: 0;
+        /* 设置底部外边距为1em，保持适当间距 */
+        margin-bottom: 1em;
+    }
+    /* 引用块内部元素间距处理 */
+    blockquote {
+        /* 引用块内第一个子元素 - 移除顶部外边距 */
+        & > :first-child {
+            margin-top: 0;
+        }
+        /* 引用块内最后一个子元素 - 移除底部外边距 */
+        & > :last-child {
+            margin-bottom: 0;
+        }
+    }
+    /* 统一显示成块状元素 - 确保这些元素独占一行 */
+    details,
+    figcaption,
+    figure {
+        /* 设置为块级元素，独占一行显示 */
+        display: block;
+    }
+    /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
+    audio,
+    canvas,
+    video {
+        /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
+        display: inline-block;
+    }
+    /* 按钮内部间距统一 - 移除Firefox默认内边距 */
+    button::-moz-focus-inner,
+    input::-moz-focus-inner {
+        /* 移除Firefox浏览器按钮和输入框的内部内边距 */
+        padding: 0;
+        /* 移除Firefox浏览器按钮和输入框的内部边框 */
+        border: 0;
+    }
+    /* 定义元素显示为斜体 - 术语定义样式 */
+    dfn {
+        /* 设置字体为斜体，用于术语定义 */
+        font-style: italic;
+    }
+    /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
+    table {
+        /* 合并表格边框，相邻单元格边框合并为一条 */
+        border-collapse: collapse;
+        /* 设置表格单元格间距为0 */
+        border-spacing: 0;
+        /* 设置为块级元素，可以设置宽高 */
+        display: block;
+        /* 宽度根据内容自适应 */
+        width: max-content;
+        /* 最大宽度不超过父容器 */
+        max-width: 100%;
+        /* 内容溢出时显示滚动条 */
+        overflow: auto;
+    }
+    /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
+    [draggable] {
+        /* 设置鼠标悬停时显示移动光标 */
+        cursor: move;
+    }
+    /* 加粗元素 - 粗体文本样式 */
+    b,
+    strong {
+        /* 设置字体粗细，使用CSS变量或默认600 */
+        font-weight: var(--base-text-weight-semibold, 600);
+    }
+    /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
+    abbr,
+    acronym {
+        /* 移除底部边框 */
+        border-bottom: none;
+        /* 设置字体变体为正常 */
+        font-variant: normal;
+        /* 设置虚线下划线装饰 */
+        text-decoration: underline dotted;
+    }
+    /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
+    abbr {
+        /* 设置鼠标悬停时显示帮助光标 */
+        cursor: help;
+    }
+    /* 一致的 del 样式 - 删除线文本样式 */
+    del {
+        /* 设置文本装饰为删除线 */
+        text-decoration: line-through;
+    }
+    /* a标签去除下划线 - 链接样式处理 */
+    a {
+        /* 默认移除下划线，保持页面简洁 */
+        text-decoration: none;
+        /* 没有href属性的链接样式 */
+        &:not([href]) {
+            /* 继承父元素颜色 */
+            color: inherit;
+            /* 移除下划线装饰 */
+            text-decoration: none;
+        }
+        /* 鼠标悬停时显示下划线 */
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
+    ins {
+        /* 移除下划线装饰，保持页面简洁 */
+        text-decoration: none;
+    }
+    /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
+ * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
+ * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
+ * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
+ * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
+ */
+    u,
+    .typo-u {
+        /* 设置文本装饰为下划线，用于专名号显示 */
+        text-decoration: underline;
+    }
+    /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
+    [hidden] {
+        /* 强制隐藏元素，优先级最高 */
+        display: none !important;
+    }
+    /* 伸缩框显示为列表元素 - 详情框摘要样式 */
+    summary {
+        /* 设置为列表项显示，显示为可点击的列表项 */
+        display: list-item;
+    }
+    /* 引用元素前后内容 - 移除默认引号 */
+    q:before,
+    q:after {
+        /* 移除引用元素前后的默认引号内容 */
+        content: "";
+    }
+    /* 表格标题和表头文本对齐 - 默认左对齐 */
+    caption,
+    th {
+        /* 设置文本左对齐 */
+        text-align: left;
+    }
+    /* 居中对齐的表格标题和表头 */
+    caption[align="center"],
+    th[align="center"] {
+        /* 设置文本居中对齐 */
+        text-align: center;
+    }
+    /* 特定元素字体粗细统一 - 地址、标题、引用等 */
+    address,
+    caption,
+    cite,
+    em,
+    th,
+    var {
+        /* 设置字体粗细为正常（400） */
+        font-weight: 400;
+    }
+    /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
+    mark {
+        /* 设置标记背景色，使用CSS变量 */
+        background: var(--color-mark-default);
+        // background: #fffdd1; // 备用背景色
+        // border-bottom: 1px solid #ffedce; // 备用底部边框
+        /* 设置内边距，增加标记的可读性 */
+        padding: 2px;
+
+        /* 激活状态的标记样式 */
+        &.active {
+            /* 激活时使用强调色背景 */
+            background: var(--color-mark-fg);
+        }
+        // margin: 0 5px; // 备用外边距
+    }
+    /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
+    h1 {
+        /* 设置上下外边距为0.67em */
+        margin: 0.67em 0;
+        /* 设置字体粗细，使用CSS变量或默认600 */
+        font-weight: var(--base-text-weight-semibold, 600);
+        /* 设置字体大小为2倍基础大小 */
+        font-size: 2em;
+    }
+    /* small字体缩小 - 小字体文本样式 */
+    small {
+        /* 设置字体大小为父元素的90% */
+        font-size: 90%;
+    }
+    /* 上下标显示 - 下标和上标文本样式 */
+    sub,
+    sup {
+        /* 设置字体大小为75% */
+        font-size: 75%;
+        /* 设置行高为0，避免影响行间距 */
+        line-height: 0;
+        /* 设置相对定位，用于精确控制位置 */
+        position: relative;
+        /* 设置垂直对齐为基线 */
+        vertical-align: baseline;
+    }
+    /* 上下标内链接样式 */
+    sub a,
+    sup a {
+        /* 设置左右内边距为0.1em */
+        padding: 0 0.1em;
+    }
+    /* 下标位置调整 */
+    sub {
+        /* 向下偏移0.25em */
+        bottom: -0.25em;
+    }
+    /* 上标位置调整 */
+    sup {
+        /* 向上偏移0.5em */
+        top: -0.5em;
+    }
+    /* 代码相关的字体大小统一 - 代码元素字体样式 */
+    code,
+    kbd,
+    pre,
+    samp,
+    pre tt {
+        /* 设置字体为等宽字体，便于代码阅读 */
+        font-family: monospace;
+        /* 设置字体大小为1em，保持一致性 */
+        font-size: 1em;
+    }
+    /* 去除默认边框 - 移除字段集和图片的默认边框 */
+    fieldset,
+    img {
+        /* 移除边框 */
+        border: 0;
+    }
+    /* 图片初始化样式 - 图片元素基础样式 */
+    img {
+        /* 设置边框样式为无 */
+        border-style: none;
+        /* 设置最大宽度为100%，防止溢出 */
+        max-width: 100%;
+        /* 设置盒模型为内容盒模型 */
+        box-sizing: content-box;
+        /* 设置左右外边距为自动，实现居中 */
+        margin: 0 auto;
+        /* 设置背景色，使用CSS变量 */
+        background-color: var(--color-canvas-default);
+    }
+    /* 可附标题内容元素的间距 - 图片容器样式 */
+    figure {
+        /* 设置上下外边距为1em，左右外边距为40px */
+        margin: 1em 40px;
+    }
+    /* 间隔线 - 水平分隔线样式 */
+    /* 一致化 horizontal rule - 统一水平分隔线样式 */
+    hr {
+        /* 设置盒模型为内容盒模型 */
+        box-sizing: content-box;
+        /* 隐藏溢出内容 */
+        overflow: hidden;
+        /* 设置背景为透明 */
+        background: transparent;
+        /* 设置底部边框，使用CSS变量 */
+        border-bottom: 1px solid var(--color-border-muted);
+        /* 设置高度为0.25em */
+        height: 0.25em;
+        /* 移除内边距 */
+        padding: 0;
+        /* 设置上下外边距为24px */
+        margin: 24px 0;
+        /* 设置背景色，使用CSS变量 */
+        background-color: var(--color-border-default);
+        /* 移除边框 */
+        border: 0;
+        /* 伪元素before - 用于清除浮动 */
+        &::before {
+            /* 设置为表格显示模式，用于清除浮动 */
+            display: table;
+            /* 空内容，仅用于布局 */
+            content: "";
+        }
+        /* 伪元素after - 用于清除浮动 */
+        &::after {
+            /* 设置为表格显示模式，用于清除浮动 */
+            display: table;
+            /* 清除左右浮动 */
+            clear: both;
+            /* 空内容，仅用于布局 */
+            content: "";
+        }
+    }
+
+    /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
+    button,
+    input,
+    select,
+    textarea {
+        /* 继承父元素的字体样式 */
+        font: inherit;
+        /* 移除外边距 */
+        margin: 0;
+        /* 设置溢出为可见 */
+        overflow: visible;
+        /* 继承父元素的字体族 */
+        font-family: inherit;
+        /* 继承父元素的字体大小 */
+        font-size: inherit;
+        /* 继承父元素的行高 */
+        line-height: inherit;
+    }
+    /* 外观显示为按钮 - 按钮类型输入框样式 */
+    [type="button"],
+    [type="reset"],
+    [type="submit"] {
+        /* 设置WebKit浏览器按钮外观 */
+        -webkit-appearance: button;
+        /* 设置标准按钮外观，提高兼容性 */
+        appearance: button;
+    }
+    /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
+    [type="checkbox"],
+    [type="radio"] {
+        /* 设置盒模型为边框盒模型 */
+        box-sizing: border-box;
+        /* 移除内边距 */
+        padding: 0;
+    }
+    /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-webkit-outer-spin-button {
+        /* 设置高度为自动，适应内容 */
+        height: auto;
+    }
+    /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
+    [type="search"]::-webkit-search-cancel-button,
+    [type="search"]::-webkit-search-decoration {
+        /* 移除WebKit浏览器搜索框默认样式 */
+        -webkit-appearance: none;
+    }
+    /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
+    ::-webkit-input-placeholder {
+        /* 继承父元素颜色 */
+        color: inherit;
+        /* 设置透明度为0.54，创建半透明效果 */
+        opacity: 0.54;
+    }
+    /* 文件选择按钮样式统一 - 文件上传按钮样式 */
+    ::-webkit-file-upload-button {
+        /* 设置WebKit浏览器按钮外观 */
+        -webkit-appearance: button;
+        /* 继承父元素字体样式 */
+        font: inherit;
+    }
+    /* 占位符显示统一 - 通用占位符样式 */
+    ::placeholder {
+        /* 设置占位符颜色，使用CSS变量 */
+        color: var(--color-fg-subtle);
+        /* 设置完全不透明 */
+        opacity: 1;
+    }
+    /* table内的td,th去除留白 - 表格单元格样式 */
+    td,
+    th {
+        /* 移除表格单元格内边距 */
+        padding: 0;
+    }
+    /* 伸缩框鼠标显示 - 详情框摘要样式 */
+    details summary {
+        /* 设置鼠标悬停时显示手型光标 */
+        cursor: pointer;
+    }
+
+    /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
+    details:not([open]) > *:not(summary) {
+        /* 强制隐藏未展开详情框内的非摘要内容 */
+        display: none !important;
+    }
+    /* 按键显示 - 键盘按键样式 */
+    kbd {
+        /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
+        display: inline-block;
+        /* 设置内边距为3px上下，5px左右 */
+        padding: 3px 5px;
+        /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
+        font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+        /* 设置行高为10px */
+        line-height: 10px;
+        /* 设置文本颜色，使用CSS变量 */
+        color: var(--color-fg-default);
+        /* 设置垂直对齐为中间 */
+        vertical-align: middle;
+        /* 设置背景色，使用CSS变量 */
+        background-color: var(--color-canvas-subtle);
+        /* 设置边框为1px实线，使用CSS变量 */
+        border: solid 1px var(--color-neutral-muted);
+        /* 设置底部边框颜色，使用CSS变量 */
+        border-bottom-color: var(--color-neutral-muted);
+        /* 设置圆角为6px */
+        border-radius: 6px;
+        /* 设置内阴影，创建按键凹陷效果 */
+        box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+    }
+    /* 清除浮动工具类 - 清除浮动伪元素 */
+    .clearfix:before,
+    .clearfix:after {
+        /* 空内容，仅用于布局 */
+        content: "";
+        /* 设置为表格显示模式，用于清除浮动 */
+        display: table;
+    }
+    /* 清除浮动工具类 - after伪元素 */
+    .clearfix:after {
+        /* 清除左右浮动 */
+        clear: both;
+    }
+    /* 清除浮动工具类 - 主容器 */
+    .clearfix {
+        /* 触发IE的hasLayout属性，用于清除浮动 */
+        zoom: 1;
+    }
+    /* 强制文本换行 - 文本换行工具类 */
+    .textwrap,
+    .textwrap td,
+    .textwrap th {
+        /* 允许长单词在必要时换行，防止溢出 */
+        word-wrap: break-word;
+        /* 强制在任意字符间换行，防止溢出 */
+        word-break: break-all;
+    }
+    /* 文本换行表格 - 固定表格布局 */
+    .textwrap-table {
+        /* 设置表格布局为固定，提高渲染性能 */
+        table-layout: fixed;
+    }
+    /* 无序列表样式 - 项目符号列表 */
+    ul {
+        /* 重置左边距为0 */
+        margin-left: 0;
+        /* 重置左内边距为0 */
+        padding-left: 0;
+        /* 设置左边距为2em，创建缩进效果 */
+        margin-left: 2em;
+        /* 设置列表样式为实心圆点 */
+        list-style: disc;
+    }
+    /* 有序列表样式 - 数字列表 */
+    ol {
+        /* 重置左边距为0 */
+        margin-left: 0;
+        /* 重置左内边距为0 */
+        padding-left: 0;
+        /* 设置左边距为2em，创建缩进效果 */
+        margin-left: 2em;
+        /* 设置列表样式为数字 */
+        list-style: decimal;
+        /* 列表项样式 */
+        li {
+            /* 设置左内边距为0.4em，增加数字与文本间距 */
+            padding-left: 0.4em;
+        }
+    }
+    /* 相邻列表项间距 - 列表项之间的间距 */
+    li + li {
+        /* 设置顶部外边距为0.25em，增加列表项间距 */
+        margin-top: 0.25em;
+    }
+    /* 嵌套列表样式 - 列表项内的子列表 */
+    li {
+        /* 无序子列表样式 */
+        ul {
+            /* 设置底部外边距为0.8em */
+            margin-bottom: 0.8em;
+            /* 设置左边距为2em，创建嵌套缩进 */
+            margin-left: 2em;
+            /* 设置列表样式为空心圆点 */
+            list-style: circle;
+            /* 三级无序列表样式 */
+            li {
+                ul {
+                    /* 设置列表样式为实心方块 */
+                    list-style: square;
+                }
+            }
+        }
+        /* 有序子列表样式 */
+        ol {
+            /* 设置底部外边距为0.8em */
+            margin-bottom: 0.8em;
+            /* 设置左边距为2em，创建嵌套缩进 */
+            margin-left: 2em;
+        }
+    }
+    /* 任务列表项样式 - 待办事项列表项 */
+    .task-list-item {
+        /* 移除列表样式，不显示项目符号 */
+        list-style-type: none;
+        /* 设置相对定位，用于绝对定位子元素 */
+        position: relative;
+        /* 第一个子输入框样式 */
+        > input {
+            /* 第一个子元素右边距 */
+            &:nth-child(1) {
+                /* 设置右边距为6px */
+                margin-right: 6px;
+            }
+        }
+        /* 标签样式 */
+        label {
+            /* 设置字体粗细为正常（400） */
+            font-weight: 400;
+        }
+        /* 拖拽手柄样式 */
+        .handle {
+            /* 隐藏拖拽手柄 */
+            display: none;
+        }
+        /* 复选框样式 */
+        input[type="checkbox"] {
+            /* 设置宽度为0.9em */
+            width: 0.9em;
+            /* 设置高度为0.9em */
+            height: 0.9em;
+            /* 设置绝对定位 */
+            position: absolute;
+            /* 向左偏移1.3em */
+            left: -1.3em;
+            /* 向下偏移0.35em */
+            top: 0.35em;
+        }
+    }
+    /* 启用的任务列表项样式 */
+    .task-list-item.enabled {
+        /* 标签样式 */
+        label {
+            /* 设置鼠标悬停时显示手型光标 */
+            cursor: pointer;
+        }
+    }
+    /* 相邻任务列表项间距 */
+    .task-list-item + .task-list-item {
+        /* 设置顶部外边距为3px */
+        margin-top: 3px;
+    }
+    /* 包含任务列表的容器样式 */
+    .contains-task-list {
+        // margin-left: 0.6em; // 备用左边距
+        /* 从右到左文本方向样式 */
+        &:dir(rtl) {
+            .task-list-item {
+                input[type="checkbox"] {
+                    /* 设置复选框外边距，适配RTL布局 */
+                    margin: 0 -1.6em 0.25em 0.2em;
+                }
+            }
+        }
+    }
+
+    /* 目录样式 - 表格目录容器 */
+    .toc {
+        /* 重置左边距为0 */
+        margin-left: 0;
+    }
+
+    /* 定义列表样式 - 描述列表容器 */
+    dl {
+        /* 设置为块级元素 */
+        display: block;
+        /* 设置块级起始外边距为1em */
+        margin-block-start: 1em;
+        /* 设置块级结束外边距为1em */
+        margin-block-end: 1em;
+        /* 设置内联起始外边距为0px */
+        margin-inline-start: 0px;
+        /* 设置内联结束外边距为0px */
+        margin-inline-end: 0px;
+        /* 设置Unicode双向算法为隔离 */
+        unicode-bidi: isolate;
+        /* 定义术语样式 */
+        dt {
+            /* 设置为块级元素 */
+            display: block;
+            /* 设置Unicode双向算法为隔离 */
+            unicode-bidi: isolate;
+        }
+        /* 定义描述样式 */
+        dd {
+            /* 设置为块级元素 */
+            display: block;
+            /* 设置内联起始外边距为40px，创建缩进效果 */
+            margin-inline-start: 40px;
+            /* 设置Unicode双向算法为隔离 */
+            unicode-bidi: isolate;
+        }
+    }
+}
diff --git a/src/views/htmx/markdown/style.scss b/src/views/htmx/markdown/style.scss
new file mode 100644
index 0000000..0ac4c77
--- /dev/null
+++ b/src/views/htmx/markdown/style.scss
@@ -0,0 +1,146 @@
+/* 首页样式 */
+
+.hero-section {
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-section::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('/images/hero-bg.svg') no-repeat center center;
+    background-size: cover;
+    opacity: 0.1;
+    z-index: 0;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+}
+
+.feature-card {
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+}
+
+.feature-card .material-symbols-light--article,
+.feature-card .material-symbols-light--bookmark,
+.feature-card .material-symbols-light--person {
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover .material-symbols-light--article,
+.feature-card:hover .material-symbols-light--bookmark,
+.feature-card:hover .material-symbols-light--person {
+    transform: scale(1.1);
+}
+
+.stats-section {
+    position: relative;
+}
+
+.stats-section::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('/images/stats-bg.svg') no-repeat center center;
+    background-size: cover;
+    opacity: 0.05;
+    z-index: 0;
+}
+
+.stat-item {
+    transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+    transform: scale(1.05);
+}
+
+.user-dashboard {
+    position: relative;
+}
+
+.user-dashboard::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('/images/dashboard-bg.svg') no-repeat center center;
+    background-size: cover;
+    opacity: 0.03;
+    z-index: 0;
+}
+
+.avatar {
+    transition: all 0.3s ease;
+}
+
+.avatar:hover {
+    transform: scale(1.05);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 4rem 0;
+    }
+
+    .hero-content h1 {
+        font-size: 2.5rem;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .user-info {
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .user-actions {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-content h1 {
+        font-size: 2rem;
+    }
+
+    .hero-content p {
+        font-size: 1rem;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .hero-actions {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .hero-actions a {
+        width: 100%;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/src/views/htmx/navbar/index.pug b/src/views/htmx/navbar/index.pug
new file mode 100644
index 0000000..5e21ff1
--- /dev/null
+++ b/src/views/htmx/navbar/index.pug
@@ -0,0 +1,26 @@
+nav.navbar(class="relative")
+    .placeholder.mb-5(class="h-[45px] w-full opacity-0")
+    .fixed-container(class="shadow fixed bg-white h-[45px] top-0 left-0 right-0 z-10")
+      .container.clearfix(class="h-full")
+        .navbar-brand
+            a(href="/" class="text-[20px]") #{siteConfig.site_title}
+        .left.menu.desktop-only
+            a.menu-item(
+              href="/articles"
+              class=(currentPath === '/articles' || currentPath === '/articles/' 
+                ? 'text-blue-600 font-bold border-b-2 border-blue-600'
+                : 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400'
+              )
+            ) 所有文章
+        if !user
+            .right.menu.desktop-only
+                a.menu-item(href="/login") 登录
+                a.menu-item(href="/register") 注册
+        else
+            .right.menu.desktop-only
+                a.menu-item(href="/profile") 
+                  span 欢迎您，
+                  span.font-semibold #{user.name || user.username}
+                a.menu-item(href="/notice") 
+                  .fe--notice-active
+                a.menu-item(hx-post="/logout") 退出
\ No newline at end of file
diff --git a/src/views/layouts/empty.pug b/src/views/layouts/empty.pug
index 42cda1b..57eea74 100644
--- a/src/views/layouts/empty.pug
+++ b/src/views/layouts/empty.pug
@@ -5,87 +5,11 @@ block $$head
   block pageHead
 
 block $$content
-  nav.navbar(class="relative")
-    .placeholder.mb-5(class="h-[45px] w-full opacity-0")
-    .fixed-container(class="shadow fixed bg-white h-[45px] top-0 left-0 right-0 z-10")
-      .container.clearfix(class="h-full")
-        .navbar-brand
-            a(href="/" class="text-[20px]") #{siteConfig.site_title}
-        .left.menu.desktop-only
-            a.menu-item(
-              href="/articles"
-              class=(currentPath === '/articles' || currentPath === '/articles/' 
-                ? 'text-blue-600 font-bold border-b-2 border-blue-600'
-                : 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400'
-              )
-            ) 所有文章
-        if !isLogin
-            .right.menu.desktop-only
-                a.menu-item(href="/login") 登录
-                a.menu-item(href="/register") 注册
-        else
-            .right.menu.desktop-only
-                a.menu-item(href="/profile") 
-                  span 欢迎您，
-                  span.font-semibold #{user.name || user.username}
-                a.menu-item(href="/notice") 
-                  .fe--notice-active
-                a.menu-item(hx-post="/logout") 退出
+  include /htmx/navbar/index.pug
   .page-layout
     .page.container
       block pageContent
-
-  footer.footer.shadow.mt-5
-    .footer-panel(class="bg-white border-t border-gray-200")
-      .footer-content.container(class="pt-12 pb-6")
-        .footer-main(class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8")
-          .footer-section
-            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") #{siteConfig.site_title}
-            p.footer-desc(class="text-gray-600 text-sm leading-relaxed") 明月照佳人，用真心对待世界。<br>岁月催人老，用真情对待自己。
-          
-          .footer-section
-            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 快速链接
-            ul.footer-links(class="space-y-3")
-              li
-                a(href="/" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 首页
-              li
-                a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我们
-              li
-                a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我们
-              li
-                a(href="/help" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 帮助中心
-          
-          .footer-section
-            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 服务支持
-            ul.footer-links(class="space-y-3")
-              li
-                a(href="/terms" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 服务条款
-              li
-                a(href="/privacy" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 隐私政策
-              li
-                a(href="/faq" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 常见问题
-              li
-                a(href="/feedback" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 意见反馈
-          
-          .footer-section
-            h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 关注我
-            .social-links(class="flex space-x-4 flex-wrap")
-              a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信")
-                span.streamline-ultimate-color--wechat-logo
-              a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ")
-                span.cib--tencent-qq
-              a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub")
-                span.ri--github-fill
-              a(href="https://blog.xieyaxin.top" target="_blank" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub")
-                span.icomoon-free--blog
-        
-        .footer-bottom(class="border-t border-gray-200 pt-6")
-          .footer-bottom-content(class="flex flex-col md:flex-row justify-between items-center")
-            .copyright(class="text-gray-500 text-sm mb-4 md:mb-0")
-              | © 2023-#{new Date().getFullYear()} #{siteConfig.site_author}. 保留所有权利。
-            .footer-actions(class="flex items-center space-x-6")
-              a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图
-              a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅
-
+  include /htmx/footer/index.pug
+  
 block $$scripts
   block pageScripts
diff --git a/src/views/page/index/_global.scss b/src/views/page/index/_global.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/page/index/index.pug b/src/views/page/index/index.pug
index 64b6fe2..87f454a 100644
--- a/src/views/page/index/index.pug
+++ b/src/views/page/index/index.pug
@@ -1,22 +1,6 @@
 extends /layouts/empty.pug
 
 block pageHead
-  :scss
-    @use "./_global.scss";
-    @use "./style.scss";
-    @use "./markdown-reset.scss";
-    @use "./markdown-green.scss";
-
 
 block pageContent
-  .markdown-body 
-    :markdown-it(linkify langPrefix='highlight-')
-      # Markdown
-
-      Markdown document with http://links.com and
-
-      ```js
-      var codeBlocks;
-      ```
-
-      > blockquote 
\ No newline at end of file
+  include /htmx/markdown/index.pug
\ No newline at end of file
diff --git a/src/views/page/index/markdown-green.scss b/src/views/page/index/markdown-green.scss
deleted file mode 100644
index a42ac47..0000000
--- a/src/views/page/index/markdown-green.scss
+++ /dev/null
@@ -1,316 +0,0 @@
-@mixin chinese() {
-    &.chinese {
-        text-indent: 1.5em;
-        font-weight: 300;
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6,
-        ol,
-        ul,
-        blockquote,
-        details,
-        summary,
-        pre,
-        .tabs {
-            text-indent: 0;
-        }
-    }
-}
-
-
-// ::selection {
-//     background-color: #1abc9c;
-//     color: #fff;
-// }
-
-// pre ::selection {
-//     color: inherit;
-// }
-
-.markdown-body {
-    --color-base: #ef4444;
-    --markdown-bg: white;
-    --color-bg: #ff47479c;
-    --color-light: #ef44441a;
-    --color-extra: rgba(239, 68, 68, 0.3);
-    --color-more: rgba(239, 68, 68, 0.4);
-}
-
-.markdown-body.green {
-    background-color: var(--markdown-bg);
-    @apply p-3 lg:p-6;
-
-    strong {
-        &::before {
-            content: "『";
-        }
-        &::after {
-            content: "』";
-        }
-        // color: #ff4d20;
-    }
-
-    /* 块/段落引用 */
-    // blockquote {
-    //     position: relative;
-    //     // color: #555;
-    //     font-weight: 400;
-    //     border-left: 6px solid var(--color-base);
-    //     padding-left: 1em;
-    //     margin-left: 0;
-    //     padding: 1em;
-    //     background-color: var(--color-light);
-    // }
-
-    blockquote {
-        position: relative;
-        z-index: 600;
-        padding: 20px 20px 15px 20px;
-        line-height: 1.4 !important;
-        background-color: rgba(239, 68, 68, 0.06);
-        border-radius: 0.4em;
-        > * {
-            position: relative;
-            &:first-child:before {
-                content: "\201C";
-                color: var(--color-light);
-                font-size: 6.5em;
-                font-weight: 700;
-                transform: rotate(15deg) translateX(-10px);
-                opacity: 1;
-                position: absolute;
-                top: -0.4em;
-                left: -0.2em;
-                text-shadow: none;
-                z-index: -10;
-            }
-        }
-    }
-
-    .tabs {
-        margin-top: 0;
-        margin-bottom: 1em;
-    }
-
-    /* 让链接在 hover 状态下显示下划线 */
-    // a {
-    //     color: var(--color-base);
-    //     text-decoration: none;
-    //     &:hover {
-    //         text-decoration: underline;
-    //     }
-    // }
-    a {
-        position: relative;
-        z-index: 10;
-        transition: color 0.3s linear;
-        cursor: pointer;
-        font-weight: bolder;
-        // text-decoration: underline #c7254e;
-        text-decoration: none;
-        color: var(--color-base);
-        border-bottom: 1px solid currentColor;
-        padding: 0 4px;
-        &[data-footnote-backref],
-        &[data-footnote-ref] {
-            // text-decoration: none;
-            border: none;
-            &:hover {
-                background: none;
-                animation: none;
-            }
-        }
-        &:hover {
-            content: "";
-            // text-decoration: none;
-            border: none;
-            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")
-                repeat-x 0 100%;
-            background-size: 20px auto;
-            animation: waveMove 1s infinite linear;
-        }
-        @keyframes waveMove {
-            0% {
-                background-position: 0 100%;
-            }
-            100% {
-                background-position: -20px 100%;
-            }
-        }
-    }
-
-    // 由prism.scss处理了
-    pre {
-        background: var(--prism-background);
-        font-size: var(--prism-font-size);
-        //     /* border: 1px solid #ddd; */
-        // padding: 1em 1.5em;
-        display: block;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    pre,
-    pre code {
-        font-family: var(--prism-font-family);
-    }
-
-    //     /* 底部印刷体、版本等标记 */
-    small,
-        /* 图片说明 */
-        figcaption {
-        font-size: 0.75em;
-        color: #888;
-    }
-    // .markdown-body {
-    legend {
-        color: #000;
-        font-weight: inherit;
-    }
-    caption {
-        color: #000;
-        font-weight: inherit;
-    }
-    del {
-        text-decoration: line-through var(--color-base) 2px;
-    }
-    code {
-        color: rgb(45, 55, 72);
-        background-color: rgba(160, 174, 192, 0.25);
-        font-family: inherit;
-        font-size: 1em;
-        // color: #ffffff;
-        // background-color: #ff4c209c;
-        border-radius: 4px;
-        padding: 1px 6px;
-        // font-size: 0.875em;
-        // font-size: 1.0769em;
-        // position: relative;
-        // top: 0.1em;
-        margin: 0 2px;
-        vertical-align: bottom;
-    }
-    pre {
-        code {
-            padding: 0;
-            font-size: inherit;
-            font-weight: inherit;
-            color: inherit;
-            white-space: pre;
-            background-color: transparent;
-            vertical-align: baseline;
-            border-radius: 0;
-            margin: 0;
-        }
-    }
-    table {
-        width: 100%;
-        display: table;
-        border: 1px solid var(--color-light);
-        tr:hover {
-            background: var(--color-light);
-        }
-        &:hover {
-            border: 1px solid var(--color-extra);
-            th {
-                border-right: 1px solid var(--color-extra);
-                background: var(--color-extra);
-                border-bottom: 1px solid var(--color-extra);
-            }
-            td {
-                border-right: 1px solid var(--color-extra);
-            }
-            caption {
-                border-right: 1px solid var(--color-extra);
-            }
-            thead {
-                th {
-                    background: var(--color-extra);
-                }
-            }
-        }
-        // table-layout: fixed;
-        th {
-            border-right: 1px solid var(--color-light);
-            padding: 0.5em 1em;
-            background: var(--color-light);
-            border-bottom: 1px solid var(--color-light);
-        }
-        td {
-            border-right: 1px solid var(--color-light);
-            padding: 0.5em 1em;
-        }
-        caption {
-            border-right: 1px solid var(--color-light);
-            padding: 0.5em 1em;
-            border-bottom: none;
-        }
-        thead {
-            th {
-                background: var(--color-extra);
-            }
-        }
-    }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin-top: 1.2em;
-        margin-bottom: 0.6em;
-        line-height: 1.35;
-        position: relative;
-    }
-    h1 {
-        font-size: 1.8em;
-    }
-    h2 {
-        font-size: 1.6em;
-    }
-    h3 {
-        font-size: 1.4em;
-    }
-    h4 {
-        font-size: 1.2em;
-    }
-    h5 {
-        font-size: 1em;
-    }
-    h6 {
-        font-size: 1em;
-    }
-
-    ::-webkit-calendar-picker-indicator {
-        filter: invert(50%);
-    }
-    em {
-        // color: #000;
-        font-weight: inherit;
-        position: relative;
-        &:after {
-            position: absolute;
-            top: 0.65em;
-            left: 0;
-            width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            pointer-events: none;
-            color: var(--color-base);
-            content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
-        }
-    }
-    ul.toc {
-        li {
-            list-style-type: none;
-            a {
-                text-decoration: none;
-                border: 0;
-                list-style-type: none;
-            }
-        }
-    }
-    @include chinese;
-}
diff --git a/src/views/page/index/markdown-reset.scss b/src/views/page/index/markdown-reset.scss
deleted file mode 100644
index d0dabe1..0000000
--- a/src/views/page/index/markdown-reset.scss
+++ /dev/null
@@ -1,677 +0,0 @@
-
-/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
-@media (prefers-color-scheme: dark) {
-    .markdown-body {
-        /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
-        color-scheme: dark;
-    }
-}
-/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
-@media (prefers-color-scheme: light) {
-    // https://verytoolz.com/blog/03bfb3598f/
-    .markdown-body {
-        /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
-        color-scheme: light;
-        /* 定义CSS自定义属性，用于主题色彩管理 */
-        --color-fg-default: #24292f; // 文本色-默认 - 主要文本颜色
-        --color-fg-muted: #57606a; // 文本色-柔和 - 次要文本颜色
-        --color-fg-subtle: #6e7781; // 文本色-微妙 - 最淡的文本颜色
-        --color-canvas-default: #ffffff; // 底色-默认 - 主要背景颜色
-        --color-canvas-subtle: #f6f8fa; // 底色-微妙 - 次要背景颜色
-        --color-border-default: #d0d7de; // 边框色-默认 - 主要边框颜色
-        --color-border-muted: hsla(210, 18%, 87%, 1); // 边框色-柔和 - 次要边框颜色
-        --color-neutral-muted: rgba(175, 184, 193, 0.2); // 边框色-中性 - 中性边框颜色
-        --color-accent-fg: #0969da; // 文本强调色 - 强调文本颜色
-        --color-accent-emphasis: #0969da; // 背景强调色 - 强调背景颜色
-        --color-attention-subtle: #fff8c5; // 背景注意色 - 注意提示背景色
-        --color-danger-fg: #cf222e; // 文本危险色 - 危险/错误文本颜色
-        --color-mark-default: rgb(255, 255, 0); // mark 默认色 - 标记默认背景色
-        --color-mark-fg: rgb(255, 187, 0); // mark 强调色 - 标记强调背景色
-    }
-}
-
-/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
-.markdown-body {
-    /* 防止iOS Safari自动调整文本大小 */
-    -webkit-text-size-adjust: 100%;
-    /* 防止IE自动调整文本大小 */
-    -ms-text-size-adjust: 100%;
-    /* 优化文本渲染质量，提升可读性 */
-    text-rendering: optimizelegibility;
-    /* 重置外边距为0 */
-    margin: 0;
-    /* 允许长单词在必要时换行，防止溢出 */
-    word-wrap: break-word;
-    /* 使用CSS变量设置文本颜色 */
-    color: var(--color-fg-muted);
-    /* 伪元素before - 用于清除浮动 */
-    &::before {
-        /* 设置为表格显示模式，用于清除浮动 */
-        display: table;
-        /* 空内容，仅用于布局 */
-        content: "";
-    }
-    /* 伪元素after - 用于清除浮动 */
-    &::after {
-        /* 设置为表格显示模式，用于清除浮动 */
-        display: table;
-        /* 清除左右浮动 */
-        clear: both;
-        /* 空内容，仅用于布局 */
-        content: "";
-    }
-    /* 第一个子元素 - 移除顶部外边距 */
-    > *:first-child {
-        /* 强制移除顶部外边距，避免不必要的空白 */
-        margin-top: 0 !important;
-    }
-    /* 最后一个子元素 - 移除底部外边距 */
-    > *:last-child {
-        /* 强制移除底部外边距，避免不必要的空白 */
-        margin-bottom: 0 !important;
-    }
-    /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
-    p,
-    blockquote,
-    ul,
-    ol,
-    dl,
-    table,
-    hr,
-    form,
-    pre,
-    details {
-        /* 移除顶部外边距，避免重复间距 */
-        margin-top: 0;
-        /* 设置底部外边距为1em，保持适当间距 */
-        margin-bottom: 1em;
-    }
-    /* 引用块内部元素间距处理 */
-    blockquote {
-        /* 引用块内第一个子元素 - 移除顶部外边距 */
-        & > :first-child {
-            margin-top: 0;
-        }
-        /* 引用块内最后一个子元素 - 移除底部外边距 */
-        & > :last-child {
-            margin-bottom: 0;
-        }
-    }
-    /* 统一显示成块状元素 - 确保这些元素独占一行 */
-    details,
-    figcaption,
-    figure {
-        /* 设置为块级元素，独占一行显示 */
-        display: block;
-    }
-    /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
-    audio,
-    canvas,
-    video {
-        /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-        display: inline-block;
-    }
-    /* 按钮内部间距统一 - 移除Firefox默认内边距 */
-    button::-moz-focus-inner,
-    input::-moz-focus-inner {
-        /* 移除Firefox浏览器按钮和输入框的内部内边距 */
-        padding: 0;
-        /* 移除Firefox浏览器按钮和输入框的内部边框 */
-        border: 0;
-    }
-    /* 定义元素显示为斜体 - 术语定义样式 */
-    dfn {
-        /* 设置字体为斜体，用于术语定义 */
-        font-style: italic;
-    }
-    /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
-    table {
-        /* 合并表格边框，相邻单元格边框合并为一条 */
-        border-collapse: collapse;
-        /* 设置表格单元格间距为0 */
-        border-spacing: 0;
-        /* 设置为块级元素，可以设置宽高 */
-        display: block;
-        /* 宽度根据内容自适应 */
-        width: max-content;
-        /* 最大宽度不超过父容器 */
-        max-width: 100%;
-        /* 内容溢出时显示滚动条 */
-        overflow: auto;
-    }
-    /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
-    [draggable] {
-        /* 设置鼠标悬停时显示移动光标 */
-        cursor: move;
-    }
-    /* 加粗元素 - 粗体文本样式 */
-    b,
-    strong {
-        /* 设置字体粗细，使用CSS变量或默认600 */
-        font-weight: var(--base-text-weight-semibold, 600);
-    }
-    /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
-    abbr,
-    acronym {
-        /* 移除底部边框 */
-        border-bottom: none;
-        /* 设置字体变体为正常 */
-        font-variant: normal;
-        /* 设置虚线下划线装饰 */
-        text-decoration: underline dotted;
-    }
-    /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
-    abbr {
-        /* 设置鼠标悬停时显示帮助光标 */
-        cursor: help;
-    }
-    /* 一致的 del 样式 - 删除线文本样式 */
-    del {
-        /* 设置文本装饰为删除线 */
-        text-decoration: line-through;
-    }
-    /* a标签去除下划线 - 链接样式处理 */
-    a {
-        /* 默认移除下划线，保持页面简洁 */
-        text-decoration: none;
-        /* 没有href属性的链接样式 */
-        &:not([href]) {
-            /* 继承父元素颜色 */
-            color: inherit;
-            /* 移除下划线装饰 */
-            text-decoration: none;
-        }
-        /* 鼠标悬停时显示下划线 */
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-    /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
-    ins {
-        /* 移除下划线装饰，保持页面简洁 */
-        text-decoration: none;
-    }
-    /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
- * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
- * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
- * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
- * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
- */
-    u,
-    .typo-u {
-        /* 设置文本装饰为下划线，用于专名号显示 */
-        text-decoration: underline;
-    }
-    /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
-    [hidden] {
-        /* 强制隐藏元素，优先级最高 */
-        display: none !important;
-    }
-    /* 伸缩框显示为列表元素 - 详情框摘要样式 */
-    summary {
-        /* 设置为列表项显示，显示为可点击的列表项 */
-        display: list-item;
-    }
-    /* 引用元素前后内容 - 移除默认引号 */
-    q:before,
-    q:after {
-        /* 移除引用元素前后的默认引号内容 */
-        content: "";
-    }
-    /* 表格标题和表头文本对齐 - 默认左对齐 */
-    caption,
-    th {
-        /* 设置文本左对齐 */
-        text-align: left;
-    }
-    /* 居中对齐的表格标题和表头 */
-    caption[align="center"],
-    th[align="center"] {
-        /* 设置文本居中对齐 */
-        text-align: center;
-    }
-    /* 特定元素字体粗细统一 - 地址、标题、引用等 */
-    address,
-    caption,
-    cite,
-    em,
-    th,
-    var {
-        /* 设置字体粗细为正常（400） */
-        font-weight: 400;
-    }
-    /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
-    mark {
-        /* 设置标记背景色，使用CSS变量 */
-        background: var(--color-mark-default);
-        // background: #fffdd1; // 备用背景色
-        // border-bottom: 1px solid #ffedce; // 备用底部边框
-        /* 设置内边距，增加标记的可读性 */
-        padding: 2px;
-
-        /* 激活状态的标记样式 */
-        &.active {
-            /* 激活时使用强调色背景 */
-            background: var(--color-mark-fg);
-        }
-        // margin: 0 5px; // 备用外边距
-    }
-    /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
-    h1 {
-        /* 设置上下外边距为0.67em */
-        margin: 0.67em 0;
-        /* 设置字体粗细，使用CSS变量或默认600 */
-        font-weight: var(--base-text-weight-semibold, 600);
-        /* 设置字体大小为2倍基础大小 */
-        font-size: 2em;
-    }
-    /* small字体缩小 - 小字体文本样式 */
-    small {
-        /* 设置字体大小为父元素的90% */
-        font-size: 90%;
-    }
-    /* 上下标显示 - 下标和上标文本样式 */
-    sub,
-    sup {
-        /* 设置字体大小为75% */
-        font-size: 75%;
-        /* 设置行高为0，避免影响行间距 */
-        line-height: 0;
-        /* 设置相对定位，用于精确控制位置 */
-        position: relative;
-        /* 设置垂直对齐为基线 */
-        vertical-align: baseline;
-    }
-    /* 上下标内链接样式 */
-    sub a,
-    sup a {
-        /* 设置左右内边距为0.1em */
-        padding: 0 0.1em;
-    }
-    /* 下标位置调整 */
-    sub {
-        /* 向下偏移0.25em */
-        bottom: -0.25em;
-    }
-    /* 上标位置调整 */
-    sup {
-        /* 向上偏移0.5em */
-        top: -0.5em;
-    }
-    /* 代码相关的字体大小统一 - 代码元素字体样式 */
-    code,
-    kbd,
-    pre,
-    samp,
-    pre tt {
-        /* 设置字体为等宽字体，便于代码阅读 */
-        font-family: monospace;
-        /* 设置字体大小为1em，保持一致性 */
-        font-size: 1em;
-    }
-    /* 去除默认边框 - 移除字段集和图片的默认边框 */
-    fieldset,
-    img {
-        /* 移除边框 */
-        border: 0;
-    }
-    /* 图片初始化样式 - 图片元素基础样式 */
-    img {
-        /* 设置边框样式为无 */
-        border-style: none;
-        /* 设置最大宽度为100%，防止溢出 */
-        max-width: 100%;
-        /* 设置盒模型为内容盒模型 */
-        box-sizing: content-box;
-        /* 设置左右外边距为自动，实现居中 */
-        margin: 0 auto;
-        /* 设置背景色，使用CSS变量 */
-        background-color: var(--color-canvas-default);
-    }
-    /* 可附标题内容元素的间距 - 图片容器样式 */
-    figure {
-        /* 设置上下外边距为1em，左右外边距为40px */
-        margin: 1em 40px;
-    }
-    /* 间隔线 - 水平分隔线样式 */
-    /* 一致化 horizontal rule - 统一水平分隔线样式 */
-    hr {
-        /* 设置盒模型为内容盒模型 */
-        box-sizing: content-box;
-        /* 隐藏溢出内容 */
-        overflow: hidden;
-        /* 设置背景为透明 */
-        background: transparent;
-        /* 设置底部边框，使用CSS变量 */
-        border-bottom: 1px solid var(--color-border-muted);
-        /* 设置高度为0.25em */
-        height: 0.25em;
-        /* 移除内边距 */
-        padding: 0;
-        /* 设置上下外边距为24px */
-        margin: 24px 0;
-        /* 设置背景色，使用CSS变量 */
-        background-color: var(--color-border-default);
-        /* 移除边框 */
-        border: 0;
-        /* 伪元素before - 用于清除浮动 */
-        &::before {
-            /* 设置为表格显示模式，用于清除浮动 */
-            display: table;
-            /* 空内容，仅用于布局 */
-            content: "";
-        }
-        /* 伪元素after - 用于清除浮动 */
-        &::after {
-            /* 设置为表格显示模式，用于清除浮动 */
-            display: table;
-            /* 清除左右浮动 */
-            clear: both;
-            /* 空内容，仅用于布局 */
-            content: "";
-        }
-    }
-
-    /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
-    button,
-    input,
-    select,
-    textarea {
-        /* 继承父元素的字体样式 */
-        font: inherit;
-        /* 移除外边距 */
-        margin: 0;
-        /* 设置溢出为可见 */
-        overflow: visible;
-        /* 继承父元素的字体族 */
-        font-family: inherit;
-        /* 继承父元素的字体大小 */
-        font-size: inherit;
-        /* 继承父元素的行高 */
-        line-height: inherit;
-    }
-    /* 外观显示为按钮 - 按钮类型输入框样式 */
-    [type="button"],
-    [type="reset"],
-    [type="submit"] {
-        /* 设置WebKit浏览器按钮外观 */
-        -webkit-appearance: button;
-        /* 设置标准按钮外观，提高兼容性 */
-        appearance: button;
-    }
-    /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
-    [type="checkbox"],
-    [type="radio"] {
-        /* 设置盒模型为边框盒模型 */
-        box-sizing: border-box;
-        /* 移除内边距 */
-        padding: 0;
-    }
-    /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
-    [type="number"]::-webkit-inner-spin-button,
-    [type="number"]::-webkit-outer-spin-button {
-        /* 设置高度为自动，适应内容 */
-        height: auto;
-    }
-    /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
-    [type="search"]::-webkit-search-cancel-button,
-    [type="search"]::-webkit-search-decoration {
-        /* 移除WebKit浏览器搜索框默认样式 */
-        -webkit-appearance: none;
-    }
-    /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
-    ::-webkit-input-placeholder {
-        /* 继承父元素颜色 */
-        color: inherit;
-        /* 设置透明度为0.54，创建半透明效果 */
-        opacity: 0.54;
-    }
-    /* 文件选择按钮样式统一 - 文件上传按钮样式 */
-    ::-webkit-file-upload-button {
-        /* 设置WebKit浏览器按钮外观 */
-        -webkit-appearance: button;
-        /* 继承父元素字体样式 */
-        font: inherit;
-    }
-    /* 占位符显示统一 - 通用占位符样式 */
-    ::placeholder {
-        /* 设置占位符颜色，使用CSS变量 */
-        color: var(--color-fg-subtle);
-        /* 设置完全不透明 */
-        opacity: 1;
-    }
-    /* table内的td,th去除留白 - 表格单元格样式 */
-    td,
-    th {
-        /* 移除表格单元格内边距 */
-        padding: 0;
-    }
-    /* 伸缩框鼠标显示 - 详情框摘要样式 */
-    details summary {
-        /* 设置鼠标悬停时显示手型光标 */
-        cursor: pointer;
-    }
-
-    /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
-    details:not([open]) > *:not(summary) {
-        /* 强制隐藏未展开详情框内的非摘要内容 */
-        display: none !important;
-    }
-    /* 按键显示 - 键盘按键样式 */
-    kbd {
-        /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
-        display: inline-block;
-        /* 设置内边距为3px上下，5px左右 */
-        padding: 3px 5px;
-        /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
-        font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-        /* 设置行高为10px */
-        line-height: 10px;
-        /* 设置文本颜色，使用CSS变量 */
-        color: var(--color-fg-default);
-        /* 设置垂直对齐为中间 */
-        vertical-align: middle;
-        /* 设置背景色，使用CSS变量 */
-        background-color: var(--color-canvas-subtle);
-        /* 设置边框为1px实线，使用CSS变量 */
-        border: solid 1px var(--color-neutral-muted);
-        /* 设置底部边框颜色，使用CSS变量 */
-        border-bottom-color: var(--color-neutral-muted);
-        /* 设置圆角为6px */
-        border-radius: 6px;
-        /* 设置内阴影，创建按键凹陷效果 */
-        box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
-    }
-    /* 清除浮动工具类 - 清除浮动伪元素 */
-    .clearfix:before,
-    .clearfix:after {
-        /* 空内容，仅用于布局 */
-        content: "";
-        /* 设置为表格显示模式，用于清除浮动 */
-        display: table;
-    }
-    /* 清除浮动工具类 - after伪元素 */
-    .clearfix:after {
-        /* 清除左右浮动 */
-        clear: both;
-    }
-    /* 清除浮动工具类 - 主容器 */
-    .clearfix {
-        /* 触发IE的hasLayout属性，用于清除浮动 */
-        zoom: 1;
-    }
-    /* 强制文本换行 - 文本换行工具类 */
-    .textwrap,
-    .textwrap td,
-    .textwrap th {
-        /* 允许长单词在必要时换行，防止溢出 */
-        word-wrap: break-word;
-        /* 强制在任意字符间换行，防止溢出 */
-        word-break: break-all;
-    }
-    /* 文本换行表格 - 固定表格布局 */
-    .textwrap-table {
-        /* 设置表格布局为固定，提高渲染性能 */
-        table-layout: fixed;
-    }
-    /* 无序列表样式 - 项目符号列表 */
-    ul {
-        /* 重置左边距为0 */
-        margin-left: 0;
-        /* 重置左内边距为0 */
-        padding-left: 0;
-        /* 设置左边距为2em，创建缩进效果 */
-        margin-left: 2em;
-        /* 设置列表样式为实心圆点 */
-        list-style: disc;
-    }
-    /* 有序列表样式 - 数字列表 */
-    ol {
-        /* 重置左边距为0 */
-        margin-left: 0;
-        /* 重置左内边距为0 */
-        padding-left: 0;
-        /* 设置左边距为2em，创建缩进效果 */
-        margin-left: 2em;
-        /* 设置列表样式为数字 */
-        list-style: decimal;
-        /* 列表项样式 */
-        li {
-            /* 设置左内边距为0.4em，增加数字与文本间距 */
-            padding-left: 0.4em;
-        }
-    }
-    /* 相邻列表项间距 - 列表项之间的间距 */
-    li + li {
-        /* 设置顶部外边距为0.25em，增加列表项间距 */
-        margin-top: 0.25em;
-    }
-    /* 嵌套列表样式 - 列表项内的子列表 */
-    li {
-        /* 无序子列表样式 */
-        ul {
-            /* 设置底部外边距为0.8em */
-            margin-bottom: 0.8em;
-            /* 设置左边距为2em，创建嵌套缩进 */
-            margin-left: 2em;
-            /* 设置列表样式为空心圆点 */
-            list-style: circle;
-            /* 三级无序列表样式 */
-            li {
-                ul {
-                    /* 设置列表样式为实心方块 */
-                    list-style: square;
-                }
-            }
-        }
-        /* 有序子列表样式 */
-        ol {
-            /* 设置底部外边距为0.8em */
-            margin-bottom: 0.8em;
-            /* 设置左边距为2em，创建嵌套缩进 */
-            margin-left: 2em;
-        }
-    }
-    /* 任务列表项样式 - 待办事项列表项 */
-    .task-list-item {
-        /* 移除列表样式，不显示项目符号 */
-        list-style-type: none;
-        /* 设置相对定位，用于绝对定位子元素 */
-        position: relative;
-        /* 第一个子输入框样式 */
-        > input {
-            /* 第一个子元素右边距 */
-            &:nth-child(1) {
-                /* 设置右边距为6px */
-                margin-right: 6px;
-            }
-        }
-        /* 标签样式 */
-        label {
-            /* 设置字体粗细为正常（400） */
-            font-weight: 400;
-        }
-        /* 拖拽手柄样式 */
-        .handle {
-            /* 隐藏拖拽手柄 */
-            display: none;
-        }
-        /* 复选框样式 */
-        input[type="checkbox"] {
-            /* 设置宽度为0.9em */
-            width: 0.9em;
-            /* 设置高度为0.9em */
-            height: 0.9em;
-            /* 设置绝对定位 */
-            position: absolute;
-            /* 向左偏移1.3em */
-            left: -1.3em;
-            /* 向下偏移0.35em */
-            top: 0.35em;
-        }
-    }
-    /* 启用的任务列表项样式 */
-    .task-list-item.enabled {
-        /* 标签样式 */
-        label {
-            /* 设置鼠标悬停时显示手型光标 */
-            cursor: pointer;
-        }
-    }
-    /* 相邻任务列表项间距 */
-    .task-list-item + .task-list-item {
-        /* 设置顶部外边距为3px */
-        margin-top: 3px;
-    }
-    /* 包含任务列表的容器样式 */
-    .contains-task-list {
-        // margin-left: 0.6em; // 备用左边距
-        /* 从右到左文本方向样式 */
-        &:dir(rtl) {
-            .task-list-item {
-                input[type="checkbox"] {
-                    /* 设置复选框外边距，适配RTL布局 */
-                    margin: 0 -1.6em 0.25em 0.2em;
-                }
-            }
-        }
-    }
-
-    /* 目录样式 - 表格目录容器 */
-    .toc {
-        /* 重置左边距为0 */
-        margin-left: 0;
-    }
-
-    /* 定义列表样式 - 描述列表容器 */
-    dl {
-        /* 设置为块级元素 */
-        display: block;
-        /* 设置块级起始外边距为1em */
-        margin-block-start: 1em;
-        /* 设置块级结束外边距为1em */
-        margin-block-end: 1em;
-        /* 设置内联起始外边距为0px */
-        margin-inline-start: 0px;
-        /* 设置内联结束外边距为0px */
-        margin-inline-end: 0px;
-        /* 设置Unicode双向算法为隔离 */
-        unicode-bidi: isolate;
-        /* 定义术语样式 */
-        dt {
-            /* 设置为块级元素 */
-            display: block;
-            /* 设置Unicode双向算法为隔离 */
-            unicode-bidi: isolate;
-        }
-        /* 定义描述样式 */
-        dd {
-            /* 设置为块级元素 */
-            display: block;
-            /* 设置内联起始外边距为40px，创建缩进效果 */
-            margin-inline-start: 40px;
-            /* 设置Unicode双向算法为隔离 */
-            unicode-bidi: isolate;
-        }
-    }
-}
diff --git a/src/views/page/index/style.scss b/src/views/page/index/style.scss
deleted file mode 100644
index 0ac4c77..0000000
--- a/src/views/page/index/style.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-/* 首页样式 */
-
-.hero-section {
-    position: relative;
-    overflow: hidden;
-}
-
-.hero-section::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('/images/hero-bg.svg') no-repeat center center;
-    background-size: cover;
-    opacity: 0.1;
-    z-index: 0;
-}
-
-.hero-content {
-    position: relative;
-    z-index: 1;
-}
-
-.feature-card {
-    transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-    transform: translateY(-5px);
-}
-
-.feature-card .material-symbols-light--article,
-.feature-card .material-symbols-light--bookmark,
-.feature-card .material-symbols-light--person {
-    transition: all 0.3s ease;
-}
-
-.feature-card:hover .material-symbols-light--article,
-.feature-card:hover .material-symbols-light--bookmark,
-.feature-card:hover .material-symbols-light--person {
-    transform: scale(1.1);
-}
-
-.stats-section {
-    position: relative;
-}
-
-.stats-section::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('/images/stats-bg.svg') no-repeat center center;
-    background-size: cover;
-    opacity: 0.05;
-    z-index: 0;
-}
-
-.stat-item {
-    transition: all 0.3s ease;
-}
-
-.stat-item:hover {
-    transform: scale(1.05);
-}
-
-.user-dashboard {
-    position: relative;
-}
-
-.user-dashboard::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('/images/dashboard-bg.svg') no-repeat center center;
-    background-size: cover;
-    opacity: 0.03;
-    z-index: 0;
-}
-
-.avatar {
-    transition: all 0.3s ease;
-}
-
-.avatar:hover {
-    transform: scale(1.05);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .hero-section {
-        padding: 4rem 0;
-    }
-
-    .hero-content h1 {
-        font-size: 2.5rem;
-    }
-
-    .features-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .stats-grid {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .user-info {
-        text-align: center;
-        margin-bottom: 1.5rem;
-    }
-
-    .user-actions {
-        justify-content: center;
-    }
-}
-
-@media (max-width: 480px) {
-    .hero-content h1 {
-        font-size: 2rem;
-    }
-
-    .hero-content p {
-        font-size: 1rem;
-    }
-
-    .stats-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .hero-actions {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .hero-actions a {
-        width: 100%;
-        text-align: center;
-    }
-}
\ No newline at end of file
diff --git a/src/views/page/login/index.pug b/src/views/page/login/index.pug
new file mode 100644
index 0000000..e09a86f
--- /dev/null
+++ b/src/views/page/login/index.pug
@@ -0,0 +1,9 @@
+extends /layouts/empty.pug
+
+block pageHead
+
+block pageContent
+  form(action="/login" method="post") 
+    input(type="text" name="username" placeholder="用户名")
+    input(type="password" name="password" placeholder="密码")
+    button(type="submit") 登录
\ No newline at end of file