Skip to content

feat(settings): add developer settings section and mermaid rendering switch #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gushishang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(settings): add developer settings section and mermaid rendering switch #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 37 additions & 61 deletions src/config/user.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,15 @@ type SupportedLocale = 'English' | 'Chinese' | 'German' | 'Japanese' | 'French'

function createLanguageOptions() {
return [
{
label: i18n.global.t('settings.languageOptions.chinese'),
value: 'Chinese',
},
{
label: i18n.global.t('settings.languageOptions.english'),
value: 'English',
},
{
label: i18n.global.t('settings.languageOptions.german'),
value: 'German',
},
{
label: i18n.global.t('settings.languageOptions.japanese'),
value: 'Japanese',
},
{
label: i18n.global.t('settings.languageOptions.french'),
value: 'French',
},
{ label: i18n.global.t('settings.languageOptions.chinese'), value: 'Chinese' },
{ label: i18n.global.t('settings.languageOptions.english'), value: 'English' },
{ label: i18n.global.t('settings.languageOptions.german'), value: 'German' },
{ label: i18n.global.t('settings.languageOptions.japanese'), value: 'Japanese' },
{ label: i18n.global.t('settings.languageOptions.french'), value: 'French' },
]
}

function createDebuggerOptions() {
function createBinaryOptions() {
return [
{ label: i18n.global.t('settings.debuggerOptions.on'), value: 'on' },
{ label: i18n.global.t('settings.debuggerOptions.off'), value: 'off' },
Expand All @@ -48,62 +33,63 @@ export const settingsConfig = [
options: createLanguageOptions(),
callBack: (newValue: string) => {
i18n.global.locale.value = newValue as SupportedLocale
const generalItems = settingsConfig[0]?.items || []
const languageItem = generalItems.find((item) => item.key === 'language')
const debuggerItem = generalItems.find((item) => item.key === 'debugger')
const languageItem = settingsConfig[0]?.items.find((item) => item.key === 'language')
if (languageItem?.type === 'link') {
languageItem.options = createLanguageOptions()
Comment on lines +36 to 38
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Refresh binary option labels after language switch

After changing i18n.global.locale.value, this callback only rebuilds the language selector options, but the mermaid and debugger selects keep the old createBinaryOptions() labels because their option arrays are created once at config initialization. In practice, switching language in Settings leaves those dropdowns translated in the previous locale until a reload/reopen, which is a regression from the previous behavior that refreshed debugger options on language change.

Useful? React with 👍 / 👎.

}
if (debuggerItem?.type === 'link') {
debuggerItem.options = createDebuggerOptions()
}
// Save language setting to localStorage
const userConfig = storageManager.getObj('userConfig')?.value || {}
userConfig.language = newValue
userConfig.languageManuallySelected = true
storageManager.setObj('userConfig', userConfig)
window.$Logger.logEvent({
category: 'Account',
action: 'Switch-Language',
label: newValue,
timestamp: Date.now(),
})
window.$Logger.logEvent({ category: 'Account', action: 'Switch-Language', label: newValue, timestamp: Date.now() })
showDialog('info', {
title: i18n.global.t('settings.languageChangeTitle'),
content: i18n.global.t('settings.languageChangeContent'),
positiveText: i18n.global.t('login.confirm'),
onPositiveClick: () => {
showNotification({
type: 'success',
title: i18n.global.t('settings.languageChangeTitle'),
})
},
onPositiveClick: () => showNotification({ type: 'success', title: i18n.global.t('settings.languageChangeTitle') }),
})
},
},
{
key: 'mermaid',
label: i18n.global.t('settings.mermaid'),
type: 'link',
value: 'on',
options: createBinaryOptions(),
},
],
},
{
title: 'developer',
items: [
{
key: 'apiBaseUrl',
label: i18n.global.t('settings.apiBaseUrl'),
type: 'input',
value: '',
},
{
key: 'staticBaseUrl',
label: i18n.global.t('settings.staticBaseUrl'),
type: 'input',
value: '',
},
{
key: 'debugger',
label: i18n.global.t('settings.debugger'),
type: 'link',
value: 'on',
options: createDebuggerOptions(),
options: createBinaryOptions(),
callBack: (newValue: string) => {
if (newValue === 'off') {
localStorage.removeItem('error_logs')
}
if (newValue === 'off') localStorage.removeItem('error_logs')
showDialog('warning', {
title: i18n.global.t('login.reLogin'),
content: i18n.global.t('login.reLoginContent'),
positiveText: i18n.global.t('login.confirm'),
onPositiveClick: async () => {
storageManager.remove('userInfo')
storageManager.remove('userAuthInfo')
window.$Logger.logEvent({
category: 'Account',
action: 'Toggle-Error-Logger',
label: newValue,
timestamp: Date.now(),
})
window.$Logger.logEvent({ category: 'Account', action: 'Toggle-Error-Logger', label: newValue, timestamp: Date.now() })
},
})
},
Expand All @@ -114,19 +100,9 @@ export const settingsConfig = [
type: 'button',
callBack: () => {
window.$ErrorLogger.exportToTxt()
window.$Logger.logEvent({
category: 'Account',
action: 'Export-Error-Logs',
timestamp: Date.now(),
})
window.$Logger.logEvent({ category: 'Account', action: 'Export-Error-Logs', timestamp: Date.now() })
},
},
// {
// key: "",
// label: "如题",
// type: "toggle",
// value: false,
// },
],
},
]
6 changes: 5 additions & 1 deletion src/i18n/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,11 @@ export default {
language: 'Sprache',
settings: 'Einstellungen',
general: 'Allgemein',
debugger: 'Protokolle sammeln',
developer: 'Entwickleroptionen',
mermaid: 'Mermaid-Rendering',
apiBaseUrl: 'Benutzerdefinierte Server-Base-URL',
staticBaseUrl: 'Bild-Host-Base-URL',
debugger: 'Debug-Protokolle sammeln',
exportLogs: 'Fehlerprotokolle exportieren',
languageChangeTitle: 'Sprache geändert',
languageChangeContent:
Expand Down
6 changes: 5 additions & 1 deletion src/i18n/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,11 @@ export default {
language: 'Language',
settings: 'settings',
general: 'General',
debugger: 'collect logs',
developer: 'Developer Options',
mermaid: 'Mermaid Rendering',
apiBaseUrl: 'Custom Server Base URL',
staticBaseUrl: 'Image Host Base URL',
debugger: 'Collect Debug Logs',
exportLogs: 'Export Error Logs',
languageChangeTitle: 'Language Changed',
languageChangeContent: 'Some features need to re-login to apply the new language completely',
Expand Down
6 changes: 5 additions & 1 deletion src/i18n/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,11 @@ export default {
language: 'Langue',
settings: 'Paramètres',
general: 'Général',
debugger: 'Collecter les journaux',
developer: 'Options développeur',
mermaid: 'Rendu Mermaid',
apiBaseUrl: 'URL de base serveur personnalisée',
staticBaseUrl: "URL de base de l'hébergeur d'images",
debugger: 'Collecter les journaux de débogage',
exportLogs: "Exporter les journaux d'erreurs",
languageChangeTitle: 'Langue modifiée',
languageChangeContent:
Expand Down
6 changes: 5 additions & 1 deletion src/i18n/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,11 @@ export default {
language: '言語',
settings: '設定',
general: '一般',
debugger: 'ログを収集',
developer: '開発者オプション',
mermaid: 'Mermaid レンダリング',
apiBaseUrl: 'カスタムサーバー Base URL',
staticBaseUrl: '画像ホスト Base URL',
debugger: 'デバッグログを収集',
exportLogs: 'エラーログをエクスポート',
languageChangeTitle: '言語が変更されました',
languageChangeContent:
Expand Down
4 changes: 4 additions & 0 deletions src/i18n/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,10 @@ export default {
language: '界面语言',
settings: '应用设置',
general: '通用设置',
developer: '开发人员选项',
mermaid: 'Mermaid 渲染',
apiBaseUrl: '自定义服务器 Base URL',
staticBaseUrl: '图床 Base URL',
debugger: '收集调试信息',
exportLogs: '导出错误日志',
languageChangeTitle: '语言已切换',
Expand Down
6 changes: 5 additions & 1 deletion src/services/pltxt2htm/advancedParser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import hljs from 'highlight.js'
import mermaid from 'mermaid'
import renderMathInElement from 'katex/contrib/auto-render/auto-render.js'
import 'katex/dist/katex.min.css'
import storageManager from '@storage/index'

interface ParseContext {
host?: string
Expand Down Expand Up @@ -115,7 +116,10 @@ async function parse(source: string, context: ParseContext = {}) {
})
}

await renderMermaidDiagrams(tempDiv)
const enableMermaid = (storageManager.getObj('userConfig')?.value?.mermaid ?? 'on') === 'on'
if (enableMermaid) {
await renderMermaidDiagrams(tempDiv)
}

tempDiv.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
hljs.highlightElement(block as HTMLElement)
Expand Down
8 changes: 6 additions & 2 deletions src/services/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ type PProjects = {
Image?: number
}

const apiUrl = import.meta.env.VITE_API_URL
const staticUrl = import.meta.env.VITE_STATIC_URL
const defaultApiUrl = import.meta.env.VITE_API_URL
const defaultStaticUrl = import.meta.env.VITE_STATIC_URL
const rootUrl = import.meta.env.VITE_ROOT_URL
const baseUrl = import.meta.env.VITE_BASE_URL

Expand All @@ -40,6 +40,10 @@ const baseUrl = import.meta.env.VITE_BASE_URL
*/

export function getPath(path: string): string {
const userConfig = storageManager.getObj('userConfig')?.value || {}
const apiUrl = (userConfig.apiBaseUrl as string) || defaultApiUrl
const staticUrl = (userConfig.staticBaseUrl as string) || defaultStaticUrl

const a = path
.replace(/\/@api/g, apiUrl)
.replace(/\/@static/g, staticUrl)
Expand Down
24 changes: 22 additions & 2 deletions src/views/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,18 @@
/>
</div>



<!-- Input Type -->
<div v-else-if="item.type === 'input'" class="item-control">
<n-input
:value="(item.value as string) || ''"
size="small"
clearable
style="width: 250px"
@update:value="handleInputChange(item, $event)"
/>
</div>
<!-- Toggle Type -->
<label v-else-if="item.type === 'toggle'" class="toggle-wrapper">
<input
Expand Down Expand Up @@ -61,14 +73,14 @@
<script setup lang="ts">
import { reactive, onActivated } from 'vue'
import { settingsConfig as s } from '../config/user.config'
import { NSelect } from 'naive-ui'
import { NInput, NSelect } from 'naive-ui'
import storageManager from '../services/storage'
import sysConfig from '../config/system.config'
import i18n from '@i18n/index'

type SettingsItem = {
key: string
type: 'link' | 'toggle' | 'button'
type: 'link' | 'toggle' | 'button' | 'input'
value?: string
options?: Array<{ label: string; value: string }>
callBack?: (value?: string) => void
Expand Down Expand Up @@ -128,6 +140,14 @@ function handleToggleChange(item: SettingsItem, event: Event) {
}
}

function handleInputChange(item: SettingsItem, newValue: string) {
item.value = newValue
saveSettings()
if (item.callBack) {
item.callBack(newValue)
}
}

function handleButtonClick(item: SettingsItem) {
if (item.callBack) {
item.callBack()
Expand Down