gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-02-12 19:40:06 +08:00
Code

refactor: 文本编辑器全屏按钮样式处理 (#5748)

Browse Source
This commit is contained in:
蘭 2024-07-10 18:05:24 +08:00 committed by GitHub
parent 9fa191ad69
commit 730a25fcd2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,11 +12,20 @@
<template #header> <template #header>
<div class="flex items-center justify-between"> <div 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="10" 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">
<el-icon @click="toggleFullscreen"><FullScreen /></el-icon> <el-button
@click="toggleFullscreen"
v-if="!mobile"
class="!border-none !bg-transparent !text-base !font-semibold !py-2 !px-1"
icon="FullScreen"
></el-button>
</el-tooltip> </el-tooltip>
<el-icon @click="handleClose" size="20"><Close /></el-icon> <el-button
@click="handleClose"
class="!border-none !bg-transparent !text-xl !py-2 !px-1"
icon="Close"
></el-button>
</el-space> </el-space>
</div> </div>
</template> </template>
@ -143,7 +152,7 @@ import { GetFileContent, GetFilesTree, SaveFileContent } from '@/api/modules/fil
import i18n from '@/lang'; import i18n from '@/lang';
import { MsgError, MsgInfo, MsgSuccess } from '@/utils/message'; import { MsgError, MsgInfo, MsgSuccess } from '@/utils/message';
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
import { nextTick, onBeforeUnmount, reactive, ref, onMounted } from 'vue'; import { nextTick, onBeforeUnmount, reactive, ref, onMounted, computed } from 'vue';
import { Languages } from '@/global/mimetype'; import { Languages } from '@/global/mimetype';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'; import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
@ -156,8 +165,9 @@ import { ResultData } from '@/api/interface';
import { File } from '@/api/interface/file'; import { File } from '@/api/interface/file';
import { getIcon } from '@/utils/util'; import { getIcon } from '@/utils/util';
import { TreeKey, TreeNodeData } from 'element-plus/es/components/tree-v2/src/types'; import { TreeKey, TreeNodeData } from 'element-plus/es/components/tree-v2/src/types';
import { Top, Refresh, DArrowLeft, DArrowRight, FullScreen, Close } from '@element-plus/icons-vue'; import { Top, Refresh, DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
import { loadBaseDir } from '@/api/modules/setting'; import { loadBaseDir } from '@/api/modules/setting';
import { GlobalStore } from '@/store';
let editor: monaco.editor.IStandaloneCodeEditor | undefined; let editor: monaco.editor.IStandaloneCodeEditor | undefined;
@ -228,6 +238,11 @@ const toggleShow = () => {
isShow.value = !isShow.value; isShow.value = !isShow.value;
}; };
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
type WordWrapOptions = 'off' | 'on' | 'wordWrapColumn' | 'bounded'; type WordWrapOptions = 'off' | 'on' | 'wordWrapColumn' | 'bounded';
const isFullscreen = ref(false); const isFullscreen = ref(false);