qiukai/opc-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

产品迭代：表格排序 + 详情页优先级状态对齐

Browse Source 
- 表头点击排序（正序/倒序切换），优先级按 P0-P3 逻辑序
- 排序图标与表头文字同行显示
- 详情页优先级/状态合并行改用标准 drawer-field 结构对齐
This commit is contained in:
mac
2026-07-02 14:50:45 +08:00
parent 0eb9d69f1e
commit fbff2e5f24
2 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
static/modules/products.js
View File

@@ -151,9 +151,42 @@ window.addFeature = () => {};
window.removeFeature = () => {};
window.saveFeatureList = () => {};
// 排序状态
let productSort = { field: null, dir: 1 };
window.sortProducts = (field) => {
if (productSort.field === field) {
productSort.dir = -productSort.dir;
} else {
productSort.field = field;
productSort.dir = 1;
}
renderProducts();
};
function sortItems(items) {
if (!productSort.field) return items;
const f = productSort.field;
const d = productSort.dir;
const priorityOrder = { P0: 0, P1: 1, P2: 2, P3: 3 };
return [...items].sort((a, b) => {
let va = a[f] || '', vb = b[f] || '';
if (f === 'priority') { va = priorityOrder[va] ?? 9; vb = priorityOrder[vb] ?? 9; }
if (va < vb) return -1 * d;
if (va > vb) return 1 * d;
return 0;
});
}
function renderProducts() {
const items = state.data.products || [];
const rawItems = state.data.products || [];
const items = sortItems(rawItems);
const priorityColor = { P0: "bg-red-100 text-red-700", P1: "bg-orange-100 text-orange-700", P2: "bg-blue-100 text-blue-700", P3: "bg-slate-100 text-slate-600" };
const sortIcon = (f) => {
if (productSort.field !== f) return '<i data-lucide="chevrons-up-down" style="width:12px;height:12px;opacity:0.3"></i>';
return productSort.dir > 0 ? '<i data-lucide="chevron-up" style="width:12px;height:12px"></i>' : '<i data-lucide="chevron-down" style="width:12px;height:12px"></i>';
};
const sortTh = (f, label, extra='') => `<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap cursor-pointer hover:text-blue-600 select-none" onclick="sortProducts('${f}')"><span class="inline-flex items-center gap-1">${label}${sortIcon(f)}</span>${extra}</th>`;
document.querySelector("#products").innerHTML = `
<div class="grid gap-4">
<div class="flex justify-end">
@@ -163,15 +196,15 @@ function renderProducts() {
<table class="w-full text-sm">
<thead class="bg-slate-50 border-b border-slate-200">
<tr class="text-left text-xs text-slate-500 uppercase tracking-wider">
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">版本号</th>
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">优先级</th>
<th class="px-3 py-2.5 font-semibold align-middle">版本名称</th>
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">状态</th>
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">启动时间</th>
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">产品方案</th>
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">研发完成</th>
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">测试完成</th>
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">上线时间</th>
${sortTh('version','版本号')}
${sortTh('priority','优先级')}
${sortTh('product_name','版本名称')}
${sortTh('status','状态')}
${sortTh('start_date','启动时间')}
${sortTh('plan_date','产品方案')}
${sortTh('dev_done_date','研发完成')}
${sortTh('test_date','测试完成')}
${sortTh('launch_date','上线时间')}
<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">总耗时</th>
</tr>
</thead>