mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-10-10 15:36:45 +08:00
feat: xterm-Support for Ctrl+MouseWheel to scaling fonts (#448)
#### What this PR does / why we need it? #284 Support for scaling fonts using Ctrl+mouse wheel #446 support Editor config the eol. Currently, 1Panel only supports Linux, so directly set the default EOL to LF and add a new configuration item #### Summary of your change #### Please indicate you've done the following: - [x] Made sure tests are passing and test coverage is added if needed. - [x] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/). - [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
This commit is contained in:
parent
a18105349b
commit
d71e2a74b4
4 changed files with 51 additions and 1 deletions
|
@ -763,6 +763,7 @@ const message = {
|
||||||
downlodSuccess: 'Download Success',
|
downlodSuccess: 'Download Success',
|
||||||
theme: 'Theme',
|
theme: 'Theme',
|
||||||
language: 'Language',
|
language: 'Language',
|
||||||
|
eol: 'End Of Line',
|
||||||
},
|
},
|
||||||
setting: {
|
setting: {
|
||||||
all: 'All',
|
all: 'All',
|
||||||
|
|
|
@ -767,6 +767,7 @@ const message = {
|
||||||
downlodSuccess: '下载完成',
|
downlodSuccess: '下载完成',
|
||||||
theme: '主题',
|
theme: '主题',
|
||||||
language: '语言',
|
language: '语言',
|
||||||
|
eol: '行尾符',
|
||||||
},
|
},
|
||||||
setting: {
|
setting: {
|
||||||
all: '全部',
|
all: '全部',
|
||||||
|
|
|
@ -18,6 +18,11 @@
|
||||||
<el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
|
<el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item :label="$t('file.eol')">
|
||||||
|
<el-select v-model="config.eol" @change="changeEOL()">
|
||||||
|
<el-option v-for="eol in eols" :key="eol.label" :value="eol.value" :label="eol.label" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="coder-editor" v-loading="loading">
|
<div class="coder-editor" v-loading="loading">
|
||||||
<div id="codeBox" style="height: 60vh"></div>
|
<div id="codeBox" style="height: 60vh"></div>
|
||||||
|
@ -74,6 +79,7 @@ interface EditProps {
|
||||||
interface EditorConfig {
|
interface EditorConfig {
|
||||||
theme: string;
|
theme: string;
|
||||||
language: string;
|
language: string;
|
||||||
|
eol: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
let open = ref(false);
|
let open = ref(false);
|
||||||
|
@ -82,8 +88,20 @@ let loading = ref(false);
|
||||||
let config = reactive<EditorConfig>({
|
let config = reactive<EditorConfig>({
|
||||||
theme: 'vs-dark',
|
theme: 'vs-dark',
|
||||||
language: 'plaintext',
|
language: 'plaintext',
|
||||||
|
eol: monaco.editor.EndOfLineSequence.LF,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const eols = [
|
||||||
|
{
|
||||||
|
label: 'LF',
|
||||||
|
value: monaco.editor.EndOfLineSequence.LF,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'CRLF',
|
||||||
|
value: monaco.editor.EndOfLineSequence.CRLF,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const themes = [
|
const themes = [
|
||||||
{
|
{
|
||||||
label: 'Visual Studio',
|
label: 'Visual Studio',
|
||||||
|
@ -121,6 +139,10 @@ const changeTheme = () => {
|
||||||
monaco.editor.setTheme(config.theme);
|
monaco.editor.setTheme(config.theme);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const changeEOL = () => {
|
||||||
|
editor.getModel().pushEOL(config.eol);
|
||||||
|
};
|
||||||
|
|
||||||
const initEditor = () => {
|
const initEditor = () => {
|
||||||
if (editor) {
|
if (editor) {
|
||||||
editor.dispose();
|
editor.dispose();
|
||||||
|
@ -144,6 +166,9 @@ const initEditor = () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// After onDidChangeModelContent
|
||||||
|
editor.getModel().pushEOL(config.eol);
|
||||||
|
|
||||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
|
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -165,6 +190,9 @@ const acceptParams = (props: EditProps) => {
|
||||||
form.value.content = props.content;
|
form.value.content = props.content;
|
||||||
form.value.path = props.path;
|
form.value.path = props.path;
|
||||||
config.language = props.language;
|
config.language = props.language;
|
||||||
|
// TODO Now,1panel only support liunux,so we can use LF.
|
||||||
|
// better,We should rely on the actual line feed character of the file returned from the background
|
||||||
|
config.eol = monaco.editor.EndOfLineSequence.LF;
|
||||||
open.value = true;
|
open.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div :id="'terminal-' + terminalID"></div>
|
<div :id="'terminal-' + terminalID" @wheel="onTermWheel"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
@ -176,6 +176,26 @@ function changeTerminalSize() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Support for Ctrl+MouseWheel to scaling fonts
|
||||||
|
* @param event WheelEvent
|
||||||
|
*/
|
||||||
|
const onTermWheel = (event: WheelEvent) => {
|
||||||
|
if (event.ctrlKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (term) {
|
||||||
|
if (event.deltaY > 0) {
|
||||||
|
// web font-size mini 12px
|
||||||
|
if (term.options.fontSize > 12) {
|
||||||
|
term.options.fontSize = term.options.fontSize - 1;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
term.options.fontSize = term.options.fontSize + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
acceptParams,
|
acceptParams,
|
||||||
onClose,
|
onClose,
|
||||||
|
|
Loading…
Add table
Reference in a new issue