all-project/web/src/main.ts

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);