chore: markdown parser调整

af3bc72e · tyyin lan · 1a0c546c · af3bc72e · af3bc72e · af3bc72e
Commit af3bc72e authored Nov 13, 2024 by tyyin lan
13 changed files
--- a/package.json
+++ b/package.json
@@ -19,16 +19,17 @@
    "@icon-park/vue-next": "^1.4.2",
    "@iconify/vue": "^4.1.2",
    "@microsoft/fetch-event-source": "^2.0.1",
-    "@traptitech/markdown-it-katex": "^3.6.0",
    "@unocss/reset": "^0.61.9",
    "@vueuse/core": "^10.11.1",
    "axios": "^1.7.7",
    "clipboardy": "^4.0.0",
    "dayjs": "^1.11.13",
+    "dompurify": "^3.2.0",
+    "github-markdown-css": "^5.7.0",
    "highlight.js": "^11.10.0",
    "lodash-es": "^4.17.21",
-    "markdown-it": "^14.1.0",
+    "marked": "^15.0.0",
-    "markdown-it-link-attributes": "^4.0.1",
+    "marked-highlight": "^2.2.1",
    "mitt": "^3.0.1",
    "nanoid": "^5.0.7",
    "pinia": "^2.2.2",
@@ -45,8 +46,6 @@
    "@commitlint/types": "^19.5.0",
    "@intlify/unplugin-vue-i18n": "^4.0.0",
    "@types/lodash-es": "^4.17.12",
-    "@types/markdown-it": "^14.1.2",
-    "@types/markdown-it-link-attributes": "^3.0.5",
    "@types/node": "^20.16.5",
    "@types/spark-md5": "^3.0.4",
    "@types/validator": "^13.12.2",

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
      '@microsoft/fetch-event-source':
        specifier: ^2.0.1
        version: 2.0.1
-      '@traptitech/markdown-it-katex':
-        specifier: ^3.6.0
-        version: 3.6.0
      '@unocss/reset':
        specifier: ^0.61.9
        version: 0.61.9
@@ -35,18 +32,24 @@ importers:
      dayjs:
        specifier: ^1.11.13
        version: 1.11.13
+      dompurify:
+        specifier: ^3.2.0
+        version: 3.2.0
+      github-markdown-css:
+        specifier: ^5.7.0
+        version: 5.7.0
      highlight.js:
        specifier: ^11.10.0
        version: 11.10.0
      lodash-es:
        specifier: ^4.17.21
        version: 4.17.21
-      markdown-it:
+      marked:
-        specifier: ^14.1.0
+        specifier: ^15.0.0
-        version: 14.1.0
+        version: 15.0.0
-      markdown-it-link-attributes:
+      marked-highlight:
-        specifier: ^4.0.1
+        specifier: ^2.2.1
-        version: 4.0.1
+        version: 2.2.1(marked@15.0.0)
      mitt:
        specifier: ^3.0.1
        version: 3.0.1
@@ -90,12 +93,6 @@ importers:
      '@types/lodash-es':
        specifier: ^4.17.12
        version: 4.17.12
-      '@types/markdown-it':
-        specifier: ^14.1.2
-        version: 14.1.2
-      '@types/markdown-it-link-attributes':
-        specifier: ^3.0.5
-        version: 3.0.5
      '@types/node':
        specifier: ^20.16.5
        version: 20.16.5
@@ -993,9 +990,6 @@ packages:
    cpu: [x64]
    os: [win32]
-  '@traptitech/markdown-it-katex@3.6.0':
-    resolution: {integrity: sha512-CnJzTWxsgLGXFdSrWRaGz7GZ1kUUi8g3E9HzJmeveX1YwVJavrKYqysktfHZQsujdnRqV5O7g8FPKEA/aeTkOQ==}
  '@trysound/sax@0.2.0':
    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
    engines: {node: '>=10.13.0'}
@@ -1009,24 +1003,12 @@ packages:
  '@types/katex@0.16.7':
    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
