From 84b45f785de73f820a7d5f5143844c461f0bb4de Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Thu, 14 Aug 2025 19:55:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E9=A3=8E=E6=A0=BC?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/assets/global.css | 385 ++++++++++++++++----------------
 frontend_nuxt/nuxt.config.ts    |   2 +-
 frontend_nuxt/utils/markdown.js |  11 +-
 3 files changed, 203 insertions(+), 195 deletions(-)

diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index 68235b999..3b35a006e 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -1,86 +1,86 @@
 :root {
-	--primary-color-hover: rgb(9, 95, 105);
-	--primary-color: rgb(10, 110, 120);
-	--primary-color-disabled: rgba(93, 152, 156, 0.5);
-	--header-height: 60px;
-	--header-background-color: white;
-	--header-border-color: lightgray;
-	--header-text-color: black;
-	--menu-background-color: white;
-	--background-color: white;
-	/* --background-color-blur: rgba(255, 255, 255, 0.57); */
-	--background-color-blur: var(--background-color);
-	--menu-border-color: lightgray;
-	--normal-border-color: lightgray;
-	--menu-selected-background-color: rgba(208, 250, 255, 0.659);
-	--menu-text-color: black;
-	--scroller-background-color: rgba(130, 175, 180, 0.5);
-	--normal-background-color: rgb(241, 241, 241);
-	--lottery-background-color: rgb(241, 241, 241);
-	--login-background-color: rgb(248, 248, 248);
-	--login-background-color-hover: #e0e0e0;
-	--text-color: black;
-	--blockquote-text-color: #6a737d;
-	--menu-width: 200px;
-	--page-max-width: 1200px;
-	--page-max-width-mobile: 900px;
-	--article-info-background-color: #f0f0f0;
-	--activity-card-background-color: #fafafa;
+  --primary-color-hover: rgb(9, 95, 105);
+  --primary-color: rgb(10, 110, 120);
+  --primary-color-disabled: rgba(93, 152, 156, 0.5);
+  --header-height: 60px;
+  --header-background-color: white;
+  --header-border-color: lightgray;
+  --header-text-color: black;
+  --menu-background-color: white;
+  --background-color: white;
+  /* --background-color-blur: rgba(255, 255, 255, 0.57); */
+  --background-color-blur: var(--background-color);
+  --menu-border-color: lightgray;
+  --normal-border-color: lightgray;
+  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
+  --menu-text-color: black;
+  --scroller-background-color: rgba(130, 175, 180, 0.5);
+  --normal-background-color: rgb(241, 241, 241);
+  --lottery-background-color: rgb(241, 241, 241);
+  --login-background-color: rgb(248, 248, 248);
+  --login-background-color-hover: #e0e0e0;
+  --text-color: black;
+  --blockquote-text-color: #6a737d;
+  --menu-width: 200px;
+  --page-max-width: 1200px;
+  --page-max-width-mobile: 900px;
+  --article-info-background-color: #f0f0f0;
+  --activity-card-background-color: #fafafa;
 }
 
