From 73b9dcf0cd8b204391f65eeadf1434eeecf7dabb Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Thu, 7 Aug 2025 20:07:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=93=8D=E4=BD=9Cldrs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/Dropdown.vue      |  7 +--
 frontend_nuxt/components/MenuComponent.vue |  4 --
 frontend_nuxt/main.js                      |  4 +-
 frontend_nuxt/nuxt.config.ts               | 13 ++++-
 frontend_nuxt/package-lock.json            | 64 ++++++++++++++++++++++
 frontend_nuxt/package.json                 |  6 +-
 frontend_nuxt/pages/index.vue              | 61 ++++++++++++++-------
 frontend_nuxt/plugins/ldrs.client.ts       | 12 ++++
 frontend_nuxt/utils/markdown.js            | 23 +++++++-
 9 files changed, 158 insertions(+), 36 deletions(-)
 create mode 100644 frontend_nuxt/plugins/ldrs.client.ts

diff --git a/frontend_nuxt/components/Dropdown.vue b/frontend_nuxt/components/Dropdown.vue
index ef495c829..61d2040ef 100644
--- a/frontend_nuxt/components/Dropdown.vue
+++ b/frontend_nuxt/components/Dropdown.vue
@@ -147,11 +147,8 @@
 
 <script>
 import { ref, computed, watch, onMounted } from "vue"
-import { hatch } from "ldrs"
 import { isMobile } from "~/utils/screen"
-if (process.client) {
-  hatch.register()
-}
+
 
 export default {
   name: "BaseDropdown",
@@ -255,7 +252,7 @@ export default {
       }
     })
 
