修复Dialog弹窗关闭按钮hover背景和图标显示问题

- 修复Element Plus Dialog关闭按钮hover时的灰色背景问题
- 优化弹窗关闭按钮的CSS样式，确保背景透明
- 添加全面的CSS修复覆盖所有状态（hover, active, focus）
- 修复SVG图标注册和显示问题
- 更新变更记录文档

修改文件：
- web/src/main.ts: 添加全面的Dialog关闭按钮CSS修复
- web/src/plugins/svgicon.ts: 优化图标注册
- docs/变更管理/code-adjust-record-2025-07-01-wuzilong.md: 记录修复过程

web/src/main.ts

@@ -1,3 +1,4 @@
+import { translateRouteTitle } from './utils/i18n';
 import { createApp } from 'vue';
 // global css
 import 'virtual:uno.css';
@@ -42,6 +43,10 @@ VXETable.setConfig({
 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);
@@ -54,4 +59,142 @@ 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');

web/src/plugins/svgicon.ts

@@ -6,5 +6,15 @@ export default {
     for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       app.component(key, component);
     }
+
+    // 确保Close图标被正确注册（用于Dialog关闭按钮）
+    if (ElementPlusIconsVue.Close) {
+      app.component('Close', ElementPlusIconsVue.Close);
+    }
+
+    // 备用：如果Close不存在，使用CircleClose
+    if (ElementPlusIconsVue.CircleClose && !ElementPlusIconsVue.Close) {
+      app.component('Close', ElementPlusIconsVue.CircleClose);
+    }
   }
 };