-  '@types/linkify-it@5.0.0':
-    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
  '@types/lodash-es@4.17.12':
    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
  '@types/lodash@4.17.7':
    resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
-  '@types/markdown-it-link-attributes@3.0.5':
-    resolution: {integrity: sha512-VZ2BGN3ywUg7mBD8W6PwR8ChpOxaQSBDbLqPgvNI+uIra3zY2af1eG/3XzWTKjEraTWskMKnZqZd6m1fDF67Bg==}
-  '@types/markdown-it@14.1.2':
-    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
-  '@types/mdurl@2.0.0':
-    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
  '@types/node@20.16.5':
    resolution: {integrity: sha512-VwYCweNo3ERajwy0IUlqqcyZ8/A7Zwa9ZP3MnENWcB11AejO+tLy3pu850goUW2FC/IJMdZUfKpX/yxL1gymCA==}
@@ -1644,6 +1626,9 @@ packages:
    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
    engines: {node: '>= 4'}
+  dompurify@3.2.0:
+    resolution: {integrity: sha512-AMdOzK44oFWqHEi0wpOqix/fUNY707OmoeFDnbi3Q5I8uOpy21ufUA5cDJPr0bosxrflOVD/H2DMSvuGKJGfmQ==}
  domutils@3.1.0:
    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
@@ -1915,6 +1900,10 @@ packages:
    engines: {node: '>=16'}
    hasBin: true
+  github-markdown-css@5.7.0:
+    resolution: {integrity: sha512-GoYhaqELL4YUjz4tZ00PQ4JzFQkMfrBVuEeRB8W74HoikHWNiaGqSgynpwJEc+xom5uf04qoD/tUSS6ziZltaQ==}
+    engines: {node: '>=10'}
  glob-parent@5.1.2:
    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
    engines: {node: '>= 6'}
@@ -2171,10 +2160,6 @@ packages:
    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
    engines: {'0': node >= 0.2.0}
-  katex@0.16.11:
-    resolution: {integrity: sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==}
-    hasBin: true
  keyv@4.5.4:
    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
@@ -2199,9 +2184,6 @@ packages:
  lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-  linkify-it@5.0.0:
-    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
  lint-staged@15.2.10:
    resolution: {integrity: sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==}
    engines: {node: '>=18.12.0'}
@@ -2280,11 +2262,14 @@ packages:
  magic-string@0.30.12:
    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
-  markdown-it-link-attributes@4.0.1:
+  marked-highlight@2.2.1:
-    resolution: {integrity: sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==}
+    resolution: {integrity: sha512-SiCIeEiQbs9TxGwle9/OwbOejHCZsohQRaNTY2u8euEXYt2rYUFoiImUirThU3Gd/o6Q1gHGtH9qloHlbJpNIA==}
+    peerDependencies:
+      marked: '>=4 <16'
-  markdown-it@14.1.0:
+  marked@15.0.0:
-    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    resolution: {integrity: sha512-0mouKmBROJv/WSHJBPZZyYofUgawMChnD5je/g+aOBXsHDjb/IsnTQj7mnhQZu+qPJmRQ0ecX3mLGEUm3BgwYA==}
+    engines: {node: '>= 18'}
    hasBin: true
  mathml-tag-names@2.1.3:
@@ -2296,9 +2281,6 @@ packages:
  mdn-data@2.0.30:
    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-  mdurl@2.0.0:
-    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
  meow@12.1.1:
    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
    engines: {node: '>=16.10'}
@@ -2623,10 +2605,6 @@ packages:
  proxy-from-env@1.1.0:
    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-  punycode.js@2.3.1:
-    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
-    engines: {node: '>=6'}
  punycode@2.3.1:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
@@ -2978,9 +2956,6 @@ packages:
    engines: {node: '>=14.17'}
    hasBin: true
-  uc.micro@2.1.0:
-    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
  ufo@1.5.4:
    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
@@ -3985,10 +3960,6 @@ snapshots:
  '@rollup/rollup-win32-x64-msvc@4.21.3':
    optional: true
