|
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>{% block title %}管理后台{% endblock %} - 肠愈同行管理系统</title>
- <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
- <!-- Element Plus CSS -->
- <link rel="stylesheet" href="/static/css/admin.css?v={{version}}">
- <!-- Tailwind CSS 4 -->
- <script src="/static/lib/tailwindcss/browser.js"></script>
- <link rel="stylesheet" href="/static/lib/element-plus/index.css?v={{version}}">
- <!-- Element Plus 主色调覆盖 -->
- <style>
- :root {
- --el-color-primary: #ff7800;
- --el-color-primary-light-1: #ff861a;
- --el-color-primary-light-2: #ff9333;
- --el-color-primary-light-3: #ffa14d;
- --el-color-primary-light-4: #ffae66;
- --el-color-primary-light-5: #ffbc80;
- --el-color-primary-light-6: #ffc999;
- --el-color-primary-light-7: #ffd7b3;
- --el-color-primary-light-8: #ffe4cc;
- --el-color-primary-light-9: #fff2e6;
- --el-color-primary-dark-2: #cc6000;
- }
- /* 修复 Tailwind CSS 4 与 Element Plus 表格冲突 */
- .el-table table { display: table; }
- .el-table thead { display: table-header-group; }
- .el-table tbody { display: table-row-group; }
- .el-table tr { display: table-row; }
- .el-table th, .el-table td { display: table-cell; }
- /* 防止 Vue 挂载前闪烁未编译模板 */
- [v-cloak] { display: none !important; }
- /* 侧边栏栏目菜单:防止加载闪烁 */
- #columnMenuGroup:empty { min-height: 200px; }
- /* 防止残留遮罩层阻止页面交互 */
- body > .el-overlay:not(:has(.el-dialog)):not(:has(.el-message-box)):not(:has(.el-drawer)) {
- display: none !important;
- }
- </style>
- {% block css %}{% endblock %}
- </head>
- <body data-page="{{ currentPage }}">
- <div class="admin-layout" id="app">
- {% include "./common/_sidebar.html" %}
-
- <div class="main-area">
- {% include "./common/_header.html" %}
-
- <div class="page-content">
- {% block content %}{% endblock %}
- <div id="watermarkWrap" style="position:fixed;top:0;left:210px;right:0;bottom:0;pointer-events:none;z-index:999;overflow:hidden;"></div>
- </div>
- </div>
- </div>
-
- <!-- Vue 3.5 -->
- <script src="/static/lib/vue/vue.global.prod.js"></script>
- <!-- Element Plus -->
- <script src="/static/lib/element-plus/index.full.min.js"></script>
- <!-- Element Plus Icons -->
- <script src="/static/lib/element-plus-icons/index.js"></script>
- <!-- Element Plus 中文语言包 -->
- <script src="/static/lib/element-plus/locale/zh-cn.min.js"></script>
- <!-- 水印 -->
- <script>
- (function() {
- var wmEl = document.getElementById('watermarkWrap');
- if (!wmEl) return;
- wmEl.innerHTML = '<el-watermark :content="text" :font="font" style="width:100%;height:100%;"></el-watermark>';
- var wApp = Vue.createApp({
- delimiters: ['[[', ']]'],
- setup: function() {
- return {
- text: '{{ adminUser.nickname or adminUser.username or "" }}',
- font: { fontSize: 14, color: 'rgba(0,0,0,0.08)' }
- };
- }
- });
- wApp.use(ElementPlus);
- wApp.mount(wmEl);
- })();
- </script>
- {% block js %}{% endblock %}
- <script>
- // 菜单展开/收起
- document.querySelectorAll('.menu-parent > .menu-item').forEach(item => {
- item.addEventListener('click', () => {
- item.parentElement.classList.toggle('open');
- });
- });
- // 清理残留的 Element Plus 遮罩层
- (function cleanOverlays() {
- function removeStaleOverlays() {
- document.querySelectorAll('body > .el-overlay').forEach(function(el) {
- // 只移除空的 overlay(没有弹窗内容的)
- if (!el.querySelector('.el-dialog, .el-message-box, .el-drawer')) {
- el.remove();
- }
- });
- }
- removeStaleOverlays();
- // 延迟再清理一次(等待异步脚本执行完)
- setTimeout(removeStaleOverlays, 100);
- setTimeout(removeStaleOverlays, 500);
- // 监听 body 子节点变化,及时清理新插入的空 overlay
- if (window.MutationObserver) {
- new MutationObserver(function(mutations) {
- mutations.forEach(function(m) {
- m.addedNodes.forEach(function(node) {
- if (node.nodeType === 1 && node.classList && node.classList.contains('el-overlay') &&
- !node.querySelector('.el-dialog, .el-message-box, .el-drawer')) {
- // 延迟检查,给 Vue 渲染内容的时间
- setTimeout(function() {
- if (!node.querySelector('.el-dialog, .el-message-box, .el-drawer')) {
- node.remove();
- }
- }, 50);
- }
- });
- });
- }).observe(document.body, { childList: true });
- }
- })();
- </script>
- </body>
- </html>
|