auth
/
generator-code-server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛 打开生成页面背景不为灰色;页面关闭无动画

This commit is contained in:
bunny 2025-06-29 18:18:09 +08:00
parent bc17aa3dd4
commit 72d9deadb3
2 changed files with 52 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
generator-code-server/generator-code/src/main/resources/static/src/views/home/MainGeneratorPage.js
View File

@ -1,11 +1,11 @@
const MainGeneratorPage = defineComponent({ const MainGeneratorPage = defineComponent({
name: "MainGeneratorPage", name: "MainGeneratorPage",
template: ` template: `
<div :class="{'show': generatorPageFlag}" class="offcanvas offcanvas-start w-50" data-bs-scroll="false"> <div class="offcanvas offcanvas-start" data-bs-scroll="false" tabindex="-1" ref="offcanvasElementRef">
<!-- 侧边栏头部 --> <!-- 侧边栏头部 -->
<div class="offcanvas-header bg-primary text-white"> <div class="offcanvas-header bg-primary text-white">
<div> <div>
<h5 class="offcanvas-title mb-1" id="offcanvasWithBothOptionsLabel"> <h5 class="offcanvas-title mb-1">
<i class="bi bi-file-earmark-code me-2"></i>模板生成页面 <i class="bi bi-file-earmark-code me-2"></i>模板生成页面
</h5> </h5>
<p class="small mb-0 opacity-75">已生成的文件列表</p> <p class="small mb-0 opacity-75">已生成的文件列表</p>
@ -30,7 +30,7 @@ const MainGeneratorPage = defineComponent({
role="button" data-bs-toggle="collapse" :data-bs-target="'#collapse-' + item.id" aria-expanded="false"> role="button" data-bs-toggle="collapse" :data-bs-target="'#collapse-' + item.id" aria-expanded="false">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<i class="bi bi-bi-file-earmark-code me-2 text-primary fs-5"></i> <i class="bi bi-bi-file-earmark-code me-2 text-primary fs-5"></i>
<span class="text-truncate" style="max-width: 80%"> <span class="text-truncate" style="max-width: 90%">
【{{item.comment}}】{{item.path}} 【{{item.comment}}】{{item.path}}
</span> </span>
</div> </div>
@ -73,6 +73,7 @@ const MainGeneratorPage = defineComponent({
</div> </div>
</div> </div>
</div> </div>
`, `,
props: { props: {
// 是否显示生成页面 // 是否显示生成页面
@ -83,7 +84,9 @@ const MainGeneratorPage = defineComponent({
data() { data() {
return { return {
// 控制图标状态的响应式变量 // 控制图标状态的响应式变量
copied: false copied: ref(false),
// 存储 offcanvas 实例
offcanvas: ref(null)
} }
}, },
methods: { methods: {
@ -153,7 +156,24 @@ const MainGeneratorPage = defineComponent({
/* 关闭窗口 */ /* 关闭窗口 */
onGeneratorPageFlagClick() { onGeneratorPageFlagClick() {
this.$emit("update:generatorPageFlag", !this.generatorPageFlag) this.$emit("update:generatorPageFlag", !this.generatorPageFlag);
}, },
}, },
mounted() {
// 初始化 OffCanvas
this.offcanvas = new bootstrap.Offcanvas(this.$refs.offcanvasElementRef);
// 监听隐藏事件
this.$refs.offcanvasElementRef.addEventListener('hidden.bs.offcanvas', () => {
this.$emit("update:generatorPageFlag", false);
});
},
watch: {
generatorPageFlag(newVal) {
if (newVal) {
this.offcanvas.show();
} else {
this.offcanvas.hide();
}
},
}
}); });

30
generator-code-server/generator-code/src/main/resources/templates/home.html
View File

@ -30,6 +30,30 @@
<script th:src="@{/src/lib/js/dayjs/antd.min.js}"></script> <script th:src="@{/src/lib/js/dayjs/antd.min.js}"></script>
</head> </head>
<style>
/* 提高 Antd Message 的 z-index */
.ant-message {
z-index: 1100 !important;
}
/* 响应式 OffCanvas 宽度 */
.offcanvas.offcanvas-start {
width: 50%;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-start {
width: 75%;
}
}
@media (max-width: 767.98px) {
.offcanvas.offcanvas-start {
width: 100%;
}
}
</style>
<body> <body>
<div id="app"> <div id="app">
<div class="container my-4"> <div class="container my-4">
@ -50,7 +74,7 @@
:raw-table-list="rawTableList" :table-list="tableList" v-model:form="form"></main-table> :raw-table-list="rawTableList" :table-list="tableList" v-model:form="form"></main-table>
<!-- 模板生成页面 --> <!-- 模板生成页面 -->
<main-generator-page :generator-data="generatorData" <main-generator-page :generator-data="generatorData" ref="mainGeneratorRef"
v-model:generator-page-flag="generatorPageFlag"></main-generator-page> v-model:generator-page-flag="generatorPageFlag"></main-generator-page>
</div> </div>
</div> </div>
@ -152,8 +176,8 @@
else antd.message.success(message); else antd.message.success(message);
// 显示生成的页面 // 显示生成的页面
this.generatorPageFlag = true;
this.generatorData = data; this.generatorData = data;
this.generatorPageFlag = true;
// 等待 DOM 更新，之后手动更新代码高亮 // 等待 DOM 更新，之后手动更新代码高亮
await this.$nextTick(); await this.$nextTick();
@ -181,7 +205,7 @@
this.tableList = this.tableList.filter(table => table.tableName.includes(val) || table.tablePrefixes.includes(val)); this.tableList = this.tableList.filter(table => table.tableName.includes(val) || table.tablePrefixes.includes(val));
} }
}, },
} },
}); });
// 注册组件 // 注册组件