lanxi/window-axis-innovators-box
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(browser): 实现主题和字体动态更新功能

Browse Source 
- 移除重复的字体信息注入逻辑
- 添加 updateTheme 方法统一处理主题和字体更新
- 在 setVisible 方法中调用 updateTheme 确保显示时更新
-优化 JavaScript 中的主题应用逻辑，增强兼容性
- 增强 HTML 页面中的主题监听和字体应用功能
- 添加事件计数器和调试信息用于追踪主题变化
This commit is contained in:
tzdwindows 7
2025-10-07 17:07:15 +08:00
parent 9eede23a94
commit efc73c935d
3 changed files with 296 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
javascript/DatabaseTool.html
View File

@@ -208,7 +208,7 @@
.quick-create-table:hover{opacity:0.9} .quick-create-table:hover{opacity:0.9}
</style> </style>
</head> </head>
<body data-theme="light"> <body>
<header> <header>
<div class="logo"> <div class="logo">
<div class="mark">AI</div> <div class="mark">AI</div>
@@ -515,6 +515,21 @@
</div> </div>
<script> <script>
window.eventCounter = {
javaFontsLoaded: 0,
javaThemeChanged: 0
};
document.addEventListener('javaThemeChanged', function(event) {
window.eventCounter.javaThemeChanged++;
console.log('事件详情:', event.detail);
if (typeof applyJavaTheme === 'function') {
applyJavaTheme(event.detail);
}
}, true);
// Java 通信对象（与你的 Java 交互） // Java 通信对象（与你的 Java 交互）
const JavaBridge = { const JavaBridge = {
sendRequest: function(request, callback) { sendRequest: function(request, callback) {
@@ -611,20 +626,28 @@
} }
// 主题支持（auto / light / dark） // 主题支持（auto / light / dark）
(function themeInit(){ // 修复后的主题支持
const body = document.body; //(function themeInit(){
let mode = localStorage.getItem('dbToolTheme') || 'light'; // const body = document.body;
applyTheme(mode); // const themeToggle = document.getElementById('themeToggle');
document.getElementById('themeToggle').addEventListener('click', () => { //
mode = (mode === 'light') ? 'dark' : 'light'; // let currentTheme = localStorage.getItem('dbToolTheme') || 'light';
localStorage.setItem('dbToolTheme', mode); //
applyTheme(mode); // applyTheme(currentTheme);
}); //
function applyTheme(m){ // themeToggle.addEventListener('click', () => {
body.setAttribute('data-theme', m); // const currentTheme = body.getAttribute('data-theme');
document.getElementById('themeToggle').textContent = m === 'light' ? '🌙' : '☀️'; // const newTheme = currentTheme === 'light' ? 'dark' : 'light';
} //
})(); // localStorage.setItem('dbToolTheme', newTheme);
// applyTheme(newTheme);
// });
//
// function applyTheme(theme){
// body.setAttribute('data-theme', theme);
// themeToggle.textContent = theme === 'light' ? '🌙' : '☀️';
// }
//})();
// 绑定工具面板切换 // 绑定工具面板切换
document.getElementById('toolsToggle').addEventListener('click', () => { document.getElementById('toolsToggle').addEventListener('click', () => {
@@ -1769,6 +1792,189 @@
searchTerm ? `找到 ${matchCount} 个匹配项` : ''; searchTerm ? `找到 ${matchCount} 个匹配项` : '';
}); });
// 监听Java字体加载完成事件
document.addEventListener('javaFontsLoaded', function(event) {
const fontInfo = event.detail;
console.log('接收到Java字体信息:', fontInfo);
// 应用Java字体到编辑器
applyJavaFonts(fontInfo);
});
// 应用Java字体的函数 - 修复版本
function applyJavaFonts(fontInfo) {
const uiFonts = fontInfo.uiFonts || {};
const defaultFont = fontInfo.defaultFont || uiFonts['Label.font'] || {};
if (defaultFont && defaultFont.family) {
const fontFamily = defaultFont.family;
const fontSize = defaultFont.size || 14;
const fontWeight = defaultFont.bold ? 'bold' : 'normal';
const fontStyle = defaultFont.italic ? 'italic' : 'normal';
// 移除之前可能存在的字体样式
const existingStyle = document.getElementById('java-fonts-style');
if (existingStyle) {
existingStyle.remove();
}
// 创建字体样式 - 增加优先级和更全面的覆盖
const style = document.createElement('style');
style.id = 'java-fonts-style';
style.textContent = `
/* 强制应用Java字体到所有元素 */
* {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
}
/* 特定元素覆盖 */
body, html {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
font-size: ${fontSize}px !important;
}
.toolbar, button, select, input {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
font-size: ${fontSize}px !important;
}
.log-item {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
font-size: ${fontSize}px !important;
}
/* CodeMirror 编辑器字体 */
.CodeMirror, .CodeMirror * {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
font-size: ${fontSize}px !important;
}
.CodeMirror pre, .CodeMirror-code, .CodeMirror-line {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
font-size: ${fontSize}px !important;
}
.query-editor, .editor-content, textarea {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
font-size: ${fontSize}px !important;
}
table, th, td {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
}
.sidebar-item, .sidebar-title {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
}
.modal, .form-control {
font-family: '${fontFamily}', 'Fira Code', 'JetBrains Mono', monospace !important;
}
`;
// 添加到文档头
document.head.appendChild(style);
console.log('Java字体已应用到HTML界面:', fontFamily, fontSize + 'px');
// 强制刷新CodeMirror编辑器
if (window.editor) {
setTimeout(() => {
editor.refresh();
// 重新设置内容以触发完全重绘
const content = editor.getValue();
editor.setValue('');
editor.setValue(content);
// 额外的刷新确保字体应用
setTimeout(() => {
editor.refresh();
}, 100);
}, 50);
}
// 记录字体应用事件
addEventLog('字体应用', `已应用字体: ${fontFamily} ${fontSize}px`);
}
}
// 应用Java主题的函数
function applyJavaTheme(themeInfo) {
console.log('🎨 开始应用Java主题，原始数据:', themeInfo);
// 复用现有的主题处理逻辑
let isDarkTheme;
if (typeof themeInfo.isDarkTheme === 'boolean') {
isDarkTheme = themeInfo.isDarkTheme;
} else if (typeof themeInfo.isDarkTheme === 'string') {
// 处理字符串类型的布尔值
isDarkTheme = themeInfo.isDarkTheme === 'true' || themeInfo.isDarkTheme === '1';
console.log('🔄 转换字符串布尔值:', themeInfo.isDarkTheme, '->', isDarkTheme);
} else {
// 默认值
isDarkTheme = false;
console.warn('⚠️ 无法识别isDarkTheme值，使用默认值false');
}
console.log('🎯 最终isDarkTheme值:', isDarkTheme);
// 直接调用页面现有的主题切换函数
const theme = isDarkTheme ? 'dark' : 'light';
const body = document.body;
// 添加强制刷新CSS的函数
function forceThemeRefresh() {
// 强制重新计算CSS
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
// 临时移除再重新添加data-theme属性
body.removeAttribute('data-theme');
setTimeout(() => {
body.setAttribute('data-theme', currentTheme);
console.log('强制刷新主题:', currentTheme);
}, 10);
}
function applyTheme(m){
body.setAttribute('data-theme', m);
document.getElementById('themeToggle').textContent = m === 'light' ? '🌙' : '☀️';
}
// 方法1: 调用现有的 applyTheme 函数
if (typeof applyTheme === 'function') {
applyTheme(theme);
forceThemeRefresh();
console.log('✅ 调用现有applyTheme函数:', theme);
}
const codeMirrorTheme = isDarkTheme ? 'material-darker' : 'nord';
if (window.editor) {
editor.setOption('theme', codeMirrorTheme);
}
const themeSelector = document.getElementById('theme-selector');
if (themeSelector) {
themeSelector.value = theme;
}
console.log('✅ Java主题已应用到HTML界面:', isDarkTheme ? '深色主题' : '浅色主题');
addEventLog('主题应用', `已应用${isDarkTheme ? '深色' : '浅色'}主题`);
}
// 辅助函数：添加事件日志
function addEventLog(type, message) {
const output = document.getElementById('output');
if (output) {
const timestamp = new Date().toLocaleTimeString();
const logItem = document.createElement('div');
logItem.className = `log-item ${type === 'error' ? 'error' : ''}`;
logItem.innerHTML = `
<i class="fas fa-info-circle"></i>
${timestamp}: ${message}
`;
output.appendChild(logItem);
output.scrollTop = output.scrollHeight;
}
}
// 初始化（模拟触发字体加载回调） // 初始化（模拟触发字体加载回调）
document.addEventListener('DOMContentLoaded', ()=>{ document.addEventListener('DOMContentLoaded', ()=>{
// 初始化 localDbPath // 初始化 localDbPath
@@ -1784,6 +1990,26 @@
}); });
}, 600); }, 600);
}); });
document.addEventListener('DOMContentLoaded', function() {
// 监听所有对data-theme的修改
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
console.log('主题被修改:', mutation.oldValue, '->', document.body.getAttribute('data-theme'));
console.trace('调用堆栈');
}
});
});
observer.observe(document.body, {
attributes: true,
attributeFilter: ['data-theme'],
attributeOldValue: true
});
console.log('主题调试已启动');
});
</script> </script>
</body> </body>
</html> </html>