-    onMounted(() => {
+    onMounted(async () => {
       if (!props.remote) {
         loadOptions()
       }
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index f4f4d644b..703a277ed 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -117,10 +117,6 @@ import { authState } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { watch } from 'vue'
 import { API_BASE_URL } from '~/main'
-import { hatch } from 'ldrs'
-if (process.client) {
-  hatch.register()
-}
 
 export default {
   name: 'MenuComponent',
diff --git a/frontend_nuxt/main.js b/frontend_nuxt/main.js
index 28d5e5a4c..3db594ee5 100644
--- a/frontend_nuxt/main.js
+++ b/frontend_nuxt/main.js
@@ -1,6 +1,4 @@
-export const API_DOMAIN = 'https://www.open-isle.com'
-export const API_PORT = ''
-export const API_BASE_URL = ''
+export const API_BASE_URL = 'http://127.0.0.1:8081'
 export const GOOGLE_CLIENT_ID = '777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com'
 export const GITHUB_CLIENT_ID = 'Ov23liVkO1NPAX5JyWxJ'
 export const DISCORD_CLIENT_ID = '1394985417044000779'
diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts
index a3aa5ec17..b7098ecfa 100644
--- a/frontend_nuxt/nuxt.config.ts
+++ b/frontend_nuxt/nuxt.config.ts
@@ -2,5 +2,16 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   ssr: true,
-  css: ['~/assets/global.css', '~/assets/toast.css']
+  css: ['~/assets/global.css', '~/assets/toast.css'],
+  app: {
+    head: {
+      link: [
+        {
+          rel: 'stylesheet',
+          href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
+          referrerpolicy: 'no-referrer'
+        }
+      ]
+    }
+  }
 })
diff --git a/frontend_nuxt/package-lock.json b/frontend_nuxt/package-lock.json
index 90feae947..4ec1d54d7 100644
--- a/frontend_nuxt/package-lock.json
+++ b/frontend_nuxt/package-lock.json
@@ -6,7 +6,9 @@
     "": {
       "name": "frontend_nuxt",
       "dependencies": {
+        "highlight.js": "^11.11.1",
         "ldrs": "^1.0.0",
+        "markdown-it": "^14.1.0",
         "nuxt": "latest"
       }
     },
@@ -2760,6 +2762,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/ast-kit": {
       "version": "2.1.1",
       "license": "MIT",
@@ -5142,6 +5150,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "license": "MIT"
@@ -5672,6 +5689,15 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listhen": {
       "version": "1.9.0",
       "license": "MIT",
@@ -5823,6 +5849,23 @@
         "source-map-js": "^1.2.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "license": "MIT",
@@ -5834,6 +5877,12 @@
       "version": "2.12.2",
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/merge-options": {
       "version": "3.0.4",
       "license": "MIT",
@@ -8044,6 +8093,15 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "license": "BSD-3-Clause",
@@ -9338,6 +9396,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/ufo": {
       "version": "1.6.1",
       "license": "MIT"
diff --git a/frontend_nuxt/package.json b/frontend_nuxt/package.json
index ea1633c28..04c737dff 100644
--- a/frontend_nuxt/package.json
+++ b/frontend_nuxt/package.json
@@ -8,7 +8,9 @@
     "start": "nuxt start"
   },
   "dependencies": {
-    "nuxt": "latest",
-    "ldrs": "^1.0.0"
+    "highlight.js": "^11.11.1",
+    "ldrs": "^1.0.0",
+    "markdown-it": "^14.1.0",
+    "nuxt": "latest"
   }
 }
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index a03ed7cdb..334c3381f 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -119,12 +119,7 @@ import TagSelect from '~/components/TagSelect.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
-import { hatch } from 'ldrs'
 import { isMobile } from '~/utils/screen'
-if (process.client) {
-  hatch.register()
-}
-
 
 export default {
   name: 'HomePageView',
@@ -133,10 +128,15 @@ export default {
     TagSelect,
     ArticleTags,
     ArticleCategory,
-    SearchDropdown
+    SearchDropdown,
+    ClientOnly: () => import('vue').then(m => m.defineAsyncComponent(() => import('vue').then(() => ({ template: '<slot />' }))))
   },
   setup() {
     const route = useRoute()
+
+    /**
+     * -------- 1. PARAMS & REFS --------
+     */
     const selectedCategory = ref('')
     if (route.query.category) {
       const c = decodeURIComponent(route.query.category)
@@ -151,6 +151,7 @@ export default {
         .map(v => decodeURIComponent(v))
         .map(v => (isNaN(v) ? v : Number(v)))
     }
+
     const tagOptions = ref([])
     const categoryOptions = ref([])
     const isLoadingPosts = ref(false)
@@ -168,8 +169,19 @@ export default {
     const pageSize = 10
     const allLoaded = ref(false)
 
-    // Backend now returns comment counts directly
+    /**
+     * -------- 2. CLIENT‑SIDE ONLY: LDRS REGISTER --------
+     * 这里使用动态 import 避免 SSR 阶段触发 HTMLElement 未定义错误。
+     */
+    onMounted(async () => {
+      // 首次加载
+      fetchContent()
+      await loadOptions()
+    })
 
+    /**
+     * -------- 3. FETCH OPTION HELPERS --------
+     */
     const loadOptions = async () => {
       if (selectedCategory.value && !isNaN(selectedCategory.value)) {
         try {
@@ -233,6 +245,9 @@ export default {
       return url
     }
 
+    /**
+     * -------- 4. FETCH CORE --------
+     */
     const fetchPosts = async (reset = false) => {
       if (reset) {
         page.value = 0
@@ -351,21 +366,16 @@ export default {
 
     const fetchContent = async (reset = false) => {
       if (selectedTopic.value === '排行榜') {
-          fetchRanking(reset)
-        } else if (selectedTopic.value === '最新回复') {
-          fetchLatestReply(reset)
-        } else {
-          fetchPosts(reset)
-        }
+        fetchRanking(reset)
+      } else if (selectedTopic.value === '最新回复') {
+        fetchLatestReply(reset)
+      } else {
+        fetchPosts(reset)
+      }
     }
 
     useScrollLoadMore(fetchContent)
 
-    onMounted(async () => {
-      fetchContent()
-      await loadOptions()
-    })
-
     watch([selectedCategory, selectedTags], () => {
       fetchContent(true)
     })
@@ -374,9 +384,20 @@ export default {
       fetchContent(true)
     })
 
-    const sanitizeDescription = (text) => stripMarkdown(text)
+    const sanitizeDescription = text => stripMarkdown(text)
 
-    return { topics, selectedTopic, articles, sanitizeDescription, isLoadingPosts, selectedCategory, selectedTags, tagOptions, categoryOptions, isMobile }
+    return {
+      topics,
+      selectedTopic,
+      articles,
+      sanitizeDescription,
+      isLoadingPosts,
+      selectedCategory,
+      selectedTags,
+      tagOptions,
+      categoryOptions,
+      isMobile
+    }
   }
 }
 </script>
diff --git a/frontend_nuxt/plugins/ldrs.client.ts b/frontend_nuxt/plugins/ldrs.client.ts
new file mode 100644
index 000000000..66d8221c7
--- /dev/null
+++ b/frontend_nuxt/plugins/ldrs.client.ts
@@ -0,0 +1,12 @@
+// plugins/ldrs.client.ts
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin(async () => {
+  // 动态引入，防止打包时把 ldrs 拉进 SSR bundle
+  const { hatch, helix, spiral } = await import('ldrs')
+
+  // 想用几个就注册几个
+  hatch.register()
+  helix.register()
+  spiral.register()
+})
diff --git a/frontend_nuxt/utils/markdown.js b/frontend_nuxt/utils/markdown.js
index fc49b20c5..1f45c7761 100644
--- a/frontend_nuxt/utils/markdown.js
+++ b/frontend_nuxt/utils/markdown.js
@@ -1,5 +1,26 @@
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github.css'
+
+const md = new MarkdownIt({
+  html: false,
+  linkify: true,
+  breaks: true,
+  highlight: (str, lang) => {
+    let code = ''
+    if (lang && hljs.getLanguage(lang)) {
+      code = hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
+    } else {
+      code = hljs.highlightAuto(str).value
+    }
+    return `<pre class="code-block"><button class="copy-code-btn">Copy</button><code class="hljs language-${lang || ''}">${code}</code></pre>`
+  }
+})
+
+// todo: 简单用正则操作一下，后续体验不佳可以采用 striptags 
 export function stripMarkdown(text) {
-  return text ? text.replace(/[#_*`>\-\[\]\(\)!]/g, '') : ''
+  const html = md.render(text)
+  return html.replace(/<\/?[^>]+>/g, '') 
 }
 
 export function stripMarkdownLength(text, length) {