feat: update auto render
This commit is contained in:
515
web/static/js/ui-controller.js
Normal file
515
web/static/js/ui-controller.js
Normal file
@@ -0,0 +1,515 @@
|
||||
/**
|
||||
* UI控制器 - 管理模板切换和用户界面交互
|
||||
*/
|
||||
class UIController {
|
||||
constructor() {
|
||||
this.currentTable = null;
|
||||
this.currentTemplate = 'list';
|
||||
this.availableTemplates = [];
|
||||
this.isLoading = false;
|
||||
this.searchTimeout = null;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化UI控制器
|
||||
*/
|
||||
init() {
|
||||
this.bindEvents();
|
||||
this.setupKeyboardShortcuts();
|
||||
this.setupResponsiveUI();
|
||||
this.loadFromURL();
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定事件监听器
|
||||
*/
|
||||
bindEvents() {
|
||||
// 表选择器
|
||||
const tableSelector = document.getElementById('tableSelector');
|
||||
if (tableSelector) {
|
||||
tableSelector.addEventListener('change', (e) => {
|
||||
this.changeTable(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索框
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
this.handleSearch(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
// 分页
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('pagination-link')) {
|
||||
e.preventDefault();
|
||||
const page = parseInt(e.target.dataset.page);
|
||||
this.goToPage(page);
|
||||
}
|
||||
});
|
||||
|
||||
// 排序
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('sort-header')) {
|
||||
e.preventDefault();
|
||||
const field = e.target.dataset.field;
|
||||
this.toggleSort(field);
|
||||
}
|
||||
});
|
||||
|
||||
// 模板切换
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('template-switch')) {
|
||||
e.preventDefault();
|
||||
const template = e.target.dataset.template;
|
||||
this.switchTemplate(template);
|
||||
}
|
||||
});
|
||||
|
||||
// 刷新按钮
|
||||
const refreshBtn = document.getElementById('refreshBtn');
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener('click', () => {
|
||||
this.refreshData();
|
||||
});
|
||||
}
|
||||
|
||||
// 浏览器历史记录
|
||||
window.addEventListener('popstate', () => {
|
||||
this.loadFromURL();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置键盘快捷键
|
||||
*/
|
||||
setupKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl/Cmd + R: 刷新
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
|
||||
e.preventDefault();
|
||||
this.refreshData();
|
||||
}
|
||||
|
||||
// Ctrl/Cmd + K: 聚焦搜索
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
if (searchInput) searchInput.focus();
|
||||
}
|
||||
|
||||
// Escape: 关闭详情弹窗
|
||||
if (e.key === 'Escape') {
|
||||
this.closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置响应式UI
|
||||
*/
|
||||
setupResponsiveUI() {
|
||||
// 监听窗口大小变化
|
||||
let resizeTimeout;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
this.adjustUILayout();
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 调整UI布局
|
||||
*/
|
||||
adjustUILayout() {
|
||||
const width = window.innerWidth;
|
||||
const container = document.getElementById('mainContent');
|
||||
|
||||
if (!container) return;
|
||||
|
||||
if (width < 768) {
|
||||
container.classList.add('mobile-layout');
|
||||
container.classList.remove('desktop-layout');
|
||||
} else {
|
||||
container.classList.add('desktop-layout');
|
||||
container.classList.remove('mobile-layout');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从URL加载配置
|
||||
*/
|
||||
loadFromURL() {
|
||||
const url = new URL(window.location);
|
||||
const table = url.searchParams.get('table');
|
||||
const template = url.searchParams.get('template') || 'list';
|
||||
const page = parseInt(url.searchParams.get('page')) || 1;
|
||||
const search = url.searchParams.get('search') || '';
|
||||
|
||||
if (table) {
|
||||
this.currentTable = table;
|
||||
this.currentTemplate = template;
|
||||
this.loadTableData(table, { page, search, template });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换数据表
|
||||
* @param {string} tableName - 表名
|
||||
*/
|
||||
async changeTable(tableName) {
|
||||
if (this.isLoading) return;
|
||||
|
||||
this.currentTable = tableName;
|
||||
this.currentTemplate = 'list'; // 重置为默认模板
|
||||
|
||||
try {
|
||||
// 并行获取可用模板和预加载模板
|
||||
const [templates] = await Promise.all([
|
||||
apiClient.getAvailableTemplates(tableName),
|
||||
templateEngine.preloadTemplates(tableName, ['list', 'card'])
|
||||
]);
|
||||
|
||||
this.availableTemplates = templates.templates;
|
||||
this.renderTemplateSelector();
|
||||
|
||||
// 加载数据
|
||||
await this.loadTableData(tableName);
|
||||
|
||||
// 更新URL
|
||||
this.updateURL();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to change table:', error);
|
||||
this.showError('切换数据表失败：' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换模板
|
||||
* @param {string} templateName - 模板名称
|
||||
*/
|
||||
async switchTemplate(templateName) {
|
||||
if (this.isLoading || !this.currentTable) return;
|
||||
|
||||
this.currentTemplate = templateName;
|
||||
|
||||
try {
|
||||
await templateEngine.switchTemplate(templateName);
|
||||
this.updateURL();
|
||||
this.updateTemplateSelector(templateName);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to switch template:', error);
|
||||
this.showError('切换模板失败：' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载数据表数据
|
||||
* @param {string} tableName - 表名
|
||||
* @param {Object} options - 选项
|
||||
*/
|
||||
async loadTableData(tableName, options = {}) {
|
||||
const {
|
||||
page = 1,
|
||||
perPage = 20,
|
||||
search = '',
|
||||
sort = '',
|
||||
order = 'desc',
|
||||
template = this.currentTemplate
|
||||
} = options;
|
||||
|
||||
this.showLoading();
|
||||
|
||||
try {
|
||||
const rendered = await templateEngine.renderTable(tableName, {
|
||||
page,
|
||||
perPage,
|
||||
search,
|
||||
sort,
|
||||
order,
|
||||
template
|
||||
});
|
||||
|
||||
this.updateContent(rendered);
|
||||
this.renderPagination({ page, perPage, total: templateEngine.currentData?.total || 0 });
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load table data:', error);
|
||||
this.showError('加载数据失败：' + error.message);
|
||||
} finally {
|
||||
this.hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染模板选择器
|
||||
*/
|
||||
renderTemplateSelector() {
|
||||
const container = document.getElementById('templateSelector');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-sm text-gray-600">视图:</span>
|
||||
${this.availableTemplates.map(template => `
|
||||
<button
|
||||
class="template-switch px-3 py-1 text-sm rounded ${
|
||||
template === this.currentTemplate
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}"
|
||||
data-template="${template}"
|
||||
>
|
||||
${this.getTemplateDisplayName(template)}
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新模板选择器状态
|
||||
* @param {string} activeTemplate - 当前激活的模板
|
||||
*/
|
||||
updateTemplateSelector(activeTemplate) {
|
||||
const buttons = document.querySelectorAll('.template-switch');
|
||||
buttons.forEach(btn => {
|
||||
if (btn.dataset.template === activeTemplate) {
|
||||
btn.className = 'template-switch px-3 py-1 text-sm rounded bg-blue-500 text-white';
|
||||
} else {
|
||||
btn.className = 'template-switch px-3 py-1 text-sm rounded bg-gray-200 text-gray-700 hover:bg-gray-300';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模板显示名称
|
||||
* @param {string} template - 模板名称
|
||||
*/
|
||||
getTemplateDisplayName(template) {
|
||||
const names = {
|
||||
'list': '列表',
|
||||
'card': '卡片',
|
||||
'timeline': '时间轴'
|
||||
};
|
||||
return names[template] || template;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染分页
|
||||
* @param {Object} pagination - 分页信息
|
||||
*/
|
||||
renderPagination({ page, perPage, total }) {
|
||||
const container = document.getElementById('pagination');
|
||||
if (!container) return;
|
||||
|
||||
const pages = Math.ceil(total / perPage);
|
||||
const startPage = Math.max(1, page - 2);
|
||||
const endPage = Math.min(pages, page + 2);
|
||||
|
||||
let html = `
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-sm text-gray-700">
|
||||
共 ${total} 条记录，第 ${page} / ${pages} 页
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
`;
|
||||
|
||||
if (page > 1) {
|
||||
html += `
|
||||
<button class="pagination-link px-3 py-1 text-sm border rounded hover:bg-gray-50" data-page="${page - 1}">
|
||||
上一页
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
html += `
|
||||
<button class="pagination-link px-3 py-1 text-sm border rounded ${
|
||||
i === page ? 'bg-blue-500 text-white' : 'hover:bg-gray-50'
|
||||
}" data-page="${i}">
|
||||
${i}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
if (page < pages) {
|
||||
html += `
|
||||
<button class="pagination-link px-3 py-1 text-sm border rounded hover:bg-gray-50" data-page="${page + 1}">
|
||||
下一页
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
html += `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理搜索
|
||||
* @param {string} query - 搜索关键词
|
||||
*/
|
||||
handleSearch(query) {
|
||||
clearTimeout(this.searchTimeout);
|
||||
|
||||
this.searchTimeout = setTimeout(() => {
|
||||
if (this.currentTable) {
|
||||
this.loadTableData(this.currentTable, { search: query, page: 1 });
|
||||
this.updateURL();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到指定页面
|
||||
* @param {number} page - 页码
|
||||
*/
|
||||
goToPage(page) {
|
||||
if (this.currentTable) {
|
||||
this.loadTableData(this.currentTable, { page });
|
||||
this.updateURL();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换排序
|
||||
* @param {string} field - 排序字段
|
||||
*/
|
||||
toggleSort(field) {
|
||||
const url = new URL(window.location);
|
||||
const currentSort = url.searchParams.get('sort');
|
||||
const currentOrder = url.searchParams.get('order') || 'asc';
|
||||
|
||||
let newOrder = 'asc';
|
||||
if (currentSort === field && currentOrder === 'asc') {
|
||||
newOrder = 'desc';
|
||||
}
|
||||
|
||||
if (this.currentTable) {
|
||||
this.loadTableData(this.currentTable, {
|
||||
sort: field,
|
||||
order: newOrder,
|
||||
page: 1
|
||||
});
|
||||
this.updateURL();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新数据
|
||||
*/
|
||||
async refreshData() {
|
||||
if (this.currentTable) {
|
||||
templateEngine.clearCache();
|
||||
await this.loadTableData(this.currentTable);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新URL参数
|
||||
*/
|
||||
updateURL() {
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('table', this.currentTable);
|
||||
url.searchParams.set('template', this.currentTemplate);
|
||||
|
||||
const currentOptions = this.getCurrentOptions();
|
||||
if (currentOptions.page > 1) {
|
||||
url.searchParams.set('page', currentOptions.page);
|
||||
} else {
|
||||
url.searchParams.delete('page');
|
||||
}
|
||||
|
||||
if (currentOptions.search) {
|
||||
url.searchParams.set('search', currentOptions.search);
|
||||
} else {
|
||||
url.searchParams.delete('search');
|
||||
}
|
||||
|
||||
window.history.pushState({}, '', url);
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示加载状态
|
||||
*/
|
||||
showLoading() {
|
||||
this.isLoading = true;
|
||||
const container = document.getElementById('mainContent');
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div class="flex justify-center items-center h-64">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<span class="ml-3 text-gray-600">加载中...</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏加载状态
|
||||
*/
|
||||
hideLoading() {
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新内容
|
||||
* @param {string} content - 内容HTML
|
||||
*/
|
||||
updateContent(content) {
|
||||
const container = document.getElementById('mainContent');
|
||||
if (container) {
|
||||
container.innerHTML = content;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示错误消息
|
||||
* @param {string} message - 错误消息
|
||||
*/
|
||||
showError(message) {
|
||||
const container = document.getElementById('mainContent');
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div class="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<div class="flex">
|
||||
<div class="text-red-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">错误</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<p>${message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭模态框
|
||||
*/
|
||||
closeModal() {
|
||||
const modal = document.getElementById('detailModal');
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全局UI控制器实例
|
||||
window.uiController = new UIController();
|
||||
Reference in New Issue
Block a user