Skip to content

P
poc-fe
Commit af3bc72e authored by tyyin lan's avatar tyyin lan
Browse files
Options

chore: markdown parser调整

parent 1a0c546c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 285 additions and 1709 deletions
package.json
View file @ af3bc72e
......@@ -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",
"markdown-it-link-attributes": "^4.0.1",
"marked": "^15.0.0",
"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",
......
pnpm-lock.yaml
View file @ af3bc72e
......@@ -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:
specifier: ^14.1.0
version: 14.1.0
markdown-it-link-attributes:
specifier: ^4.0.1
version: 4.0.1
marked:
specifier: ^15.0.0
version: 15.0.0
marked-highlight:
specifier: ^2.2.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:
resolution: {integrity: sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==}
marked-highlight@2.2.1:
resolution: {integrity: sha512-SiCIeEiQbs9TxGwle9/OwbOejHCZsohQRaNTY2u8euEXYt2rYUFoiImUirThU3Gd/o6Q1gHGtH9qloHlbJpNIA==}
peerDependencies:
marked: '>=4 <16'
markdown-it@14.1.0:
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
marked@15.0.0:
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: {}
markdown-it@14.1.0:
marked-highlight@2.2.1(marked@15.0.0):
dependencies:
argparse: 2.0.1
entities: 4.5.0
linkify-it: 5.0.0
mdurl: 2.0.0
punycode.js: 2.3.1
uc.micro: 2.1.0
marked: 15.0.0
marked@15.0.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:
......
src/components/markdown-render/markdown-render.vue
View file @ af3bc72e
<script setup lang="ts">
import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
import MarkdownIt from 'markdown-it'
import mdKatex from '@traptitech/markdown-it-katex'
import mila from 'markdown-it-link-attributes'
import { computed, ref, watchEffect } from 'vue'
import { marked } from 'marked'
import { markedHighlight } from 'marked-highlight'
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()
const copyCodeText = ref('')
marked.use({ gfm: true, async: true }).use(
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))
const renderTextContent = ref('')
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 wrapStyle = computed(() => {
const articleContainerStyle = computed(() => {
return {
fontSize: props.fontSize,
color: props.color,
}
})
function highlightBlock(str: string, lang?: string) {
return (
'<pre class="code-block-wrapper">' +
'<div class="code-block-header">' +
`<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)
})
}
})
const textContentParser = throttle(
(text: string) => {
;(marked.parse(text) as Promise<string>).then((res) => {
renderTextContent.value = DOMPurify.sanitize(res)
})
}
}
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()
})
},
500,
{ leading: true, trailing: true },
)
onUnmounted(() => {
removeCopyEvents()
watchEffect(() => {
textContentParser(props.rawTextContent)
})
</script>
<template>
<div ref="mkrContainer" class="markdown-render-container">
<article class="markdown-body" :style="wrapStyle" v-html="renderTextContent" />
<div class="markdown-render-container">
<article class="markdown-body article-container" :style="articleContainerStyle" v-html="renderTextContent" />
</div>
</template>
<style lang="scss">
@import './style/highlight.scss';
@import './style/github-markdown.scss';
@import './style/custom-style.scss';
<style lang="scss" scoped>
.article-container {
letter-spacing: 0.1ch;
background-color: unset;
}
</style>
src/components/markdown-render/style/custom-style.scss deleted 100644 → 0
View file @ 1a0c546c
.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;
}
}
src/components/markdown-render/style/highlight.scss deleted 100644 → 0
View file @ 1a0c546c
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;
}
}
src/layout/components/sidebar/sidebar.vue
View file @ af3bc72e
......@@ -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', '个人设置'),
// key: 'PersonalSettings',
// icon: () => h(Me, { theme: 'outline', size: 14, strokeWidth: 3 }),
// },
{
label: () => h('div', t('personal_settings_module.personal_settings_title')),
key: 'PersonalSettings',
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">
{{ userStore.userInfo.nickName || t('common_module.not_login_text') }}
<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>
......
src/locales/langs/en.yaml
View file @ af3bc72e
......@@ -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'
src/locales/langs/zh-cn.yaml
View file @ af3bc72e
......@@ -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: '请输入个人简介'
src/locales/langs/zh-hk.yaml
View file @ af3bc72e
......@@ -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: '請輸入個人簡介'
src/store/modules/system-language.ts
View file @ af3bc72e
......@@ -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',
// key: 'en',
// },
{
label: 'English',
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
}
},
......
types/locales.d.ts
View file @ af3bc72e
......@@ -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
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment