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

feat: code editor tab component (#8751)

Browse source
This commit is contained in:
蘭 2025-05-20 14:45:08 +08:00 • committed by GitHub
parent 8080ae1fb3
commit 431f6aa966
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
frontend/src/views/host/file-management/code-editor/tabs/index.vue Normal file
View file

@ -0,0 +1,84 @@
<template>
<el-tabs
v-model="props.selectTab"
type="card"
:closable="props.fileTabs.length > 1"
class="monaco-editor monaco-editor-background"
@tab-remove="props.onRemoveTab"
@tab-change="props.onChangeTab"
>
<el-tab-pane v-for="item in props.fileTabs" :key="item.path" :name="item.path">
<template #label>
<el-dropdown
size="small"
:id="item.path"
:ref="(el) => setDropdownRef(item.path, el)"
trigger="contextmenu"
placement="bottom"
@visible-change="(visible) => onDropdownVisibleChange(visible, item.path)"
>
<span class="el-dropdown-link">
<el-tooltip :content="item.path" placement="bottom-start">
{{ item.name }}
</el-tooltip>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="props.onRemoveTab(item.path)">
<el-icon><Close /></el-icon>
{{ $t('commons.button.close') }}
</el-dropdown-item>
<el-dropdown-item @click="props.onRemoveAllTab(item.path, 'left')">
<el-icon><DArrowLeft /></el-icon>
{{ $t('tabs.closeLeft') }}
</el-dropdown-item>
<el-dropdown-item @click="props.onRemoveAllTab(item.path, 'right')">
<el-icon><DArrowRight /></el-icon>
{{ $t('tabs.closeRight') }}
</el-dropdown-item>
<el-dropdown-item @click="props.onRemoveOtherTab(item.path)">
<el-icon><More /></el-icon>
{{ $t('tabs.closeOther') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-tab-pane>
</el-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue';
interface FileTabs {
path: string;
name: string;
}
const props = defineProps({
selectTab: String,
fileTabs: Array<FileTabs>,
onRemoveTab: Function,
onChangeTab: Function,
onRemoveAllTab: Function,
onRemoveOtherTab: Function,
});
const dropdownRefs = ref<Record<string, any>>({});
const setDropdownRef = (path: string, el: any) => {
if (el) {
dropdownRefs.value[path] = el;
}
};
const onDropdownVisibleChange = (visible: boolean, currentPath: string) => {
if (visible) {
for (const path in dropdownRefs.value) {
if (path !== currentPath) {
dropdownRefs.value[path]?.handleClose?.();
}
}
}
};
</script>