yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(preview): adjust layout for code preview modal and tabs

pull/351/MERGE
YunaiV 2026-05-31 10:24:31 +08:00
parent 61172b9a68
commit a188c8245d
1 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
View File

@ -193,6 +193,7 @@ function handleTabsEdit(
/** 模态框实例 */ /** 模态框实例 */
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
contentClass: 'overflow-hidden',
footer: false, footer: false,
fullscreen: true, fullscreen: true,
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
@ -229,10 +230,10 @@ const [Modal, modalApi] = useVbenModal({
<template> <template>
<Modal title="代码预览"> <Modal title="代码预览">
<div class="flex h-full" v-loading="loading"> <div class="flex h-full min-h-0" v-loading="loading">
<!-- 文件树 --> <!-- 文件树 -->
<div <div
class="h-full w-1/3 overflow-auto border-r border-gray-200 pr-4 dark:border-gray-700" class="h-full min-h-0 w-1/3 overflow-auto border-r border-gray-200 pr-4 dark:border-gray-700"
> >
<ElTree <ElTree
v-if="fileTree.length > 0" v-if="fileTree.length > 0"
@ -248,8 +249,14 @@ const [Modal, modalApi] = useVbenModal({
/> />
</div> </div>
<!-- 代码预览 --> <!-- 代码预览 -->
<div class="h-full w-2/3 overflow-auto pl-4"> <div class="flex h-full min-h-0 w-2/3 flex-col pl-4">
<ElTabs v-model="activeKey" type="card" editable @edit="handleTabsEdit"> <ElTabs
v-model="activeKey"
class="codegen-preview-tabs min-h-0 flex-1"
type="card"
editable
@edit="handleTabsEdit"
>
<ElTabPane <ElTabPane
v-for="key in codeMap.keys()" v-for="key in codeMap.keys()"
:key="key" :key="key"
@ -257,10 +264,10 @@ const [Modal, modalApi] = useVbenModal({
:name="key" :name="key"
> >
<div <div
class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200" class="h-full min-h-0 rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
> >
<CodeEditor <CodeEditor
class="max-h-200" class="h-full"
:value="codeMap.get(activeKey)" :value="codeMap.get(activeKey)"
mode="application/json" mode="application/json"
:readonly="true" :readonly="true"
@ -277,3 +284,21 @@ const [Modal, modalApi] = useVbenModal({
</div> </div>
</Modal> </Modal>
</template> </template>
<style scoped>
:deep(.codegen-preview-tabs) {
display: flex;
flex-direction: column;
height: 100%;
}
:deep(.codegen-preview-tabs > .el-tabs__content) {
flex: 1;
min-height: 0;
overflow: hidden;
}
:deep(.codegen-preview-tabs .el-tab-pane) {
height: 100%;
}
</style>