1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-11 07:55:59 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 文件编辑器支持网页全屏 (#5486)

Browse source 
Refs #5357
This commit is contained in:
John Bro 2024-06-18 18:04:53 +08:00 • committed by GitHub
parent 345dbda400
commit c30ea553bd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/views/host/file-management/code-editor/index.vue
View file

@ -7,8 +7,12 @@
width="70%" width="70%"
@opened="onOpen" @opened="onOpen"
:top="'5vh'" :top="'5vh'"
:fullscreen="isFullscreen"
> >
<el-form :inline="true" :model="config" class="mt-1.5"> <el-form :inline="true" :model="config" class="mt-1.5">
<el-tooltip :content="loadTooltip()" placement="top">
<el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
</el-tooltip>
<el-form-item :label="$t('file.theme')"> <el-form-item :label="$t('file.theme')">
<el-select v-model="config.theme" @change="changeTheme()" class="p-w-200"> <el-select v-model="config.theme" @change="changeTheme()" class="p-w-200">
<el-option v-for="item in themes" :key="item.label" :value="item.value" :label="item.label" /> <el-option v-for="item in themes" :key="item.label" :value="item.value" :label="item.label" />
@ -98,6 +102,8 @@ const warpKey = 'code-warp';
type WordWrapOptions = 'off' | 'on' | 'wordWrapColumn' | 'bounded'; type WordWrapOptions = 'off' | 'on' | 'wordWrapColumn' | 'bounded';
const isFullscreen = ref(false);
const config = reactive<EditorConfig>({ const config = reactive<EditorConfig>({
theme: 'vs-dark', theme: 'vs-dark',
language: 'plaintext', language: 'plaintext',
@ -145,6 +151,13 @@ const handleClose = () => {
} }
em('close', open.value); em('close', open.value);
}; };
const loadTooltip = () => {
return i18n.global.t('commons.button.' + (isFullscreen.value ? 'quitFullscreen' : 'fullscreen'));
};
function toggleFullscreen() {
isFullscreen.value = !isFullscreen.value;
}
const changeLanguage = () => { const changeLanguage = () => {
monaco.editor.setModelLanguage(editor.getModel(), config.language); monaco.editor.setModelLanguage(editor.getModel(), config.language);
}; };
@ -244,4 +257,12 @@ defineExpose({ acceptParams });
.dialog-top { .dialog-top {
top: 0; top: 0;
} }
.fullScreen {
background-color: transparent;
border: none;
position: absolute;
right: 50px;
font-weight: 600;
font-size: 14px;
}
</style> </style>