-  '@traptitech/markdown-it-katex@3.6.0':
-    dependencies:
-      katex: 0.16.11
  '@trysound/sax@0.2.0': {}
  '@types/conventional-commits-parser@5.0.0':
@@ -3999,25 +3970,12 @@ snapshots:
  '@types/katex@0.16.7': {}
-  '@types/linkify-it@5.0.0': {}
  '@types/lodash-es@4.17.12':
    dependencies:
      '@types/lodash': 4.17.7
  '@types/lodash@4.17.7': {}
-  '@types/markdown-it-link-attributes@3.0.5':
-    dependencies:
-      '@types/markdown-it': 14.1.2
-  '@types/markdown-it@14.1.2':
-    dependencies:
-      '@types/linkify-it': 5.0.0
-      '@types/mdurl': 2.0.0
-  '@types/mdurl@2.0.0': {}
  '@types/node@20.16.5':
    dependencies:
      undici-types: 6.19.8
@@ -4801,6 +4759,8 @@ snapshots:
    dependencies:
      domelementtype: 2.3.0
+  dompurify@3.2.0: {}
  domutils@3.1.0:
    dependencies:
      dom-serializer: 2.0.0
@@ -5126,6 +5086,8 @@ snapshots:
      meow: 12.1.1
      split2: 4.2.0
+  github-markdown-css@5.7.0: {}
  glob-parent@5.1.2:
    dependencies:
      is-glob: 4.0.3
@@ -5332,10 +5294,6 @@ snapshots:
  jsonparse@1.3.1: {}
-  katex@0.16.11:
-    dependencies:
-      commander: 8.3.0
  keyv@4.5.4:
    dependencies:
      json-buffer: 3.0.1
@@ -5355,10 +5313,6 @@ snapshots:
  lines-and-columns@1.2.4: {}
-  linkify-it@5.0.0:
-    dependencies:
-      uc.micro: 2.1.0
  lint-staged@15.2.10:
    dependencies:
      chalk: 5.3.0
@@ -5444,16 +5398,11 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.0
-  markdown-it-link-attributes@4.0.1: {}
+  marked-highlight@2.2.1(marked@15.0.0):
-  markdown-it@14.1.0:
    dependencies:
-      argparse: 2.0.1
+      marked: 15.0.0
-      entities: 4.5.0
-      linkify-it: 5.0.0
+  marked@15.0.0: {}
-      mdurl: 2.0.0
-      punycode.js: 2.3.1
-      uc.micro: 2.1.0
  mathml-tag-names@2.1.3: {}
@@ -5461,8 +5410,6 @@ snapshots:
  mdn-data@2.0.30: {}
-  mdurl@2.0.0: {}
  meow@12.1.1: {}
  meow@13.2.0: {}
@@ -5710,8 +5657,6 @@ snapshots:
  proxy-from-env@1.1.0: {}
-  punycode.js@2.3.1: {}
  punycode@2.3.1: {}
  queue-microtask@1.2.3: {}
@@ -6075,8 +6020,6 @@ snapshots:
  typescript@5.6.2: {}
-  uc.micro@2.1.0: {}
  ufo@1.5.4: {}
  unconfig@0.5.5:

--- a/src/components/markdown-render/markdown-render.vue
+++ b/src/components/markdown-render/markdown-render.vue
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
-import MarkdownIt from 'markdown-it'
+import { marked } from 'marked'
-import mdKatex from '@traptitech/markdown-it-katex'
+import { markedHighlight } from 'marked-highlight'
-import mila from 'markdown-it-link-attributes'
+import { throttle } from 'lodash-es'
+import DOMPurify from 'dompurify'
 import hljs from 'highlight.js'
