lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: support select multiple font and input custom font name #115 #130

This commit is contained in:
Lykin 2024-01-23 19:44:11 +08:00
parent cdac3c4496
commit 0b37b89f9b
11 changed files with 118 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
backend/types/preferences.go
View File

@ -41,21 +41,23 @@ type PreferencesBehavior struct {
}
type PreferencesGeneral struct {
Theme string `json:"theme" yaml:"theme"`
Language string `json:"language" yaml:"language"`
Font string `json:"font" yaml:"font,omitempty"`
FontSize int `json:"fontSize" yaml:"font_size"`
ScanSize int `json:"scanSize" yaml:"scan_size"`
KeyIconStyle int `json:"keyIconStyle" yaml:"key_icon_style"`
UseSysProxy bool `json:"useSysProxy" yaml:"use_sys_proxy,omitempty"`
UseSysProxyHttp bool `json:"useSysProxyHttp" yaml:"use_sys_proxy_http,omitempty"`
CheckUpdate bool `json:"checkUpdate" yaml:"check_update"`
SkipVersion string `json:"skipVersion" yaml:"skip_version,omitempty"`
Theme string `json:"theme" yaml:"theme"`
Language string `json:"language" yaml:"language"`
Font string `json:"font" yaml:"font,omitempty"`
FontFamily []string `json:"fontFamily" yaml:"font_family,omitempty"`
FontSize int `json:"fontSize" yaml:"font_size"`
ScanSize int `json:"scanSize" yaml:"scan_size"`
KeyIconStyle int `json:"keyIconStyle" yaml:"key_icon_style"`
UseSysProxy bool `json:"useSysProxy" yaml:"use_sys_proxy,omitempty"`
UseSysProxyHttp bool `json:"useSysProxyHttp" yaml:"use_sys_proxy_http,omitempty"`
CheckUpdate bool `json:"checkUpdate" yaml:"check_update"`
SkipVersion string `json:"skipVersion" yaml:"skip_version,omitempty"`
}
type PreferencesEditor struct {
Font string `json:"font" yaml:"font,omitempty"`
FontSize int `json:"fontSize" yaml:"font_size"`
ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"`
ShowFolding bool `json:"showFolding" yaml:"show_folding"`
Font string `json:"font" yaml:"font,omitempty"`
FontFamily []string `json:"fontFamily" yaml:"font_family,omitempty"`
FontSize int `json:"fontSize" yaml:"font_size"`
ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"`
ShowFolding bool `json:"showFolding" yaml:"show_folding"`
}

11
frontend/src/components/content_value/ContentCli.vue
View File

