mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-10-06 13:27:43 +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',
|
||||
theme: 'Theme',
|
||||
language: 'Language',
|
||||
eol: 'End Of Line',
|
||||
},
|
||||
setting: {
|
||||
all: 'All',
|
||||
|
|
|
@ -767,6 +767,7 @@ const message = {
|
|||
downlodSuccess: '下载完成',
|
||||
theme: '主题',
|
||||
language: '语言',
|
||||
eol: '行尾符',
|
||||
},
|
||||
setting: {
|
||||
all: '全部',
|
||||
|
|
|
@ -18,6 +18,11 @@
|
|||
<el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
|
||||
</el-select>
|
||||
</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>
|
||||
<div class="coder-editor" v-loading="loading">
|
||||
<div id="codeBox" style="height: 60vh"></div>
|
||||
|
@ -74,6 +79,7 @@ interface EditProps {
|
|||
interface EditorConfig {
|
||||
theme: string;
|
||||
language: string;
|
||||
eol: number;
|
||||
}
|
||||
|
||||
let open = ref(false);
|
||||
|
@ -82,8 +88,20 @@ let loading = ref(false);
|
|||
let config = reactive<EditorConfig>({
|
||||
theme: 'vs-dark',
|
||||
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 = [
|
||||
{
|
||||
label: 'Visual Studio',
|
||||
|
@ -121,6 +139,10 @@ const changeTheme = () => {
|
|||
monaco.editor.setTheme(config.theme);
|
||||
};
|
||||
|
||||
const changeEOL = () => {
|
||||
editor.getModel().pushEOL(config.eol);
|
||||
};
|
||||
|
||||
const initEditor = () => {
|
||||
if (editor) {
|
||||
editor.dispose();
|
||||
|
@ -144,6 +166,9 @@ const initEditor = () => {
|
|||
}
|
||||
});
|
||||
|
||||
// After onDidChangeModelContent
|
||||
editor.getModel().pushEOL(config.eol);
|
||||
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
|
||||
});
|
||||
};
|
||||
|
@ -165,6 +190,9 @@ const acceptParams = (props: EditProps) => {
|
|||
form.value.content = props.content;
|
||||
form.value.path = props.path;
|
||||
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;
|
||||
};
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :id="'terminal-' + terminalID"></div>
|
||||
<div :id="'terminal-' + terminalID" @wheel="onTermWheel"></div>
|
||||
</template>
|
||||
|
||||
<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({
|
||||
acceptParams,
|
||||
onClose,
|
||||
|
|
Loading…
Add table
Reference in a new issue