feat: update auto render
This commit is contained in:
460
web/static/js/template-engine.js
Normal file
460
web/static/js/template-engine.js
Normal file
@@ -0,0 +1,460 @@
|
||||
/**
|
||||
* 模板引擎 - 动态模板渲染系统
|
||||
*/
|
||||
class TemplateEngine {
|
||||
constructor() {
|
||||
this.templates = new Map();
|
||||
this.cache = new Map();
|
||||
this.currentTable = null;
|
||||
this.currentTemplate = 'list';
|
||||
this.currentData = null;
|
||||
this.isLoading = false;
|
||||
this.preloadQueue = new Set();
|
||||
this.cacheLimit = 50; // 限制缓存大小
|
||||
this.cacheAccess = new Map(); // 记录缓存访问时间，用于LRU
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载模板
|
||||
* @param {string} templateName - 模板名称
|
||||
* @param {string} tableName - 表名
|
||||
*/
|
||||
async loadTemplate(templateName, tableName) {
|
||||
const cacheKey = `${templateName}:${tableName}`;
|
||||
|
||||
// 检查缓存
|
||||
if (this.cache.has(cacheKey)) {
|
||||
this.cacheAccess.set(cacheKey, Date.now());
|
||||
return this.cache.get(cacheKey);
|
||||
}
|
||||
|
||||
try {
|
||||
// 使用 AbortController 支持请求取消
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时
|
||||
|
||||
// 优先使用自定义模板
|
||||
const customPath = `/templates/custom/${tableName}/${templateName}.html`;
|
||||
let response = await fetch(customPath, { signal: controller.signal });
|
||||
|
||||
if (!response.ok) {
|
||||
// 回退到默认自定义模板
|
||||
const defaultPath = `/templates/custom/_default/${templateName}.html`;
|
||||
response = await fetch(defaultPath, { signal: controller.signal });
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
// 回退到内置模板
|
||||
const builtinPath = `/templates/builtin/${templateName}.html`;
|
||||
response = await fetch(builtinPath, { signal: controller.signal });
|
||||
}
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Template ${templateName} not found`);
|
||||
}
|
||||
|
||||
const template = await response.text();
|
||||
this.setCache(cacheKey, template);
|
||||
return template;
|
||||
} catch (error) {
|
||||
console.error('Failed to load template:', error);
|
||||
return this.getFallbackTemplate(templateName);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取回退模板
|
||||
*/
|
||||
getFallbackTemplate(templateName) {
|
||||
const fallbacks = {
|
||||
'list': `
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
{{#each columns}}
|
||||
{{#if this.showInList}}
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{{this.alias}}
|
||||
</th>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
{{#each data}}
|
||||
<tr class="hover:bg-gray-50">
|
||||
{{#each ../columns}}
|
||||
{{#if this.showInList}}
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{{renderField (lookup ../this this.name) this.renderType this}}
|
||||
</td>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<button onclick="showDetail('{{this.id}}')" class="text-blue-600 hover:text-blue-900">查看详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
'card': `
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||
{{#each data}}
|
||||
<div class="bg-white border rounded-lg p-4 hover:shadow-md transition-shadow">
|
||||
{{#each ../columns}}
|
||||
{{#if this.showInList}}
|
||||
<div class="mb-2">
|
||||
<label class="block text-sm font-medium text-gray-700">{{this.alias}}</label>
|
||||
<div class="mt-1 text-sm text-gray-900">
|
||||
{{renderField (lookup ../this this.name) this.renderType this}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<div class="mt-4">
|
||||
<button onclick="showDetail('{{this.id}}')" class="text-blue-600 hover:text-blue-900 text-sm">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
`
|
||||
};
|
||||
return fallbacks[templateName] || fallbacks['list'];
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染字段
|
||||
* @param {*} value - 字段值
|
||||
* @param {string} type - 渲染类型
|
||||
* @param {*} column - 列配置
|
||||
*/
|
||||
renderField(value, type, column) {
|
||||
const renderers = {
|
||||
'raw': (v) => v || '-',
|
||||
'time': (v) => {
|
||||
if (!v) return '-';
|
||||
const date = new Date(v);
|
||||
return column.format ?
|
||||
date.toLocaleString('zh-CN') :
|
||||
date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
|
||||
},
|
||||
'tag': (v, col) => {
|
||||
if (!v || !col.values) return v || '-';
|
||||
const tag = col.values[v.toString()];
|
||||
if (!tag) return v;
|
||||
return `<span class="px-2 py-1 text-xs font-medium rounded-full" style="background-color: ${tag.color}; color: white;">${tag.label}</span>`;
|
||||
},
|
||||
'category': (v) => v || '-',
|
||||
'markdown': (v) => {
|
||||
if (!v) return '-';
|
||||
return marked.parse(v.toString());
|
||||
}
|
||||
};
|
||||
|
||||
return renderers[type] ? renderers[type](value, column) : value || '-';
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染模板
|
||||
* @param {string} template - 模板内容
|
||||
* @param {Object} data - 渲染数据
|
||||
*/
|
||||
renderTemplate(template, data) {
|
||||
try {
|
||||
// 简单压缩HTML模板
|
||||
const compressedTemplate = this.compressHTML(template);
|
||||
|
||||
// 简单的模板引擎实现 - 优化性能
|
||||
let rendered = compressedTemplate;
|
||||
|
||||
// 预编译正则表达式，提升性能
|
||||
const eachRegex = /\{\{#each ([^}]+)\}\}([\s\S]*?)\{\{\/each\}\}/g;
|
||||
const fieldRegex = /\{\{renderField ([^}]+)\}\}/g;
|
||||
const variableRegex = /\{\{([^}]+)\}\}/g;
|
||||
const thisRegex = /\{\{this\.([^}]+)\}\}/g;
|
||||
const simpleThisRegex = /\{\{this\}\}/g;
|
||||
|
||||
// 处理循环
|
||||
rendered = rendered.replace(eachRegex, (match, path, content) => {
|
||||
const items = this.getValue(data, path);
|
||||
if (!Array.isArray(items)) return '';
|
||||
|
||||
return items.map(item => {
|
||||
let itemContent = content;
|
||||
itemContent = itemContent.replace(thisRegex, (m, key) => this.getValue(item, key) || '');
|
||||
itemContent = itemContent.replace(simpleThisRegex, item);
|
||||
return itemContent;
|
||||
}).join('');
|
||||
});
|
||||
|
||||
// 处理字段渲染
|
||||
rendered = rendered.replace(fieldRegex, (match, params) => {
|
||||
const [valuePath, typePath, columnPath] = params.split(' ');
|
||||
const value = this.getValue(data, valuePath);
|
||||
const type = this.getValue(data, typePath);
|
||||
const column = this.getValue(data, columnPath);
|
||||
return this.renderField(value, type, column);
|
||||
});
|
||||
|
||||
// 处理简单变量
|
||||
rendered = rendered.replace(variableRegex, (match, path) => {
|
||||
return this.getValue(data, path) || '';
|
||||
});
|
||||
|
||||
return rendered;
|
||||
} catch (error) {
|
||||
console.error('Template rendering failed:', error);
|
||||
return this.renderError('模板渲染失败：' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取对象值
|
||||
*/
|
||||
getValue(obj, path) {
|
||||
if (!obj || !path) return undefined;
|
||||
|
||||
const keys = path.split('.');
|
||||
let value = obj;
|
||||
|
||||
for (const key of keys) {
|
||||
if (value == null) return undefined;
|
||||
value = value[key];
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染数据表
|
||||
* @param {string} tableName - 表名
|
||||
* @param {Object} options - 渲染选项
|
||||
*/
|
||||
async renderTable(tableName, options = {}) {
|
||||
try {
|
||||
this.showLoading();
|
||||
|
||||
const { page = 1, perPage = 20, search = '', sort = '', order = 'desc', template = 'list' } = options;
|
||||
|
||||
// 并行加载数据和模板
|
||||
const [data, templateContent] = await Promise.all([
|
||||
apiClient.getTableData(tableName, {
|
||||
page,
|
||||
per_page: perPage,
|
||||
search,
|
||||
sort,
|
||||
order
|
||||
}),
|
||||
this.loadTemplate(template, tableName)
|
||||
]);
|
||||
|
||||
// 预加载其他常用模板
|
||||
if (template !== 'list') {
|
||||
this.preloadTemplates(tableName, ['list']);
|
||||
}
|
||||
if (template !== 'card') {
|
||||
this.preloadTemplates(tableName, ['card']);
|
||||
}
|
||||
|
||||
// 渲染数据
|
||||
const rendered = this.renderTemplate(templateContent, {
|
||||
data: data.data,
|
||||
columns: data.columns || [],
|
||||
total: data.total,
|
||||
page: data.page,
|
||||
perPage: data.per_page,
|
||||
pages: data.pages
|
||||
});
|
||||
|
||||
this.currentTable = tableName;
|
||||
this.currentTemplate = template;
|
||||
this.currentData = data;
|
||||
|
||||
this.hideLoading();
|
||||
return rendered;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to render table:', error);
|
||||
this.hideLoading();
|
||||
return this.renderError(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换模板
|
||||
* @param {string} templateName - 模板名称
|
||||
*/
|
||||
async switchTemplate(templateName) {
|
||||
if (!this.currentTable) return;
|
||||
|
||||
try {
|
||||
const rendered = await this.renderTable(this.currentTable, {
|
||||
...this.getCurrentOptions(),
|
||||
template: templateName
|
||||
});
|
||||
|
||||
this.updateContent(rendered);
|
||||
|
||||
// 更新URL参数
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('template', templateName);
|
||||
window.history.pushState({}, '', url);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to switch template:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前查询参数
|
||||
*/
|
||||
getCurrentOptions() {
|
||||
const url = new URL(window.location);
|
||||
return {
|
||||
page: parseInt(url.searchParams.get('page')) || 1,
|
||||
perPage: parseInt(url.searchParams.get('per_page')) || 20,
|
||||
search: url.searchParams.get('search') || '',
|
||||
sort: url.searchParams.get('sort') || '',
|
||||
order: url.searchParams.get('order') || 'desc',
|
||||
template: this.currentTemplate
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示加载状态
|
||||
*/
|
||||
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 - 错误消息
|
||||
*/
|
||||
renderError(message) {
|
||||
return `
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置缓存（带LRU策略）
|
||||
* @param {string} key - 缓存键
|
||||
* @param {string} value - 缓存值
|
||||
*/
|
||||
setCache(key, value) {
|
||||
if (this.cache.size >= this.cacheLimit) {
|
||||
// 使用LRU策略移除最少使用的缓存
|
||||
const oldestKey = this.getOldestCacheKey();
|
||||
if (oldestKey) {
|
||||
this.cache.delete(oldestKey);
|
||||
this.cacheAccess.delete(oldestKey);
|
||||
}
|
||||
}
|
||||
|
||||
this.cache.set(key, value);
|
||||
this.cacheAccess.set(key, Date.now());
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最久未使用的缓存键
|
||||
*/
|
||||
getOldestCacheKey() {
|
||||
let oldestKey = null;
|
||||
let oldestTime = Date.now();
|
||||
|
||||
for (const [key, time] of this.cacheAccess) {
|
||||
if (time < oldestTime) {
|
||||
oldestTime = time;
|
||||
oldestKey = key;
|
||||
}
|
||||
}
|
||||
|
||||
return oldestKey;
|
||||
}
|
||||
|
||||
/**
|
||||
* 预加载模板
|
||||
* @param {string} tableName - 表名
|
||||
* @param {Array} templateNames - 模板名称列表
|
||||
*/
|
||||
async preloadTemplates(tableName, templateNames) {
|
||||
const promises = templateNames.map(templateName =>
|
||||
this.loadTemplate(templateName, tableName).catch(() => {
|
||||
// 预加载失败时不影响主流程
|
||||
console.warn(`Failed to preload template: ${templateName}`);
|
||||
})
|
||||
);
|
||||
|
||||
await Promise.allSettled(promises);
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空缓存
|
||||
*/
|
||||
clearCache() {
|
||||
this.cache.clear();
|
||||
this.cacheAccess.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* 压缩HTML内容（简单压缩）
|
||||
* @param {string} html - HTML内容
|
||||
*/
|
||||
compressHTML(html) {
|
||||
return html
|
||||
.replace(/\s+/g, ' ')
|
||||
.replace(/>\s+</g, '><')
|
||||
.trim();
|
||||
}
|
||||
}
|
||||
|
||||
// 全局模板引擎实例
|
||||
window.templateEngine = new TemplateEngine();
|
||||
Reference in New Issue
Block a user