diff --git a/src/static/common.less b/src/static/common.less
index 7f9f6a1..c4e32e7 100644
--- a/src/static/common.less
+++ b/src/static/common.less
@@ -215,6 +215,191 @@ body .el-dialog {
     overflow: auto;
   }
 }
+/* ===== Markdown 预览 ===== */
+.article-preview-drawer {
+  > .el-drawer__header {
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    padding: 14px 20px;
+    margin-bottom: 0;
+    background: var(--el-fill-color-light);
+
+    .el-drawer__title {
+      font-size: var(--el-font-size-base);
+      font-weight: var(--el-font-weight-primary);
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  > .el-drawer__body {
+    padding: 24px 32px;
+  }
+}
+
+.markdown-body {
+  font-size: 15px;
+  line-height: 1.8;
+  color: var(--el-text-color-primary);
+  word-break: break-word;
+
+  // 首个元素去掉顶部外边距
+  > :first-child { margin-top: 0 !important; }
+
+  // ── 标题 ───────────────────────────────────
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    line-height: 1.35;
+    margin: 1.4em 0 0.6em;
+    color: var(--el-text-color-primary);
+  }
+  h1 {
+    font-size: 1.8em;
+    padding-bottom: 0.4em;
+    border-bottom: 2px solid var(--el-border-color);
+  }
+  h2 {
+    font-size: 1.45em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+  h3 { font-size: 1.2em; }
+  h4 { font-size: 1.05em; }
+  h5 { font-size: 0.95em; }
+  h6 {
+    font-size: 0.9em;
+    color: var(--el-text-color-secondary);
+  }
+
+  // ── 段落 ───────────────────────────────────
+  p { margin: 0.85em 0; }
+
+  // ── 链接 ───────────────────────────────────
+  a {
+    color: var(--el-color-primary);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s, color 0.2s;
+    &:hover {
+      color: var(--el-color-primary-light-3);
+      border-bottom-color: var(--el-color-primary-light-3);
+    }
+  }
+
+  // ── 强调 ───────────────────────────────────
+  strong { font-weight: 600; }
+  em { font-style: italic; }
+  del { color: var(--el-text-color-secondary); text-decoration: line-through; }
+
+  // ── 内联代码 ───────────────────────────────
+  :not(pre) > code {
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.85em;
+    padding: 0.18em 0.45em;
+    border-radius: 4px;
+    background: var(--el-fill-color-dark);
+    color: var(--el-color-danger);
+    border: 1px solid var(--el-border-color-lighter);
+  }
+
+  // ── 代码块（亮色：浅灰背景；暗色：深背景） ───
+  pre {
+    background: #f6f8fa;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+    padding: 1em 1.2em;
+    overflow-x: auto;
+    margin: 1em 0;
+    code {
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.875em;
+      background: none;
+      border: none;
+      padding: 0;
+      color: #24292f;
+      line-height: 1.65;
+    }
+  }
+
+  // ── 引用块 ─────────────────────────────────
+  blockquote {
+    margin: 1em 0;
+    padding: 0.6em 1.1em;
+    border-left: 4px solid var(--el-color-primary-light-5);
+    background: var(--el-color-primary-light-9);
+    border-radius: 0 6px 6px 0;
+    color: var(--el-text-color-secondary);
+    > :first-child { margin-top: 0; }
+    > :last-child  { margin-bottom: 0; }
+  }
+
+  // ── 列表 ───────────────────────────────────
+  ul, ol {
+    margin: 0.7em 0;
+    padding-left: 1.8em;
+  }
+  li {
+    margin: 0.3em 0;
+    line-height: 1.75;
+    > ul, > ol { margin: 0.2em 0; }
+  }
+  ul > li { list-style-type: disc; }
+  ul > li > ul > li { list-style-type: circle; }
+  ol > li { list-style-type: decimal; }
+
+  // ── 水平线 ─────────────────────────────────
+  hr {
+    border: none;
+    border-top: 1px solid var(--el-border-color);
+    margin: 1.6em 0;
+  }
+
+  // ── 图片 ───────────────────────────────────
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    display: block;
+    margin: 1em auto;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  // ── 表格 ───────────────────────────────────
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+    font-size: 0.9em;
+    border: 1px solid var(--el-border-color);
+    border-radius: 6px;
+    overflow: hidden;
+    th, td {
+      padding: 0.6em 1em;
+      border: 1px solid var(--el-border-color-lighter);
+      text-align: left;
+      vertical-align: top;
+    }
+    th {
+      background: var(--el-fill-color-light);
+      font-weight: 600;
+      color: var(--el-text-color-regular);
+    }
+    tr:nth-child(even) td { background: var(--el-fill-color-lighter); }
+    tr:hover td { background: var(--el-color-primary-light-9); }
+  }
+}
+
+// 暗色模式：代码块使用深色背景
+html.dark .markdown-body {
+  pre {
+    background: #161b22;
+    border-color: rgba(255, 255, 255, 0.08);
+    code { color: #e6edf3; }
+  }
+
+  img { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
+}
+
+/* ========================================== */
+
 .el-tabs--card.nav-tabs {
   > .el-tabs__header {
     margin-bottom: 0;
diff --git a/src/views/system/Article.vue b/src/views/system/Article.vue
index f7a8afe..b07dc25 100644
--- a/src/views/system/Article.vue
+++ b/src/views/system/Article.vue
@@ -99,8 +99,9 @@
     v-model="markdownPreview.show"
     :title="markdownPreview.title"
     direction="rtl"
-    class="custom-drawer">
-    <div v-html="markdownPreview.content"></div>
+    size="50%"
+    class="custom-drawer article-preview-drawer">
+    <div class="markdown-body" v-html="markdownPreview.content"></div>
   </el-drawer>
 </div>
 </template>