-import { useClipboard } from '@vueuse/core'
+import 'highlight.js/styles/panda-syntax-light.css'
+import 'github-markdown-css'
 interface Props {
  rawTextContent: string
@@ -18,106 +20,51 @@ const props = withDefaults(defineProps<Props>(), {
  color: '#333',
 })
-const mkrContainer = ref()
+marked.use({ gfm: true, async: true }).use(
-const copyCodeText = ref('')
+  markedHighlight({
+    emptyLangClass: 'hljs',
+    langPrefix: 'hljs language-',
+    highlight(code, lang, _info) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-const { copy: copyTool } = useClipboard({ source: copyCodeText })
+      return hljs.highlight(code, { language }).value
-const mdi = new MarkdownIt({
-  html: true,
-  linkify: true,
-  highlight(code: any, language: any) {
-    const validLang = !!(language && hljs.getLanguage(language))
-    if (validLang) {
-      const lang = language ?? ''
-      return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
-    }
-    return highlightBlock(hljs.highlightAuto(code).value, '')
    },
-})
+  }),
+)
-mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
-mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
-const renderTextContent = computed(() => {
-  if (props.rawTextContent) {
-    const urlRegex = /（(https?:\/\/[^\s]+)）/g
-    const rawTextContent = props.rawTextContent.replace(urlRegex, '($1)')
-    return mdi.render(rawTextContent)
-  }
-  return ''
+const renderTextContent = ref('')
-})
-const wrapStyle = computed(() => {
+const articleContainerStyle = computed(() => {
  return {
    fontSize: props.fontSize,
    color: props.color,
  }
 })
-function highlightBlock(str: string, lang?: string) {
+const textContentParser = throttle(
-  return (
+  (text: string) => {
-    '<pre class="code-block-wrapper">' +
+    ;(marked.parse(text) as Promise<string>).then((res) => {
-    '<div class="code-block-header">' +
+      renderTextContent.value = DOMPurify.sanitize(res)
-    `<span class="code-block-header__lang">${lang}</span>` +
-    '<span class="code-block-header__copy">复制代码</span>' +
-    '</div>' +
-    `<code class="hljs code-block-body ${lang}">${str}</code>` +
-    '</pre>'
-  )
-}
-function addCopyEvents() {
-  if (mkrContainer.value) {
-    const copyBtn = mkrContainer.value.querySelectorAll('.code-block-header__copy')
-    copyBtn.forEach((btn: HTMLSpanElement) => {
-      btn.addEventListener('click', () => {
-        const code = btn.parentElement?.nextElementSibling?.textContent
-        if (code) {
-          copyTool(code).then(() => {
-            btn.textContent = '复制成功'
-            setTimeout(() => (btn.textContent = '复制代码'), 1000)
-          })
-        }
    })
-    })
+  },
-  }
+  500,
-}
+  { leading: true, trailing: true },
+)
-function removeCopyEvents() {
-  if (mkrContainer.value) {
-    const copyBtn = mkrContainer.value.querySelectorAll('.code-block-header__copy')
-    copyBtn.forEach((btn: HTMLSpanElement) => {
-      btn.removeEventListener('click', () => {})
-    })
-  }
-}
-onMounted(() => {
-  addCopyEvents()
-})
-onUpdated(() => {
-  addCopyEvents()
-})
-onUnmounted(() => {
+watchEffect(() => {
-  removeCopyEvents()
+  textContentParser(props.rawTextContent)
 })
 </script>
 <template>
-  <div ref="mkrContainer" class="markdown-render-container">
+  <div class="markdown-render-container">
-    <article class="markdown-body" :style="wrapStyle" v-html="renderTextContent" />
+    <article class="markdown-body article-container" :style="articleContainerStyle" v-html="renderTextContent" />
  </div>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
-@import './style/highlight.scss';
+.article-container {
-@import './style/github-markdown.scss';
+  letter-spacing: 0.1ch;
-@import './style/custom-style.scss';
+  background-color: unset;
+}
 </style>
--- a/src/components/markdown-render/style/custom-style.scss
+++ b/src/components/markdown-render/style/custom-style.scss
-.markdown-body {
-  background-color: transparent;
-  font-size: 14px;
-  p {
-    white-space: pre-wrap;
-  }
-  ol {
-    list-style-type: decimal;
-  }
-  ul {
-    list-style-type: disc;
-  }
-  pre code,
-  pre tt {
-    line-height: 1.65;
-  }
-  .highlight pre,
-  pre {
-    background-color: #f4fafd;
-  }
-  code.hljs {
-    padding: 0;
-  }
-  .code-block {
-    &-wrapper {
-      position: relative;
-      padding-top: 24px;
-    }
-    &-header {
-      position: absolute;
-      top: 5px;
-      right: 0;
-      width: 100%;
-      padding: 0 1rem;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      color: #b3b3b3;
-      &__copy {
-        cursor: pointer;
-        margin-left: 0.5rem;
-        user-select: none;
-        &:hover {
-          color: #65a665;
-        }
-      }
-    }
-  }
-}
-html.dark {
-  .message-reply {
-    .whitespace-pre-wrap {
-      white-space: pre-wrap;
-      word-break: break-all;
-      color: var(--n-text-color);
-    }
-  }
-  .highlight pre,
-  pre {
-    background-color: #282c34;
-  }
-}
--- a/src/components/markdown-render/style/github-markdown.scss
+++ b/src/components/markdown-render/style/github-markdown.scss
--- a/src/components/markdown-render/style/highlight.scss
+++ b/src/components/markdown-render/style/highlight.scss
-html.dark {
-  pre code.hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 1em;
-  }
-  code.hljs {
-    padding: 3px 5px;
-  }
-  .hljs {
-    color: #abb2bf;
-    background: #282c34;
-  }
-  .hljs-keyword,
-  .hljs-operator,
-  .hljs-pattern-match {
-    color: #f92672;
-  }
-  .hljs-function,
-  .hljs-pattern-match .hljs-constructor {
-    color: #61aeee;
-  }
-  .hljs-function .hljs-params {
-    color: #a6e22e;
-  }
-  .hljs-function .hljs-params .hljs-typing {
-    color: #fd971f;
-  }
-  .hljs-module-access .hljs-module {
-    color: #7e57c2;
-  }
-  .hljs-constructor {
-    color: #e2b93d;
-  }
-  .hljs-constructor .hljs-string {
-    color: #9ccc65;
-  }
-  .hljs-comment,
-  .hljs-quote {
-    color: #b18eb1;
-    font-style: italic;
-  }
-  .hljs-doctag,
-  .hljs-formula {
-    color: #c678dd;
-  }
-  .hljs-deletion,
-  .hljs-name,
-  .hljs-section,
-  .hljs-selector-tag,
-  .hljs-subst {
-    color: #e06c75;
-  }
-  .hljs-literal {
-    color: #56b6c2;
-  }
-  .hljs-addition,
-  .hljs-attribute,
-  .hljs-meta .hljs-string,
-  .hljs-regexp,
-  .hljs-string {
-    color: #98c379;
-  }
-  .hljs-built_in,
-  .hljs-class .hljs-title,
-  .hljs-title.class_ {
-    color: #e6c07b;
-  }
-  .hljs-attr,
-  .hljs-number,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-pseudo,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable {
-    color: #d19a66;
-  }
-  .hljs-bullet,
-  .hljs-link,
-  .hljs-meta,
-  .hljs-selector-id,
-  .hljs-symbol,
-  .hljs-title {
-    color: #61aeee;
-  }
-  .hljs-emphasis {
-    font-style: italic;
-  }
-  .hljs-strong {
-    font-weight: 700;
-  }
-  .hljs-link {
-    text-decoration: underline;
-  }
-}
-html {
-  pre code.hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 1em;
-  }
-  code.hljs {
-    padding: 3px 5px;
-    &::-webkit-scrollbar {
-      height: 4px;
-    }
-  }
-  .hljs {
-    color: #383a42;
-    background: #fafafa;
-  }
-  .hljs-comment,
-  .hljs-quote {
-    color: #a0a1a7;
-    font-style: italic;
-  }
-  .hljs-doctag,
-  .hljs-formula,
-  .hljs-keyword {
-    color: #a626a4;
-  }
-  .hljs-deletion,
-  .hljs-name,
-  .hljs-section,
-  .hljs-selector-tag,
-  .hljs-subst {
-    color: #e45649;
-  }
-  .hljs-literal {
-    color: #0184bb;
-  }
-  .hljs-addition,
-  .hljs-attribute,
-  .hljs-meta .hljs-string,
-  .hljs-regexp,
-  .hljs-string {
-    color: #50a14f;
-  }
-  .hljs-attr,
-  .hljs-number,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-pseudo,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable {
-    color: #986801;
-  }
-  .hljs-bullet,
-  .hljs-link,
-  .hljs-meta,
-  .hljs-selector-id,
-  .hljs-symbol,
-  .hljs-title {
-    color: #4078f2;
-  }
-  .hljs-built_in,
-  .hljs-class .hljs-title,
-  .hljs-title.class_ {
-    color: #c18401;
-  }
-  .hljs-emphasis {
-    font-style: italic;
-  }
-  .hljs-strong {
-    font-weight: 700;
-  }
-  .hljs-link {
-    text-decoration: underline;
-  }
-}
--- a/src/layout/components/sidebar/sidebar.vue
+++ b/src/layout/components/sidebar/sidebar.vue
@@ -2,7 +2,7 @@
 import { computed, h, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Plus, Logout } from '@icon-park/vue-next'
+import { Plus, Logout, Me } from '@icon-park/vue-next'
 import type { MenuOption } from 'naive-ui'
 import { useUserStore } from '@/store/modules/user'
 // import LanguageSetting from '@/components/language-setting/language-setting.vue'
@@ -47,11 +47,11 @@ const menuOptions = computed<MenuOption[]>(() => {
 const userConfigOptions = computed(() => {
  return [
-    // {
+    {
-    //   label: () => h('div', '个人设置'),
+      label: () => h('div', t('personal_settings_module.personal_settings_title')),
-    //   key: 'PersonalSettings',
+      key: 'PersonalSettings',
-    //   icon: () => h(Me, { theme: 'outline', size: 14, strokeWidth: 3 }),
+      icon: () => h(Me, { theme: 'outline', size: 14, strokeWidth: 3 }),
-    // },
+    },
    {
      label: () => h('div', t('common_module.logout')),
      key: 'Logout',
@@ -135,8 +135,10 @@ function handleMenuValueChange(key: string) {
          >
            <n-avatar round :size="40" object-fit="cover" :src="userStore.userInfo.avatarUrl || defaultAvatar" />
-            <div class="ml-3 line-clamp-1 max-w-[140px] flex-1 select-none break-all text-base">
+            <div class="ml-3 max-w-[140px] flex-1 select-none break-all text-base">
+              <n-ellipsis :tooltip="{ placement: 'top', width: 220 }">
                {{ userStore.userInfo.nickName || t('common_module.not_login_text') }}
+              </n-ellipsis>
            </div>
          </div>
        </n-dropdown>

--- a/src/locales/langs/en.yaml
+++ b/src/locales/langs/en.yaml
@@ -82,6 +82,13 @@ common_module:
  view_file: 'View file'
  total_file: '1 file in total | {count} files in total'
  expired_identity: 'Your identity has expired. Please login again'
+  avatar: 'Avatar'
+  mobile_phone_number: 'Mobile phone number'
+  email: 'Email'
+  password: 'Password'
+  language: 'Language'
+  change: 'Change'
+  bind: 'Bind'
  dialogue_module:
    continue_question_message: 'You can keep asking questions'
@@ -425,3 +432,23 @@ applications_square_module:
  create_application_btn_text: 'Create application'
  all_application_btn_text: 'All applications'
  immediate_use_btn_text: 'Immediate use'
+personal_settings_module:
+  personal_settings_title: 'Personal settings'
+  basic_information_setting: 'Basic information setting'
+  account_nickname: 'Account nickname'
+  personal_profile: 'Personal profile'
+  click_bind_email: 'Click Bind Email'
+  click_to_set_password: 'Click to set Password'
+  language_setting: 'Language setting'
+  language_setting_doc: 'Set your preferred language for the interface and AI responses.'
+  email_binding: 'Email binding'
+  password_change: 'Password change'
+  new_password: 'New password'
+  please_enter_your_new_password: 'Please enter your new password'
+  confirm_new_password: 'Confirm new password'
+  please_enter_confirm_new_password: 'Please enter Confirm new password'
+  the_password_contains_a_maximum_of_6_characters: 'The password contains a maximum of 6 characters'
+  verify_that_the_new_password_is_inconsistent_with_the_new_password: 'Verify that the new password is inconsistent with the new password'
+  please_enter_the_account_nickname: 'Please enter the account nickname'
+  please_enter_a_personal_profile: 'Please enter a personal profile'
--- a/src/locales/langs/zh-cn.yaml
+++ b/src/locales/langs/zh-cn.yaml
@@ -81,6 +81,13 @@ common_module:
  view_file: '查看文件'
  total_file: '共{count}个文件'
  expired_identity: '身份已过期，请重新登录'
+  avatar: '头像'
+  mobile_phone_number: '手机号'
+  email: '邮箱'
+  password: '密码'
+  language: '语言'
+  change: '更换'
+  bind: '绑定'
  dialogue_module:
    continue_question_message: '你可以继续提问'
@@ -423,3 +430,23 @@ applications_square_module:
  create_application_btn_text: '创建应用'
  all_application_btn_text: '所有应用'
  immediate_use_btn_text: '立即使用'
+personal_settings_module:
+  personal_settings_title: '个人设置'
+  basic_information_setting: '基础信息设置'
+  account_nickname: '账号昵称'
+  personal_profile: '个人简介'
+  click_bind_email: '点击绑定邮箱'
+  click_to_set_password: '点击设置密码'
+  language_setting: '语言设置'
+  language_setting_doc: '设定您的首选语言，用于界面和AI回应。'
+  email_binding: '邮箱绑定'
+  password_change: '密码修改'
+  new_password: '新密码'
+  please_enter_your_new_password: '请输入新密码'
+  confirm_new_password: '确认新密码'
+  please_enter_confirm_new_password: '请输入确定新密码'
+  the_password_contains_a_maximum_of_6_characters: '密码长度不能小于6位'
+  verify_that_the_new_password_is_inconsistent_with_the_new_password: '确认新密码与新密码不一致'
+  please_enter_the_account_nickname: '请输入账号昵称'
+  please_enter_a_personal_profile: '请输入个人简介'
--- a/src/locales/langs/zh-hk.yaml
+++ b/src/locales/langs/zh-hk.yaml
@@ -81,6 +81,13 @@ common_module:
  view_file: '查看文件'
  total_file: '共{count}個文件'
  expired_identity: '身份已過期，請重新登錄'
+  avatar: '頭像'
+  mobile_phone_number: '手機號'
+  email: '郵箱'
+  password: '密碼'
+  language: '語言'
+  change: '更換'
+  bind: '綁定'
  dialogue_module:
    continue_question_message: '你可以繼續提問'
@@ -423,3 +430,23 @@ applications_square_module:
  create_application_btn_text: '創建應用'
  all_application_btn_text: '所有應用'
  immediate_use_btn_text: '立即使用'
+personal_settings_module:
+  personal_settings_title: '個人設置'
+  basic_information_setting: '基礎信息設置'
+  account_nickname: '賬號昵稱'
+  personal_profile: '個人簡介'
+  click_bind_email: '點擊綁定郵箱'
+  click_to_set_password: '點擊設置密碼'
+  language_setting: '語言設置'
+  language_setting_doc: '設定您的首選語言，用於界面和AI回應。'
+  email_binding: '郵箱綁定'
+  password_change: '密碼修改'
+  new_password: '新密碼'
+  please_enter_your_new_password: '請輸入新密碼'
+  confirm_new_password: '確認新密碼'
+  please_enter_confirm_new_password: '請輸入確定新密碼'
+  the_password_contains_a_maximum_of_6_characters: '密碼長度不能小於6位'
+  verify_that_the_new_password_is_inconsistent_with_the_new_password: '確認新密碼與新密碼不一致'
+  please_enter_the_account_nickname: '請輸入賬號昵稱'
+  please_enter_a_personal_profile: '請輸入個人簡介'
--- a/src/store/modules/system-language.ts
+++ b/src/store/modules/system-language.ts
@@ -4,7 +4,7 @@ import { defaultLocale } from '@/locales/index'
 interface SystemLanguageState {
  currentLanguageInfo: {
-    key: string
+    key: I18n.LangType
    label: string
  }
@@ -23,10 +23,10 @@ const defaultLanguageOptions = [
    label: '中文繁體',
    key: 'zh-HK',
  },
-  // {
+  {
-  //   label: 'English',
+    label: 'English',
-  //   key: 'en',
+    key: 'en',
-  // },
+  },
 ]
 const localeKey = ss.get('i18nextLng') || defaultLocale
@@ -47,7 +47,7 @@ export const useSystemLanguageStore = defineStore('system-language-store', {
      ss.set('i18nextLng', key)
      this.currentLanguageInfo = this.languageOptions.find((optionItem) => optionItem.key === key) as {
-        key: string
+        key: I18n.LangType
        label: string
      }
    },

--- a/src/views/personal-settings/personal-settings.vue
+++ b/src/views/personal-settings/personal-settings.vue
--- a/types/locales.d.ts
+++ b/types/locales.d.ts
@@ -82,6 +82,13 @@ declare namespace I18n {
      view_file: string
      total_file: string
      expired_identity: string
+      avatar: string
+      mobile_phone_number: string
+      email: string
+      password: string
+      language: string
+      change: string
+      bind: string
      dialogue_module: {
        continue_question_message: string
@@ -116,6 +123,25 @@ declare namespace I18n {
      }
    }
+    router_title_module: {
+      login: string
+      server_error: string
+      universal: string
+      home: string
+      personal: string
+      app_setting: string
+      agent_application: string
+      share_application: string
+      knowledge: string
+      upload_knowledge_document: string
+      knowledge_document_list: string
+      knowledge_document_detail: string
+      multi_model_dialogue: string
+      explore: string
+      application_square: string
+      personal_settings: string
+    }
    login_module: {
      app_welcome_words: string
      please_enter_your_account_number: string
@@ -151,25 +177,6 @@ declare namespace I18n {
      interrupt_the_conversation_and_apply_the_history_prompt: string
    }
-    router_title_module: {
-      login: string
-      server_error: string
-      universal: string
-      home: string
-      personal: string
-      app_setting: string
-      agent_application: string
-      share_application: string
-      knowledge: string
-      upload_knowledge_document: string
-      knowledge_document_list: string
-      knowledge_document_detail: string
-      multi_model_dialogue: string
-      explore: string
-      application_square: string
-      personal_settings: string
-    }
    personal_space_module: {
      title: string
      create_btn_text: string
@@ -439,5 +446,26 @@ declare namespace I18n {
      all_application_btn_text: string
      immediate_use_btn_text: string
    }
+    personal_settings_module: {
+      personal_settings_title: string
+      basic_information_setting: string
+      account_nickname: string
+      personal_profile: string
+      click_bind_email: string
+      click_to_set_password: string
+      language_setting: string
+      language_setting_doc: string
+      email_binding: string
+      password_change: string
+      new_password: string
+      please_enter_your_new_password: string
+      confirm_new_password: string
+      please_enter_confirm_new_password: string
+      the_password_contains_a_maximum_of_6_characters: string
+      verify_that_the_new_password_is_inconsistent_with_the_new_password: string
+      please_enter_the_account_nickname: string
+      please_enter_a_personal_profile: string
+    }
  }
 }