diff --git a/Release/database/XNSim.db b/Release/database/XNSim.db index 6a8fd1b..c43ade2 100644 Binary files a/Release/database/XNSim.db and b/Release/database/XNSim.db differ diff --git a/XNSimHtml/assets/icons/png/file-text.png b/XNSimHtml/assets/icons/png/file-text.png new file mode 100644 index 0000000..440b797 Binary files /dev/null and b/XNSimHtml/assets/icons/png/file-text.png differ diff --git a/XNSimHtml/assets/icons/png/file-text_b.png b/XNSimHtml/assets/icons/png/file-text_b.png new file mode 100644 index 0000000..5cac2da Binary files /dev/null and b/XNSimHtml/assets/icons/png/file-text_b.png differ diff --git a/XNSimHtml/components/content-area.js b/XNSimHtml/components/content-area.js index 29608a0..cad7cf8 100644 --- a/XNSimHtml/components/content-area.js +++ b/XNSimHtml/components/content-area.js @@ -141,6 +141,9 @@ class ContentArea extends HTMLElement { case 'users': contentElement = document.createElement('user-management'); break; + case 'system-log': + contentElement = document.createElement('system-log'); + break; default: contentElement = document.createElement('div'); contentElement.textContent = '正在开发中...'; diff --git a/XNSimHtml/components/main-toolbar.js b/XNSimHtml/components/main-toolbar.js index 8017248..01b74fc 100644 --- a/XNSimHtml/components/main-toolbar.js +++ b/XNSimHtml/components/main-toolbar.js @@ -97,8 +97,8 @@ class MainToolbar extends HTMLElement { 监控
- 系统管理 - 系统管理 + 管理 + 管理
diff --git a/XNSimHtml/components/sub-toolbar.js b/XNSimHtml/components/sub-toolbar.js index 6f80efb..b7e6b49 100644 --- a/XNSimHtml/components/sub-toolbar.js +++ b/XNSimHtml/components/sub-toolbar.js @@ -237,6 +237,10 @@ class SubToolbar extends HTMLElement { 个人中心 个人中心 +
+ 系统日志 + 系统日志 +
用户管理 用户管理 @@ -308,7 +312,7 @@ class SubToolbar extends HTMLElement { 'config': { icon: 'sliders', text: '配置' }, 'run': { icon: 'play', text: '运行' }, 'monitor': { icon: 'chart', text: '监控' }, - 'system': { icon: 'cogs', text: '系统管理' } + 'system': { icon: 'cogs', text: '管理' } }; const currentTool = toolIcons[this._currentTool] || toolIcons['home']; diff --git a/XNSimHtml/components/system-log.js b/XNSimHtml/components/system-log.js new file mode 100644 index 0000000..6937026 --- /dev/null +++ b/XNSimHtml/components/system-log.js @@ -0,0 +1,405 @@ +class SystemLog extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + this.render(); + this.addEventListeners(); + this.loadLogs(); + } + + render() { + this.shadowRoot.innerHTML = ` + +
+
+
+ 搜索 + +
+
+ + +
+
+ + +
+
+
+
+
时间
+
级别
+
来源
+
内容
+
+
+ +
+ +
+
+ `; + } + + addEventListeners() { + // 搜索框事件 + const searchInput = this.shadowRoot.querySelector('.search-box input'); + searchInput.addEventListener('input', this.debounce(() => { + this.filterLogs(); + }, 300)); + + // 级别筛选事件 + const levelFilter = this.shadowRoot.querySelector('#levelFilter'); + levelFilter.addEventListener('change', () => { + this.filterLogs(); + }); + + // 时间筛选事件 + const timeFilter = this.shadowRoot.querySelector('#timeFilter'); + timeFilter.addEventListener('change', () => { + this.filterLogs(); + }); + + // 刷新按钮事件 + const refreshBtn = this.shadowRoot.querySelector('#refreshBtn'); + refreshBtn.addEventListener('click', () => { + this.loadLogs(); + }); + + // 导出按钮事件 + const exportBtn = this.shadowRoot.querySelector('#exportBtn'); + exportBtn.addEventListener('click', () => { + this.exportLogs(); + }); + + // 分页按钮事件 + const prevPage = this.shadowRoot.querySelector('#prevPage'); + const nextPage = this.shadowRoot.querySelector('#nextPage'); + prevPage.addEventListener('click', () => { + this.changePage(-1); + }); + nextPage.addEventListener('click', () => { + this.changePage(1); + }); + } + + async loadLogs() { + try { + // 这里应该调用后端API获取日志数据 + // 示例数据 + const logs = [ + { + timestamp: '2024-03-20 10:00:00', + level: 'info', + source: '系统', + content: '系统启动成功' + }, + { + timestamp: '2024-03-20 10:01:00', + level: 'warning', + source: '数据库', + content: '数据库连接池接近最大连接数' + }, + { + timestamp: '2024-03-20 10:02:00', + level: 'error', + source: 'API', + content: 'API请求超时' + } + ]; + + this.renderLogs(logs); + } catch (error) { + console.error('加载日志失败:', error); + } + } + + renderLogs(logs) { + const logList = this.shadowRoot.querySelector('#logList'); + logList.innerHTML = logs.map(log => ` +
+
${log.timestamp}
+
${this.getLevelText(log.level)}
+
${log.source}
+
${log.content}
+
+ `).join(''); + } + + getLevelText(level) { + const levelMap = { + 'info': '信息', + 'warning': '警告', + 'error': '错误', + 'debug': '调试' + }; + return levelMap[level] || level; + } + + filterLogs() { + const searchText = this.shadowRoot.querySelector('.search-box input').value.toLowerCase(); + const levelFilter = this.shadowRoot.querySelector('#levelFilter').value; + const timeFilter = this.shadowRoot.querySelector('#timeFilter').value; + + // 这里应该根据筛选条件调用后端API获取过滤后的日志 + this.loadLogs(); + } + + exportLogs() { + // 实现日志导出功能 + console.log('导出日志'); + } + + changePage(delta) { + // 实现分页功能 + console.log('切换页面:', delta); + } + + debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } +} + +customElements.define('system-log', SystemLog); \ No newline at end of file diff --git a/XNSimHtml/main.html b/XNSimHtml/main.html index 1cde2a5..c3b0e57 100644 --- a/XNSimHtml/main.html +++ b/XNSimHtml/main.html @@ -17,6 +17,7 @@ + @@ -323,6 +324,14 @@ return; } + // 处理系统日志标签页 + if (title === '系统日志') { + const id = 'system-log'; + tabsContainer.createTab(id, title, icon, parentText, parentTool); + contentArea.loadContent(id); + return; + } + // 处理帮助标签页 if (title === '帮助') { const id = 'help';