-[data-theme="dark"] {
-	--header-background-color: #2b2b2b;
-	--header-border-color: #555;
-	--primary-color: rgb(17, 182, 197);
-	--primary-color-hover: rgb(13, 137, 151);
-	--header-text-color: white;
-	--menu-background-color: #333;
-	--background-color: #333;
-	/* --background-color-blur: #333333a4; */
-	--background-color-blur: var(--background-color);
-	--menu-border-color: #555;
-	--normal-border-color: #555;
-	--menu-selected-background-color: rgba(255, 255, 255, 0.1);
-	--menu-text-color: white;
-	--normal-background-color: #000000;
-	--lottery-background-color: #4e4e4e;
-	--login-background-color: #575757;
-	--login-background-color-hover: #717171;
-	--text-color: #eee;
-	--blockquote-text-color: #999;
-	--article-info-background-color: #747373;
-	--activity-card-background-color: #585858;
+[data-theme='dark'] {
+  --header-background-color: #2b2b2b;
+  --header-border-color: #555;
+  --primary-color: rgb(17, 182, 197);
+  --primary-color-hover: rgb(13, 137, 151);
+  --header-text-color: white;
+  --menu-background-color: #333;
+  --background-color: #333;
+  /* --background-color-blur: #333333a4; */
+  --background-color-blur: var(--background-color);
+  --menu-border-color: #555;
+  --normal-border-color: #555;
+  --menu-selected-background-color: rgba(255, 255, 255, 0.1);
+  --menu-text-color: white;
+  --normal-background-color: #000000;
+  --lottery-background-color: #4e4e4e;
+  --login-background-color: #575757;
+  --login-background-color-hover: #717171;
+  --text-color: #eee;
+  --blockquote-text-color: #999;
+  --article-info-background-color: #747373;
+  --activity-card-background-color: #585858;
 }
 
 body {
-	margin: 0;
-	padding: 0;
-	font-family: "Roboto", sans-serif;
-	background-color: var(--normal-background-color);
-	color: var(--text-color);
-	/* 禁止滚动 */
-	/* overflow: hidden;  */
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+  background-color: var(--normal-background-color);
+  color: var(--text-color);
+  /* 禁止滚动 */
+  /* overflow: hidden;  */
 }
 
 /*************************
  * Vditor 自定义皮肤覆写
  *************************/
 .vditor {
-	min-height: 200px;
+  min-height: 200px;
 }
 
 .vditor-toolbar--pin {
-	top: var(--header-height) !important;
+  top: var(--header-height) !important;
 }
 
 .vditor-panel {
-	min-width: 400px;
+  min-width: 400px;
 }
 
 .emoji {
-	width: 20px;
-	height: 20px;
-	vertical-align: middle;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
 }
 
 /* .vditor {
@@ -108,224 +108,223 @@ body {
  *************************/
 .info-content-text ul,
 .info-content-text ol {
-	padding-left: 1.5em;
+  padding-left: 1.5em;
 }
 
 .info-content-text h1,
 .info-content-text h2 {
-	border-bottom: 1px solid var(--normal-border-color);
-	padding-bottom: 0.3em;
-	margin-bottom: 0.8em;
+  border-bottom: 1px solid var(--normal-border-color);
+  padding-bottom: 0.3em;
+  margin-bottom: 0.8em;
 }
 
 .info-content-text {
-	word-break: break-word;
-	max-width: 100%;
+  word-break: break-word;
+  max-width: 100%;
 }
 
 .info-content-text blockquote {
-	margin: 1em 0;
-	padding-left: 1em;
-	border-left: 4px solid #d0d7de;
-	color: var(--blockquote-text-color);
+  margin: 1em 0;
+  padding-left: 1em;
+  border-left: 4px solid #d0d7de;
+  color: var(--blockquote-text-color);
 }
 
 .info-content-text pre {
-	display: flex;
-	background-color: var(--normal-background-color);
-	padding: 8px 12px;
-	border-radius: 4px;
-	line-height: 1.5;
-	position: relative;
+  display: flex;
+  background-color: var(--lottery-background-color);
+  padding: 8px 12px;
+  border-radius: 4px;
+  line-height: 1.5;
+  position: relative;
 }
 
 .info-content-text pre .line-numbers {
-	counter-reset: line-number 0;
-	width: 2em;
-	font-size: 13px;
-	position: sticky;
-	flex-shrink: 0;
-	font-family: "Maple Mono", monospace;
-	margin: 1em 0;
-	color: #888;
-	background-color: var(--normal-background-color);
-	border-right: 1px solid #888;
-	box-sizing: border-box;
-	padding-right: 0.5em;
-	text-align: end;
+  counter-reset: line-number 0;
+  width: 2em;
+  font-size: 13px;
+  position: sticky;
+  flex-shrink: 0;
+  font-family: 'Maple Mono', monospace;
+  margin: 1em 0;
+  color: #888;
+  border-right: 1px solid #888;
+  box-sizing: border-box;
+  padding-right: 0.5em;
+  text-align: end;
 }
 
 .info-content-text pre .line-numbers .line-number::before {
-	content: counter(line-number);
-	counter-increment: line-number;
+  content: counter(line-number);
+  counter-increment: line-number;
 }
 
 .info-content-text code {
-	font-family: "Maple Mono", monospace;
-	font-size: 13px;
-	border-radius: 4px;
-	white-space: no-wrap;
-	background-color: var(--normal-background-color);
-	color: var(--text-color);
+  font-family: 'Maple Mono', monospace;
+  font-size: 13px;
+  border-radius: 4px;
+  white-space: no-wrap;
+  background-color: var(--lottery-background-color);
+  color: var(--text-color);
 }
 
 .copy-code-btn {
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	font-size: 12px;
-	padding: 2px 6px;
-	border: none;
-	border-radius: 4px;
-	background-color: white;
-	opacity: 0.8;
-	color: black;
-	cursor: pointer;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  font-size: 12px;
+  padding: 2px 6px;
+  border: none;
+  border-radius: 4px;
+  background-color: white;
+  opacity: 0.8;
+  color: black;
+  cursor: pointer;
 }
 
 .copy-code-btn:hover {
-	opacity: 1;
+  opacity: 1;
 }
 
 .info-content-text a {
-	color: var(--primary-color);
-	text-decoration: none;
+  color: var(--primary-color);
+  text-decoration: none;
 }
 
 .info-content-text a:hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
 .info-content-text img {
-	max-width: 100%;
-	height: auto;
+  max-width: 100%;
+  height: auto;
 }
 
 .info-content-text table {
-	width: 100%;
-	max-width: 100%;
-	border-collapse: collapse;
-	margin: 1.2em 0;
-	font-size: 14px;
-	line-height: 1.45;
-	overflow-x: auto; /* 小屏可横向滚动 */
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  margin: 1.2em 0;
+  font-size: 14px;
+  line-height: 1.45;
+  overflow-x: auto; /* 小屏可横向滚动 */
 }
 
 .info-content-text thead th {
-	background-color: var(--primary-color);
-	color: #fff;
-	padding: 10px 14px;
-	text-align: left;
-	font-weight: 600;
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 600;
 }
 
-[data-theme="dark"] .info-content-text thead th {
-	background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
+[data-theme='dark'] .info-content-text thead th {
+  background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
 }
 
 .info-content-text tbody tr:nth-child(even) {
-	background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
+  background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
 }
 
-[data-theme="dark"] .info-content-text tbody tr:nth-child(even) {
-	background-color: rgba(255, 255, 255, 0.05);
+[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
 .info-content-text th,
 .info-content-text td {
-	border: 1px solid var(--menu-border-color);
-	padding: 8px 14px;
-	vertical-align: top;
+  border: 1px solid var(--menu-border-color);
+  padding: 8px 14px;
+  vertical-align: top;
 }
 
 .info-content-text tbody td {
-	color: var(--text-color);
+  color: var(--text-color);
 }
 
 /* 首列加粗，便于阅读 */
 .info-content-text tbody td:first-child {
-	font-weight: 500;
+  font-weight: 500;
 }
 
 /* 鼠标悬停行高亮 */
 .info-content-text tbody tr:hover {
-	background-color: var(--menu-selected-background-color);
-	transition: background-color 0.2s ease;
+  background-color: var(--menu-selected-background-color);
+  transition: background-color 0.2s ease;
 }
 
 @media (max-width: 768px) {
-	.vditor {
-		min-height: 100px;
-	}
+  .vditor {
+    min-height: 100px;
+  }
 
-	.vditor-toolbar {
-		overflow-x: auto;
-	}
+  .vditor-toolbar {
+    overflow-x: auto;
+  }
 
-	.about-content h1,
-	.info-content-text h1 {
-		font-size: 20px;
-	}
+  .about-content h1,
+  .info-content-text h1 {
+    font-size: 20px;
+  }
 
-	.about-content h2,
-	.info-content-text h2 {
-		font-size: 18px;
-	}
+  .about-content h2,
+  .info-content-text h2 {
+    font-size: 18px;
+  }
 
-	.about-content p,
-	.info-content-text p {
-		font-size: 14px;
-		margin-top: 3px;
-		margin-bottom: 3px;
-	}
+  .about-content p,
+  .info-content-text p {
+    font-size: 14px;
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
 
-	.vditor-toolbar--pin {
-		top: 0 !important;
-	}
+  .vditor-toolbar--pin {
+    top: 0 !important;
+  }
 
-	.about-content li,
-	.info-content-text li {
-		font-size: 14px;
-	}
+  .about-content li,
+  .info-content-text li {
+    font-size: 14px;
+  }
 
-	.info-content-text pre {
-		line-height: 1.5;
-	}
+  .info-content-text pre {
+    line-height: 1.5;
+  }
 
-	.vditor-panel {
-		position: relative;
-		min-width: 0;
-	}
+  .vditor-panel {
+    position: relative;
+    min-width: 0;
+  }
 }
 
 /* NProgress styles */
 #nprogress {
-	pointer-events: none;
+  pointer-events: none;
 }
 
 #nprogress .bar {
-	background: var(--primary-color);
-	position: fixed;
-	z-index: 1031;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 3px;
+  background: var(--primary-color);
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
 }
 
 #nprogress .peg {
-	display: block;
-	position: absolute;
-	right: 0;
-	width: 100px;
-	height: 100%;
-	box-shadow:
-		0 0 10px var(--primary-color),
-		0 0 5px var(--primary-color);
-	opacity: 1;
-	transform: rotate(3deg) translate(0px, -4px);
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow:
+    0 0 10px var(--primary-color),
+    0 0 5px var(--primary-color);
+  opacity: 1;
+  transform: rotate(3deg) translate(0px, -4px);
 }
 
 #nprogress .spinner {
-	display: none;
+  display: none;
 }
diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts
index 271ce21a1..7c16e17fc 100644
--- a/frontend_nuxt/nuxt.config.ts
+++ b/frontend_nuxt/nuxt.config.ts
@@ -12,7 +12,7 @@ export default defineNuxtConfig({
       twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
     },
   },
-  // Ensure Vditor styles load before our overrides in global.css
+  // 确保 Vditor 样式在 global.css 覆盖前加载
   css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
   app: {
     head: {
diff --git a/frontend_nuxt/utils/markdown.js b/frontend_nuxt/utils/markdown.js
index 3708853a6..4092c3dd8 100644
--- a/frontend_nuxt/utils/markdown.js
+++ b/frontend_nuxt/utils/markdown.js
@@ -1,5 +1,14 @@
 import hljs from 'highlight.js'
-import 'highlight.js/styles/github.css'
+if (typeof window !== 'undefined') {
+  const theme =
+    document.documentElement.dataset.theme ||
+    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+  if (theme === 'dark') {
+    import('highlight.js/styles/atom-one-dark.css')
+  } else {
+    import('highlight.js/styles/atom-one-light.css')
+  }
+}
 import MarkdownIt from 'markdown-it'
 import { toast } from '../main'
 import { tiebaEmoji } from './tiebaEmoji'