240 lines
5.9 KiB
TypeScript
240 lines
5.9 KiB
TypeScript
import { translateRouteTitle } from './utils/i18n';
|
|
import { createApp } from 'vue';
|
|
// global css
|
|
import 'virtual:uno.css';
|
|
import '@/assets/styles/index.scss';
|
|
import 'element-plus/theme-chalk/dark/css-vars.css';
|
|
|
|
// App、router、store
|
|
import App from './App.vue';
|
|
import store from './store';
|
|
import router from './router';
|
|
|
|
// 自定义指令
|
|
import directive from './directive';
|
|
|
|
// 注册插件
|
|
import plugins from './plugins/index'; // plugins
|
|
|
|
// 高亮组件
|
|
// import 'highlight.js/styles/a11y-light.css';
|
|
import 'highlight.js/styles/atom-one-dark.css';
|
|
import 'highlight.js/lib/common';
|
|
import HighLight from '@highlightjs/vue-plugin';
|
|
|
|
// svg图标
|
|
import 'virtual:svg-icons-register';
|
|
import ElementIcons from '@/plugins/svgicon';
|
|
|
|
// permission control
|
|
import './permission';
|
|
|
|
// 国际化
|
|
import i18n from '@/lang/index';
|
|
|
|
// vxeTable
|
|
import VXETable from 'vxe-table';
|
|
import 'vxe-table/lib/style.css';
|
|
VXETable.setConfig({
|
|
zIndex: 999999
|
|
});
|
|
|
|
// 修改 el-dialog 默认点击遮照为不关闭
|
|
import { ElDialog } from 'element-plus';
|
|
ElDialog.props.closeOnClickModal.default = false;
|
|
|
|
// 全局配置Element Plus图标
|
|
import { ElConfigProvider } from 'element-plus';
|
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
|
|
|
const app = createApp(App);
|
|
|
|
app.use(HighLight);
|
|
app.use(ElementIcons);
|
|
app.use(router);
|
|
app.use(store);
|
|
app.use(i18n);
|
|
app.use(VXETable);
|
|
app.use(plugins);
|
|
// 自定义指令
|
|
directive(app);
|
|
|
|
// 修复Element Plus Dialog关闭按钮图标显示问题
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
/* Element Plus Dialog 关闭按钮图标修复 */
|
|
.el-dialog__headerbtn {
|
|
position: absolute !important;
|
|
top: 6px !important;
|
|
right: 0 !important;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
cursor: pointer !important;
|
|
font-size: 16px !important;
|
|
color: #909399 !important;
|
|
width: 54px !important;
|
|
height: 54px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.el-dialog__headerbtn:hover {
|
|
color: #409eff !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* 彻底去除所有状态下的背景色 */
|
|
.el-dialog__headerbtn:active,
|
|
.el-dialog__headerbtn:focus,
|
|
.el-dialog__headerbtn:focus-visible {
|
|
background: transparent !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* 去除所有子元素的背景 */
|
|
.el-dialog__headerbtn *,
|
|
.el-dialog__headerbtn:before,
|
|
.el-dialog__headerbtn:after,
|
|
.el-dialog__headerbtn .el-icon:before,
|
|
.el-dialog__headerbtn .el-icon:after {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
|
|
|
|
/* 去除hover状态下所有子元素的背景 */
|
|
.el-dialog__headerbtn:hover *,
|
|
.el-dialog__headerbtn:hover:before,
|
|
.el-dialog__headerbtn:hover:after,
|
|
.el-dialog__headerbtn:hover .el-icon:before,
|
|
.el-dialog__headerbtn:hover .el-icon:after {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* 隐藏Element Plus弹窗和消息框关闭按钮的颜色 */
|
|
.el-message-box__headerbtn .el-message-box__close,
|
|
.el-dialog__headerbtn .el-dialog__close {
|
|
/* color: transparent !important; */
|
|
}
|
|
|
|
.el-message-box__headerbtn .el-message-box__close:hover,
|
|
.el-dialog__headerbtn .el-dialog__close:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* 优先显示Element Plus原生图标 */
|
|
.el-dialog__headerbtn .el-icon {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
font-size: 16px !important;
|
|
position: relative !important;
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
.el-dialog__headerbtn .el-icon svg {
|
|
display: block !important;
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
}
|
|
|
|
/* Element Plus 菜单图标修复 */
|
|
.el-menu .el-icon {
|
|
font-family: "element-plus-icons" !important;
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
font-size: 16px !important;
|
|
display: inline-block !important;
|
|
vertical-align: middle !important;
|
|
-webkit-font-smoothing: antialiased !important;
|
|
-moz-osx-font-smoothing: grayscale !important;
|
|
}
|
|
|
|
/* 侧边栏菜单图标修复 */
|
|
.el-menu--vertical .el-icon,
|
|
.el-sub-menu .el-icon,
|
|
.el-menu-item .el-icon {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
font-size: 16px !important;
|
|
margin-right: 8px !important;
|
|
display: inline-block !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
/* 如果图标仍然不显示，为场地管理菜单提供特定的备选图标 */
|
|
.el-menu-item[data-menu-id="2210"]:before,
|
|
.el-menu-item:has(.menu-text:contains("场地管理")):before {
|
|
content: "🏢" !important;
|
|
margin-right: 8px !important;
|
|
font-size: 14px !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
/* 通用图标备选方案 */
|
|
.el-icon:empty:before {
|
|
content: "📋" !important;
|
|
display: inline-block !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/* 强制图标显示 */
|
|
.el-icon {
|
|
speak: none !important;
|
|
font-style: normal !important;
|
|
font-weight: normal !important;
|
|
font-variant: normal !important;
|
|
text-transform: none !important;
|
|
line-height: 1 !important;
|
|
vertical-align: baseline !important;
|
|
display: inline-block !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
app.mount('#app');
|
|
|
|
// 确保图标样式在最后加载
|
|
const iconStyle = document.createElement('style');
|
|
iconStyle.textContent = `
|
|
/* 全局图标样式修复 */
|
|
.el-icon {
|
|
display: inline-flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
height: 1em !important;
|
|
width: 1em !important;
|
|
vertical-align: middle !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.el-icon svg {
|
|
height: 1em !important;
|
|
width: 1em !important;
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
/* 按钮中的图标 */
|
|
.el-button .el-icon {
|
|
margin-right: 4px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.el-button.is-circle .el-icon {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
/* 菜单中的图标 */
|
|
.el-menu .el-icon,
|
|
.el-sub-menu .el-icon,
|
|
.el-menu-item .el-icon {
|
|
margin-right: 8px !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(iconStyle);
|