3 Commits

Author SHA1 Message Date
40b04ae9c1 feat: 所有类别添加特色(features)字段
- 字段名: features
- 显示名: 特色
- 类型: 文本
- 说明: 产品特色/亮点,简短描述
- 位置: 描述字段前面
- 覆盖: AI模型、GPU、CPU、手机、电脑、汽车、摄像全部7个类别
2026-04-29 17:20:26 +08:00
c8d46f6f99 fix: 修复AI模型页面选择器错误导致无法加载
- document.querySelector('#modelsTable thead') 改为 document.querySelector('table thead')
- #modelsTable 是 tbody 的 id,无法通过它找到 thead
- 修复后页面正常加载模型列表
2026-04-29 16:55:18 +08:00
f2bb5dd2e8 feat: 动态分类页面改为表格展示方式
- 将卡片布局改为表格布局
- 动态生成表头(根据类别字段配置)
- 支持详情弹窗查看完整字段
- 保持搜索、排序、置顶等功能
- 与内置分类页面(models/gpus/cpus)展示风格统一
2026-04-29 16:43:11 +08:00
3 changed files with 318 additions and 135 deletions

View File

@@ -205,6 +205,14 @@
"required": false,
"input_style": "normal"
},
{
"key": "features",
"label": "特色",
"type": "text",
"description": "产品特色/亮点,简短描述",
"required": false,
"input_style": "normal"
},
{
"key": "description",
"label": "描述",
@@ -432,6 +440,14 @@
"required": false,
"input_style": "normal"
},
{
"key": "features",
"label": "特色",
"type": "text",
"description": "产品特色/亮点,简短描述",
"required": false,
"input_style": "normal"
},
{
"key": "description",
"label": "描述",
@@ -644,6 +660,14 @@
"required": false,
"input_style": "normal"
},
{
"key": "features",
"label": "特色",
"type": "text",
"description": "产品特色/亮点,简短描述",
"required": false,
"input_style": "normal"
},
{
"key": "description",
"label": "描述",
@@ -771,6 +795,14 @@
"type": "text",
"input_style": "normal"
},
{
"key": "features",
"label": "特色",
"type": "text",
"description": "产品特色/亮点,简短描述",
"required": false,
"input_style": "normal"
},
{
"description": "产品简介",
"key": "description",
@@ -799,138 +831,156 @@
"order": 5,
"subcategories": [
{
"id": "gaming-laptop",
"name": "游戏笔记本",
"feature_labels": {
"gpu": "显卡",
"price": "价格",
"processor": "处理器",
"ram_gb": "内存"
},
"icon": "ri-gamepad-line",
"id": "gaming-laptop",
"key_features": [
"processor",
"gpu",
"ram_gb",
"price"
],
"feature_labels": {
"processor": "处理器",
"gpu": "显卡",
"ram_gb": "内存",
"price": "价格"
}
"name": "游戏笔记本"
},
{
"id": "business-laptop",
"name": "商务笔记本",
"feature_labels": {
"price": "价格",
"processor": "处理器",
"ram_gb": "内存",
"weight_kg": "重量"
},
"icon": "ri-briefcase-line",
"id": "business-laptop",
"key_features": [
"processor",
"ram_gb",
"weight_kg",
"price"
],
"feature_labels": {
"processor": "处理器",
"ram_gb": "内存",
"weight_kg": "重量",
"price": "价格"
}
"name": "商务笔记本"
},
{
"id": "5d6fe10bbada",
"name": "台式主机",
"icon": "ri-folder-line",
"key_features": [],
"feature_labels": {},
"extra_fields": [
{
"key": "power",
"label": "电源",
"type": "text",
"description": "",
"required": false
}
]
}
],
"fields": [
{
"description": "电脑型号",
"input_style": "normal",
"key": "name",
"label": "名称",
"type": "text",
"description": "电脑型号",
"required": true,
"input_style": "normal"
"type": "text"
},
{
"description": "品牌",
"input_style": "normal",
"key": "brand",
"label": "品牌",
"type": "text",
"description": "品牌",
"required": true,
"input_style": "normal"
"type": "text"
},
{
"description": "CPU型号",
"input_style": "normal",
"key": "processor",
"label": "处理器",
"type": "text",
"description": "CPU型号",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "GPU型号",
"input_style": "normal",
"key": "gpu",
"label": "显卡",
"type": "text",
"description": "GPU型号",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "RAM容量",
"input_style": "normal",
"key": "ram_gb",
"label": "内存(GB)",
"type": "text",
"description": "RAM容量",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "存储容量",
"input_style": "normal",
"key": "storage_gb",
"label": "存储(GB)",
"type": "text",
"description": "存储容量",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "屏幕尺寸",
"input_style": "normal",
"key": "screen_size",
"label": "屏幕尺寸",
"type": "text",
"description": "屏幕尺寸",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "重量",
"input_style": "normal",
"key": "weight_kg",
"label": "重量(kg)",
"type": "text",
"description": "重量",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "参考价格",
"input_style": "normal",
"key": "price",
"label": "价格",
"required": false,
"type": "text"
},
{
"key": "features",
"label": "特色",
"type": "text",
"description": "参考价格",
"required": false,
"input_style": "normal"
},
{
"key": "year",
"label": "年份",
"type": "text",
"description": "发布年份",
"description": "产品特色/亮点,简短描述",
"required": false,
"input_style": "normal"
},
{
"description": "产品简介",
"input_style": "long",
"key": "description",
"label": "描述",
"type": "text",
"description": "产品简介",
"required": false,
"input_style": "long"
"type": "text"
},
{
"description": "产品发布日期,格式 YYYY-MM-DD",
"input_style": "normal",
"key": "publish_date",
"label": "发布日期",
"type": "text",
"description": "产品发布日期,格式 YYYY-MM-DD",
"required": false,
"input_style": "normal"
"type": "text"
}
]
],
"visible": true,
"updated_at": "2026-04-29 12:21:23"
},
{
"id": "021dc76d36be",
@@ -942,94 +992,112 @@
"created_at": "2026-04-09 10:09:01",
"subcategories": [
{
"id": "sedan",
"name": "轿车",
"feature_labels": {
"engine": "发动机",
"power_kw": "功率",
"price": "价格"
},
"icon": "ri-car-line",
"id": "sedan",
"key_features": [
"engine",
"power_kw",
"price"
],
"feature_labels": {
"engine": "发动机",
"power_kw": "功率",
"price": "价格"
}
"name": "轿车"
},
{
"id": "suv",
"name": "SUV",
"feature_labels": {
"engine": "发动机",
"price": "价格",
"seats": "座位数"
},
"icon": "ri-truck-line",
"id": "suv",
"key_features": [
"engine",
"seats",
"price"
],
"feature_labels": {
"engine": "发动机",
"seats": "座位数",
"price": "价格"
}
"name": "SUV"
},
{
"id": "df938b1c0d81",
"name": "房车",
"icon": "ri-folder-line",
"key_features": [],
"feature_labels": {},
"extra_fields": []
}
],
"fields": [
{
"description": "车型名称",
"input_style": "normal",
"key": "name",
"label": "名称",
"type": "text",
"description": "车型名称",
"required": true,
"input_style": "normal"
"type": "text"
},
{
"description": "汽车品牌",
"input_style": "normal",
"key": "brand",
"label": "品牌",
"type": "text",
"description": "汽车品牌",
"required": true,
"input_style": "normal"
"type": "text"
},
{
"description": "参考价格(万元)",
"input_style": "normal",
"key": "price",
"label": "价格(万)",
"type": "text",
"description": "参考价格(万元)",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "生产年份",
"input_style": "normal",
"key": "year",
"label": "年份",
"type": "text",
"description": "生产年份",
"required": false,
"input_style": "normal"
"type": "text"
},
{
"description": "详细规格参数",
"input_style": "long",
"key": "specs",
"label": "参数",
"type": "text",
"description": "详细规格参数",
"required": false,
"input_style": "long"
"type": "text"
},
{
"key": "description",
"label": "描述",
"key": "features",
"label": "特色",
"type": "text",
"description": "车型简介",
"required": false,
"input_style": "long"
},
{
"key": "publish_date",
"label": "发布日期",
"type": "text",
"description": "产品发布日期,格式 YYYY-MM-DD",
"description": "产品特色/亮点,简短描述",
"required": false,
"input_style": "normal"
},
{
"description": "车型简介",
"input_style": "long",
"key": "description",
"label": "描述",
"required": false,
"type": "text"
},
{
"description": "产品发布日期,格式 YYYY-MM-DD",
"input_style": "normal",
"key": "publish_date",
"label": "发布日期",
"required": false,
"type": "text"
}
]
],
"visible": true,
"updated_at": "2026-04-29 13:09:39"
},
{
"id": "71fa2b4d818f",
@@ -1149,6 +1217,14 @@
"required": false,
"input_style": "long"
},
{
"key": "features",
"label": "特色",
"type": "text",
"description": "产品特色/亮点,简短描述",
"required": false,
"input_style": "normal"
},
{
"key": "description",
"label": "描述",

View File

@@ -49,7 +49,7 @@
<i class="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input type="text" id="searchInput" placeholder="搜索..."
class="w-full pl-12 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-indigo-400"
onkeyup="filterItems()">
oninput="filterItems()">
</div>
<select id="sortBy" onchange="loadItems()" class="px-4 py-2 border border-gray-200 rounded-lg focus:outline-none">
<option value="default">默认排序(置顶优先)</option>
@@ -65,14 +65,32 @@
</div>
</div>
<!-- 数据-->
<div class="bg-white rounded-xl shadow-sm p-6">
<div id="itemsList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="text-center text-gray-400 py-8">加载中...</div>
</div>
<!-- 数据表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50 border-b" id="tableHead">
<!-- 动态生成 -->
</thead>
<tbody id="itemsTable">
<tr><td colspan="10" class="text-center text-gray-400 py-8">加载中...</td></tr>
</tbody>
</table>
</div>
</main>
<!-- 详情弹窗 -->
<div id="detailModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
<div class="bg-white rounded-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-auto">
<div class="p-6 border-b flex justify-between items-center sticky top-0 bg-white z-10">
<h2 class="text-xl font-bold text-gray-800" id="modalTitle">详情</h2>
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
<i class="ri-close-line text-2xl"></i>
</button>
</div>
<div id="modalContent" class="p-6"></div>
</div>
</div>
<!-- 页脚 -->
<footer class="bg-white border-t mt-8 py-6 text-center text-gray-500 text-sm">
ParamHub - 参数百科
@@ -82,12 +100,23 @@
const categoryId = '{{ category.id }}';
let allItems = [];
let categories = [];
let currentCategory = null;
let displayFields = []; // 显示的字段列表
// 加载导航
async function loadNav() {
const res = await fetch('/api/categories');
categories = await res.json();
// 获取当前类别
currentCategory = categories.find(c => c.id === categoryId);
if (currentCategory && currentCategory.fields) {
// 过滤要显示的字段排除id、created_at等内部字段
displayFields = currentCategory.fields
.filter(f => !['id', 'category_id', 'created_at', 'updated_at', 'visible', 'is_pinned', 'views', 'publish_date', 'subcategory_id', 'parse_sources', 'product_images'].includes(f.key))
.slice(0, 6); // 最多显示6个字段
}
// 内置页面映射
const builtinPages = [
{id: 'home', name: '首页', href: '/'},
@@ -129,50 +158,78 @@
allItems = await res.json();
document.getElementById('itemCount').textContent = allItems.length;
renderTableHead();
renderItems(allItems);
}
// 渲染数据
// 渲染表格头部
function renderTableHead() {
let html = '<tr>';
// 名称列
html += '<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">名称</th>';
// 动态字段列
displayFields.forEach(f => {
html += `<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">${f.label}</th>`;
});
// 发布日期列
html += '<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">发布日期</th>';
// 操作列
html += '<th class="px-4 py-3 text-center text-sm font-medium text-gray-600">操作</th>';
html += '</tr>';
document.getElementById('tableHead').innerHTML = html;
}
// 渲染数据表格
function renderItems(items) {
if (items.length === 0) {
document.getElementById('itemsList').innerHTML = `
<div class="col-span-3 text-center py-12">
const colCount = displayFields.length + 3; // 名称 + 字段 + 日期 + 操作
document.getElementById('itemsTable').innerHTML = `
<tr><td colspan="${colCount}" class="text-center py-12">
<i class="ri-inbox-line text-4xl text-gray-300 mb-4 block"></i>
<p class="text-gray-400">暂无数据</p>
</div>
</td></tr>
`;
return;
}
document.getElementById('itemsList').innerHTML = items.map(item => {
const fields = Object.entries(item)
.filter(([key, val]) => !['id', 'category_id', 'created_at', 'updated_at', 'visible', 'is_pinned', 'views', 'publish_date'].includes(key) && val)
.slice(0, 5)
.map(([key, val]) => `<span class="text-gray-500 text-sm">${key}: ${val}</span>`)
.join('<br>');
return `
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition group ${item.is_pinned ? 'bg-yellow-50 border-yellow-300' : ''}">
<div class="flex items-start justify-between">
<div>
<h3 class="font-medium text-gray-800 group-hover:text-indigo-600 flex items-center gap-2">
${item.is_pinned ? '<i class="ri-pushpin-fill text-yellow-500" title="置顶"></i>' : ''}
${item.name || item.title || '未命名'}
</h3>
<div class="mt-2 space-y-1">
${fields}
</div>
</div>
<div class="text-right">
<div class="text-xs text-gray-400">
${item.publish_date || (item.created_at ? item.created_at.split(' ')[0] : '')}
</div>
${item.views ? `<div class="text-xs text-gray-400 mt-1"><i class="ri-eye-line"></i> ${item.views}</div>` : ''}
</div>
</div>
const html = items.map(item => {
let row = `<tr class="border-b hover:bg-gray-50 transition ${item.is_pinned ? 'bg-yellow-50' : ''}">`;
// 名称列
row += `<td class="px-4 py-3">
<div class="font-medium text-gray-800 flex items-center gap-2">
${item.is_pinned ? '<i class="ri-pushpin-fill text-yellow-500" title="置顶"></i>' : ''}
${item.name || item.title || '未命名'}
</div>
`;
${item.views ? `<div class="text-xs text-gray-400 mt-1"><i class="ri-eye-line mr-1"></i>${item.views}</div>` : ''}
</td>`;
// 动态字段列
displayFields.forEach(f => {
const value = item[f.key] || '-';
row += `<td class="px-4 py-3 text-gray-600 text-sm">${value}</td>`;
});
// 发布日期列
row += `<td class="px-4 py-3 text-gray-500 text-sm">${item.publish_date || (item.created_at ? item.created_at.split(' ')[0] : '-')}</td>`;
// 操作列
row += `<td class="px-4 py-3 text-center">
<button onclick="showDetail('${item.id}')" class="text-indigo-600 hover:text-indigo-800 text-sm">
<i class="ri-eye-line mr-1"></i>详情
</button>
</td>`;
row += '</tr>';
return row;
}).join('');
document.getElementById('itemsTable').innerHTML = html;
}
// 搜索过滤
@@ -191,6 +248,56 @@
renderItems(filtered);
}
// 显示详情
function showDetail(id) {
const item = allItems.find(i => i.id === id);
if (!item) return;
document.getElementById('modalTitle').textContent = item.name || '详情';
let html = '<div class="space-y-3">';
// 按字段顺序显示
if (currentCategory && currentCategory.fields) {
currentCategory.fields.forEach(f => {
if (item[f.key]) {
const value = item[f.key];
html += `
<div class="flex justify-between py-2 border-b">
<span class="text-gray-500">${f.label}</span>
<span class="text-gray-800 ${f.input_style === 'long' ? 'text-right max-w-xs' : ''}">${value}</span>
</div>
`;
}
});
}
// 添加统计信息
if (item.views) {
html += `
<div class="flex justify-between py-2 border-b">
<span class="text-gray-500">热度</span>
<span class="text-gray-800"><i class="ri-eye-line mr-1"></i>${item.views}</span>
</div>
`;
}
html += '</div>';
document.getElementById('modalContent').innerHTML = html;
document.getElementById('detailModal').classList.remove('hidden');
}
// 关闭弹窗
function closeModal() {
document.getElementById('detailModal').classList.add('hidden');
}
// 点击弹窗外部关闭
document.getElementById('detailModal').addEventListener('click', function(e) {
if (e.target === this) closeModal();
});
// 初始化
loadNav();
loadItems();

View File

@@ -283,7 +283,7 @@
</tr>
`;
document.querySelector('#modelsTable thead').innerHTML = headerHtml;
document.querySelector('table thead').innerHTML = headerHtml;
// 动态内容
const html = models.map(m => {