github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 文本编辑器全屏高度处理 (#5760)

Browse Source
pull/5761/head
蘭 5 months ago committed by GitHub
parent c0b6a06fb7
commit bcfbbb656a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File

73
frontend/src/views/host/file-management/code-editor/index.vue
Unescape View File

@ -10,7 +10,7 @@
:fullscreen="isFullscreen" :fullscreen="isFullscreen"
> >
<template #header> <template #header>
<div class="flex items-center justify-between"> <div ref="dialogHeader" class="flex items-center justify-between">
<span>{{ $t('commons.button.edit') + ' - ' + form.path }}</span> <span>{{ $t('commons.button.edit') + ' - ' + form.path }}</span>
<el-space alignment="center" :size="1" class="dialog-header-icon"> <el-space alignment="center" :size="1" class="dialog-header-icon">
<el-tooltip :content="loadTooltip()" placement="top"> <el-tooltip :content="loadTooltip()" placement="top">
@ -29,29 +29,36 @@
</el-space> </el-space>
</div> </div>
</template> </template>
<el-form :inline="true" :model="config" class="mt-1.5"> <div ref="dialogForm">
<el-form-item :label="$t('file.theme')"> <el-form :inline="true" :model="config" class="mt-1.5">
<el-select v-model="config.theme" @change="changeTheme()" class="p-w-200"> <el-form-item :label="$t('file.theme')">
<el-option v-for="item in themes" :key="item.label" :value="item.value" :label="item.label" /> <el-select v-model="config.theme" @change="changeTheme()" class="p-w-200">
</el-select> <el-option v-for="item in themes" :key="item.label" :value="item.value" :label="item.label" />
</el-form-item> </el-select>
<el-form-item :label="$t('file.language')"> </el-form-item>
<el-select v-model="config.language" @change="changeLanguage()" class="!w-32"> <el-form-item :label="$t('file.language')">
<el-option v-for="lang in Languages" :key="lang.label" :value="lang.label" :label="lang.label" /> <el-select v-model="config.language" @change="changeLanguage()" class="!w-32">
</el-select> <el-option
</el-form-item> v-for="lang in Languages"
<el-form-item :label="$t('file.eol')"> :key="lang.label"
<el-select v-model="config.eol" @change="changeEOL()" class="p-w-150"> :value="lang.label"
<el-option v-for="eol in eols" :key="eol.label" :value="eol.value" :label="eol.label" /> :label="lang.label"
</el-select> />
</el-form-item> </el-select>
<el-form-item :label="$t('file.wordWrap')"> </el-form-item>
<el-select v-model="config.wordWrap" @change="changeWarp()" class="p-w-100"> <el-form-item :label="$t('file.eol')">
<el-option :label="$t('commons.button.enable')" value="on"></el-option> <el-select v-model="config.eol" @change="changeEOL()" class="p-w-150">
<el-option :label="$t('commons.button.disable')" value="off"></el-option> <el-option v-for="eol in eols" :key="eol.label" :value="eol.value" :label="eol.label" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> <el-form-item :label="$t('file.wordWrap')">
<el-select v-model="config.wordWrap" @change="changeWarp()" class="p-w-100">
<el-option :label="$t('commons.button.enable')" value="on"></el-option>
<el-option :label="$t('commons.button.disable')" value="off"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div v-loading="loading"> <div v-loading="loading">
<div class="flex"> <div class="flex">
<div class="sm:w-48 w-1/3 monaco-editor-background tree-container" v-if="isShow"> <div class="sm:w-48 w-1/3 monaco-editor-background tree-container" v-if="isShow">
@ -139,10 +146,10 @@
</div> </div>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer"> <div class="dialog-footer" ref="dialogFooter">
<el-button @click="handleReset">{{ $t('commons.button.reset') }}</el-button> <el-button @click="handleReset">{{ $t('commons.button.reset') }}</el-button>
<el-button type="primary" @click="saveContent()">{{ $t('commons.button.confirm') }}</el-button> <el-button type="primary" @click="saveContent()">{{ $t('commons.button.confirm') }}</el-button>
</span> </div>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
@ -226,13 +233,15 @@ const baseDir = ref();
const treeData = ref([]); const treeData = ref([]);
const codeBox = ref(); const codeBox = ref();
const defaultHeight = ref(55); const defaultHeight = ref(55);
const fullScreenHeight = ref(80);
const treeHeight = ref(0); const treeHeight = ref(0);
const codeHeight = ref('55vh'); const codeHeight = ref('55vh');
const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 }); const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 });
const isShow = ref(true); const isShow = ref(true);
const isEdit = ref(false); const isEdit = ref(false);
const oldFileContent = ref(''); const oldFileContent = ref('');
const dialogHeader = ref(null);
const dialogForm = ref(null);
const dialogFooter = ref(null);
const toggleShow = () => { const toggleShow = () => {
isShow.value = !isShow.value; isShow.value = !isShow.value;
@ -340,8 +349,14 @@ onMounted(() => {
const updateHeights = () => { const updateHeights = () => {
const vh = window.innerHeight / 100; const vh = window.innerHeight / 100;
if (isFullscreen.value) { if (isFullscreen.value) {
treeHeight.value = fullScreenHeight.value * vh - 31; let paddingHeight = 75;
codeHeight.value = `${fullScreenHeight.value}vh`; const headerHeight = dialogHeader.value.offsetHeight;
const formHeight = dialogForm.value.offsetHeight;
const footerHeight = dialogFooter.value.offsetHeight;
treeHeight.value = window.innerHeight - headerHeight - formHeight - footerHeight - paddingHeight - 31;
codeHeight.value = `${
((window.innerHeight - headerHeight - formHeight - footerHeight - paddingHeight) / window.innerHeight) * 100
}vh`;
} else { } else {
treeHeight.value = defaultHeight.value * vh - 31; treeHeight.value = defaultHeight.value * vh - 31;
codeHeight.value = `${defaultHeight.value}vh`; codeHeight.value = `${defaultHeight.value}vh`;

Write Preview
Loading…
Cancel
Save