84
src/main/java/com/axis/innovators/box/browser/BrowserWindow.java
View File

@@ -223,7 +223,6 @@ public class BrowserWindow extends JFrame {
} }
} }
private Component initializeCef(Builder builder) throws MalformedURLException { private Component initializeCef(Builder builder) throws MalformedURLException {
if (!isInitialized) { if (!isInitialized) {
isInitialized = true; isInitialized = true;
@@ -471,9 +470,6 @@ public class BrowserWindow extends JFrame {
browser = client.createBrowser(htmlUrl, false, false); browser = client.createBrowser(htmlUrl, false, false);
} }
String fontInfo = getSystemFontsInfo();
injectFontInfoToPage(browser, fontInfo);
Component browserComponent = browser.getUIComponent(); Component browserComponent = browser.getUIComponent();
if (builder.browserCreationCallback != null) { if (builder.browserCreationCallback != null) {
boolean handled = builder.browserCreationCallback.onLayoutCustomization( boolean handled = builder.browserCreationCallback.onLayoutCustomization(
@@ -508,6 +504,7 @@ public class BrowserWindow extends JFrame {
config.jsQueryFunction = "javaQuery";// 定义方法 config.jsQueryFunction = "javaQuery";// 定义方法
config.jsCancelFunction = "javaQueryCancel";// 定义取消方法 config.jsCancelFunction = "javaQueryCancel";// 定义取消方法
updateTheme();
// 6. 配置窗口布局（确保只添加一次） // 6. 配置窗口布局（确保只添加一次）
SwingUtilities.invokeLater(() -> { SwingUtilities.invokeLater(() -> {
@@ -585,11 +582,11 @@ public class BrowserWindow extends JFrame {
public void updateTheme() { public void updateTheme() {
// 1. 获取Java字体信息 // 1. 获取Java字体信息
String fontInfo = getSystemFontsInfo(); String fontInfo = getSystemFontsInfo();
injectFontInfoToPage(browser, fontInfo); boolean isDarkTheme = AxisInnovatorsBox.getMain().getRegistrationTopic().isDarkMode();
injectFontInfoToPage(browser, fontInfo, isDarkTheme);
// 2. 注入主题信息 // 2. 注入主题信息
boolean isDarkTheme = AxisInnovatorsBox.getMain().getRegistrationTopic().isDarkMode(); //injectThemeInfoToPage(browser, isDarkTheme);
injectThemeInfoToPage(browser, isDarkTheme);
//// 3. 刷新浏览器 //// 3. 刷新浏览器
//SwingUtilities.invokeLater(() -> { //SwingUtilities.invokeLater(() -> {
@@ -650,44 +647,31 @@ public class BrowserWindow extends JFrame {
return; return;
} }
client.addLoadHandler(new CefLoadHandlerAdapter() { String themeInfo = String.format(
@Override "{\"isDarkTheme\": %s, \"timestamp\": %d}",
public void onLoadEnd(CefBrowser browser, CefFrame frame, int httpStatusCode) { isDarkTheme,
String themeInfo = String.format( System.currentTimeMillis()
"{\"isDarkTheme\": %s, \"timestamp\": %d}", );
isDarkTheme,
System.currentTimeMillis()
);
String script = // 最简单的脚本 - 直接设置和分发事件
"window.javaThemeInfo = " + themeInfo + ";\n" + String script = String.format(
"console.log('Java theme information has been loaded:', window.javaThemeInfo);\n" + "window.javaThemeInfo = %s;" +
"\n" + "console.log('主题信息已设置:', window.javaThemeInfo);" +
"if (typeof applyJavaTheme === 'function') {\n" + "" +
" applyJavaTheme(window.javaThemeInfo);\n" + "var event = new CustomEvent('javaThemeChanged', {" +
"}\n" + " detail: window.javaThemeInfo" +
"\n" + "});" +
"var event = new CustomEvent('javaThemeChanged', {\n" + "document.dispatchEvent(event);" +
" detail: window.javaThemeInfo\n" + "console.log('javaThemeChanged事件已分发');",
"});\n" + themeInfo);
"document.dispatchEvent(event);\n" +
"console.log('The javaThemeChanged event is dispatched');";
browser.executeJavaScript(script, browser.getURL(), 0); browser.executeJavaScript(script, browser.getURL(), 0);
browser.executeJavaScript(
"console.log('Theme information injection is complete，window.javaThemeInfo:', typeof window.javaThemeInfo);" +
"console.log('Number of theme event listeners:', document.eventListeners ? document.eventListeners('javaThemeChanged') : '无法获取');",
browser.getURL(), 0
);
}
});
} }
/** /**
* 注入字体信息到页面并设置字体 * 注入字体信息到页面并设置字体
*/ */
private void injectFontInfoToPage(CefBrowser browser, String fontInfo) { private void injectFontInfoToPage(CefBrowser browser, String fontInfo,boolean isDarkTheme) {
if (client == null) { if (client == null) {
return; return;
} }
@@ -715,6 +699,25 @@ public class BrowserWindow extends JFrame {
"console.log('Number of event listeners:', document.eventListeners ? document.eventListeners('javaFontsLoaded') : '无法获取');", "console.log('Number of event listeners:', document.eventListeners ? document.eventListeners('javaFontsLoaded') : '无法获取');",
browser.getURL(), 0 browser.getURL(), 0
); );
String themeInfo = String.format(
"{\"isDarkTheme\": %s, \"timestamp\": %d}",
isDarkTheme,
System.currentTimeMillis()
);
script = String.format(
"window.javaThemeInfo = %s;" +
"console.log('主题信息已设置:', window.javaThemeInfo);" +
"" +
"var event = new CustomEvent('javaThemeChanged', {" +
" detail: window.javaThemeInfo" +
"});" +
"document.dispatchEvent(event);" +
"console.log('javaThemeChanged事件已分发');",
themeInfo);
browser.executeJavaScript(script, browser.getURL(), 0);
} }
}); });
@@ -732,6 +735,11 @@ public class BrowserWindow extends JFrame {
@Override @Override
public void setVisible(boolean b) { public void setVisible(boolean b) {
if (b) {
if (browser != null) {
updateTheme();
}
}
super.setVisible(b); super.setVisible(b);
} }

11
src/main/java/com/axis/innovators/box/browser/BrowserWindowJDialog.java
View File

@@ -513,8 +513,7 @@ public class BrowserWindowJDialog extends JDialog {
} }
} }
String fontInfo = getSystemFontsInfo(); updateTheme();
injectFontInfoToPage(browser, fontInfo);
CefMessageRouter.CefMessageRouterConfig config = new CefMessageRouter.CefMessageRouterConfig(); CefMessageRouter.CefMessageRouterConfig config = new CefMessageRouter.CefMessageRouterConfig();
config.jsQueryFunction = "javaQuery";// 定义方法 config.jsQueryFunction = "javaQuery";// 定义方法
@@ -593,6 +592,8 @@ public class BrowserWindowJDialog extends JDialog {
return null; return null;
} }
/** /**
* 更新主题 * 更新主题
*/ */
@@ -609,6 +610,7 @@ public class BrowserWindowJDialog extends JDialog {
//SwingUtilities.invokeLater(() -> { //SwingUtilities.invokeLater(() -> {
// browser.reload(); // browser.reload();
//}); //});
} }
private void injectThemeInfoToPage(CefBrowser browser, boolean isDarkTheme) { private void injectThemeInfoToPage(CefBrowser browser, boolean isDarkTheme) {
if (client == null) { if (client == null) {
@@ -744,6 +746,11 @@ public class BrowserWindowJDialog extends JDialog {
@Override @Override
public void setVisible(boolean b) { public void setVisible(boolean b) {
if (b) {
if (browser != null) {
updateTheme();
}
}
super.setVisible(b); super.setVisible(b);
} }