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({
name: "MainGeneratorPage",
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>
<h5 class="offcanvas-title mb-1" id="offcanvasWithBothOptionsLabel">
<h5 class="offcanvas-title mb-1">
<i class="bi bi-file-earmark-code me-2"></i>模板生成页面
</h5>
<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">
<div class="d-flex align-items-center">
<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}}
</span>
</div>
@ -73,6 +73,7 @@ const MainGeneratorPage = defineComponent({
</div>
</div>
</div>
`,
props: {
// 是否显示生成页面
@ -83,7 +84,9 @@ const MainGeneratorPage = defineComponent({
data() {
return {
// 控制图标状态的响应式变量
copied: false
copied: ref(false),
// 存储 offcanvas 实例
offcanvas: ref(null)
}
},
methods: {
@ -153,7 +156,24 @@ const MainGeneratorPage = defineComponent({
/* 关闭窗口 */
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>
</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>
<div id="app">
<div class="container my-4">
@ -50,7 +74,7 @@
: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>
</div>
</div>
@ -152,8 +176,8 @@
else antd.message.success(message);
// 显示生成的页面
this.generatorPageFlag = true;
this.generatorData = data;
this.generatorPageFlag = true;
// 等待 DOM 更新，之后手动更新代码高亮
await this.$nextTick();
@ -181,7 +205,7 @@
this.tableList = this.tableList.filter(table => table.tableName.includes(val) || table.tablePrefixes.includes(val));
}
},
}
},
});
// 注册组件