@ -34,6 +34,7 @@ let fitAddonInst = null
const newTerm = () => {
const term = new Terminal({
allowProposedApi: true,
fontFamily: prefStore.general.fontFamily,
fontSize: prefStore.general.fontSize || 14,
cursorBlink: true,
disableStdin: false,
@ -89,6 +90,16 @@ defineExpose({
resizeTerm,
})
// watch(
// () => prefStore.general.font,
// (font = undefined) => {
// if (termInst != null) {
// termInst.options.fontFamily = font || 'Courier New'
// }
// resizeTerm()
// },
// )
watch(
() => prefStore.general.fontSize,
(fontSize) => {

16
frontend/src/components/content_value/ContentEditor.vue
View File

@ -58,7 +58,7 @@ const readonlyValue = computed(() => {
const pref = usePreferencesStore()
onMounted(async () => {
if (editorRef.value != null) {
const { fontSize, fontFamily = undefined } = pref.editorFont
const { fontSize, fontFamily = ['monaco'] } = pref.editorFont
editorNode = monaco.editor.create(editorRef.value, {
// value: props.content,
theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
@ -151,21 +151,11 @@ watch(
)
watch(
() => pref.editorFont.fontSize,
(fontSize) => {
() => pref.editorFont,
({ fontSize, fontFamily }) => {
if (editorNode != null) {
editorNode.updateOptions({
fontSize,
})
}
},
)
watch(
() => pref.editorFont.fontFamily,
(fontFamily = undefined) => {
if (editorNode != null) {
editorNode.updateOptions({
fontFamily,
})
}

63
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -5,6 +5,7 @@ import useDialog from 'stores/dialog'
import usePreferencesStore from 'stores/preferences.js'
import { map, sortBy } from 'lodash'
import { typesIconStyle } from '@/consts/support_redis_type.js'
import Help from '@/components/icons/Help.vue'
const prefStore = usePreferencesStore()
@ -92,14 +93,27 @@ const onClose = () => {
:render-label="({ label, value }) => (value === 'auto' ? $t(label) : label)"
filterable />
</n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
<n-form-item-gi :span="24" required>
<template #label>
{{ $t('preferences.general.font') }}
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="Help" />
</template>
<div class="text-block">
{{ $t('preferences.font_tip') }}
</div>
</n-tooltip>
</template>
<n-select
v-model:value="prefStore.general.font"
v-model:value="prefStore.general.fontFamily"
:options="prefStore.fontOption"
:render-label="({ label, value }) => (value === '' ? $t(label) : label)"
filterable />
filterable
multiple
tag />
</n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
<n-form-item-gi :label="$t('preferences.general.font_size')" :span="24">
<n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
</n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.scan_size')" :span="12">
@ -115,16 +129,16 @@ const onClose = () => {
:options="keyOptions"
:render-label="({ label }) => $t(label)" />
</n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
<n-space>
<n-checkbox v-model:checked="prefStore.general.useSysProxy">
{{ $t('preferences.general.use_system_proxy') }}
</n-checkbox>
<n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
{{ $t('preferences.general.use_system_proxy_http') }}
</n-checkbox>
</n-space>
</n-form-item-gi>
<!-- <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">-->
<!-- <n-space>-->
<!-- <n-checkbox v-model:checked="prefStore.general.useSysProxy">-->
<!-- {{ $t('preferences.general.use_system_proxy') }}-->
<!-- </n-checkbox>-->
<!-- <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">-->
<!-- {{ $t('preferences.general.use_system_proxy_http') }}-->
<!-- </n-checkbox>-->
<!-- </n-space>-->
<!-- </n-form-item-gi>-->
<n-form-item-gi :label="$t('preferences.general.update')" :span="24">
<n-checkbox v-model:checked="prefStore.general.checkUpdate">
{{ $t('preferences.general.auto_check_update') }}
@ -137,14 +151,27 @@ const onClose = () => {
<n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor">
<n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
<n-grid :x-gap="10">
<n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
<n-form-item-gi :span="24" required>
<template #label>
{{ $t('preferences.general.font') }}
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="Help" />
</template>
<div class="text-block">
{{ $t('preferences.font_tip') }}
</div>
</n-tooltip>
</template>
<n-select
v-model:value="prefStore.editor.font"
v-model:value="prefStore.editor.fontFamily"
:options="prefStore.fontOption"
:render-label="({ label, value }) => value || $t(label)"
filterable />
filterable
multiple
tag />
</n-form-item-gi>
<n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
<n-form-item-gi :label="$t('preferences.general.font_size')" :span="24">
<n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
</n-form-item-gi>
<n-form-item-gi :show-feedback="false" :show-label="false" :span="24">

2
frontend/src/components/icons/Subscribe.vue
View File

@ -14,9 +14,9 @@ const props = defineProps({
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
d="M24 28.6292C26.5104 28.6292 28.5455 26.6004 28.5455 24.0979C28.5455 21.5954 26.5104 19.5667 24 19.5667C21.4897 19.5667 19.4546 21.5954 19.4546 24.0979C19.4546 26.6004 21.4897 28.6292 24 28.6292Z"
:fill="props.inverse ? 'currentColor' : 'none'"
stroke="currentColor"
stroke-linejoin="round" />
<path

4
frontend/src/components/sidebar/ConnectionPane.vue
View File

@ -46,15 +46,15 @@ const onSelectOptions = async (select) => {
<icon-button
:button-class="['nav-pane-func-btn']"
:icon="AddLink"
size="20"
:stroke-width="3.5"
size="20"
t-tooltip="interface.new_conn"
@click="dialogStore.openNewDialog()" />
<icon-button
:button-class="['nav-pane-func-btn']"
:icon="AddGroup"
size="20"
:stroke-width="3.5"
size="20"
t-tooltip="interface.new_group"
@click="dialogStore.openNewGroupDialog()" />
<n-divider vertical />

6
frontend/src/components/sidebar/Ribbon.vue
View File

@ -152,8 +152,8 @@ const exThemeVars = computed(() => {
:options="preferencesOptions"
:render-icon="({ icon }) => render.renderIcon(icon)"
:render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
trigger="click"
content-class="nav-menu-button"
trigger="click"
@select="onSelectPreferenceMenu">
<icon-button :icon="Config" :size="iconSize" :stroke-width="3" />
</n-dropdown>
@ -161,8 +161,8 @@ const exThemeVars = computed(() => {
v-if="prefStore.currentLanguage === 'zh'"
:icon="QRCode"
:size="iconSize"
t-tooltip="ribbon.wechat_official"
class="nav-menu-button"
t-tooltip="ribbon.wechat_official"
@click="showWechat = true" />
<icon-button
v-else
@ -176,8 +176,8 @@ const exThemeVars = computed(() => {
<icon-button
:icon="Github"
:size="iconSize"
t-tooltip="ribbon.github"
class="nav-menu-button"
t-tooltip="ribbon.github"
@click="openGithub" />
</div>

2
frontend/src/langs/en-us.json
View File

@ -27,6 +27,7 @@
"preferences": {
"name": "Preferences",
"restore_defaults": "Restore Defaults",
"font_tip": "Supports multiple selection. You can manually input the font name if it is not list below.",
"general": {
"name": "General",
"theme": "Theme",
@ -35,7 +36,6 @@
"theme_auto": "Auto",
"language": "Language",
"system_lang": "Use System Language",
"default": "Default",
"font": "Font",
"font_size": "Font Size",
"scan_size": "Default Size for SCAN Command",

1
frontend/src/langs/pt-br.json
View File

@ -31,7 +31,6 @@
"theme_auto": "Automático",
"language": "Idioma",
"system_lang": "Usar Idioma do Sistema",
"default": "Padrão",
"font": "Fonte",
"font_size": "Tamanho da Fonte",
"scan_size": "Tamanho Padrão para Comando SCAN",

2
frontend/src/langs/zh-cn.json
View File

@ -27,6 +27,7 @@
"preferences": {
"name": "偏好设置",
"restore_defaults": "重置为默认",
"font_tip": "支持多选，如列表没有已安装的字体，可自行手动输入",
"general": {
"name": "常规配置",
"theme": "主题",
@ -35,7 +36,6 @@
"theme_auto": "自动",
"language": "语言",
"system_lang": "使用系统语言",
"default": "默认",
"font": "字体",
"font_size": "字体尺寸",
"scan_size": "SCAN命令默认数量",

54
frontend/src/stores/preferences.js
View File

@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { lang } from '@/langs/index.js'
import { cloneDeep, find, get, isEmpty, map, pick, set, split } from 'lodash'
import { cloneDeep, get, isEmpty, join, map, pick, set, split } from 'lodash'
import {
CheckForUpdate,
GetFontList,
@ -43,6 +43,7 @@ const usePreferencesStore = defineStore('preferences', {
theme: 'auto',
language: 'auto',
font: '',
fontFamily: [],
fontSize: 14,
scanSize: 3000,
keyIconStyle: 0,
@ -53,6 +54,7 @@ const usePreferencesStore = defineStore('preferences', {
},
editor: {
font: '',
fontFamily: [],
fontSize: 14,
showLineNum: true,
showFolding: true,
@ -103,17 +105,11 @@ const usePreferencesStore = defineStore('preferences', {
* @returns {{path: string, label: string, value: string}[]}
*/
fontOption() {
const option = map(this.fontList, (font) => ({
return map(this.fontList, (font) => ({
value: font.name,
label: font.name,
path: font.path,
}))
option.splice(0, 0, {
value: '',
label: 'preferences.general.default',
path: '',
})
return option
},
/**
@ -124,12 +120,21 @@ const usePreferencesStore = defineStore('preferences', {
const fontStyle = {
fontSize: this.general.fontSize + 'px',
}
if (!isEmpty(this.general.font) && this.general.font !== 'none') {
const font = find(this.fontList, { name: this.general.font })
if (font != null) {
fontStyle['fontFamily'] = `${font.name}`
}
if (!isEmpty(this.general.fontFamily)) {
fontStyle['fontFamily'] = join(
map(this.general.fontFamily, (f) => `"${f}"`),
',',
)
}
// compatible with old preferences
// if (isEmpty(fontStyle['fontFamily'])) {
// if (!isEmpty(this.general.font) && this.general.font !== 'none') {
// const font = find(this.fontList, { name: this.general.font })
// if (font != null) {
// fontStyle['fontFamily'] = `${font.name}`
// }
// }
// }
return fontStyle
},
@ -141,13 +146,24 @@ const usePreferencesStore = defineStore('preferences', {
const fontStyle = {
fontSize: (this.editor.fontSize || 14) + 'px',
}
if (!isEmpty(this.editor.font) && this.editor.font !== 'none') {
const font = find(this.fontList, { name: this.editor.font })
if (font != null) {
fontStyle['fontFamily'] = `${font.name}`
}
if (!isEmpty(this.editor.fontFamily)) {
fontStyle['fontFamily'] = join(
map(this.editor.fontFamily, (f) => `"${f}"`),
',',
)
}
// compatible with old preferences
// if (isEmpty(fontStyle['fontFamily'])) {
// if (!isEmpty(this.editor.font) && this.editor.font !== 'none') {
// const font = find(this.fontList, { name: this.editor.font })
// if (font != null) {
// fontStyle['fontFamily'] = `${font.name}`
// }
// }
// }
if (isEmpty(fontStyle['fontFamily'])) {
fontStyle['fontFamily'] = ['monaco']
}
fontStyle['fontFamily'] = fontStyle['fontFamily'] || 'monaco'
return fontStyle
},