feat: 样式统一 + 月份下拉框扩展

- 品牌色统一为天机阁标准 #4A6CF7,tailwind.config 扩展完整色阶
- styles.css 新增 :root CSS 变量层(brand 色阶、语义色、圆角/阴影 token)
- 全项目 hex/Tailwind 类统一替换为 brand-* CSS 变量(115 处引用)
- border-radius/box-shadow 统一使用 token 变量
- 预留 :root[data-theme="dark"] 暗色主题变量占位
- 所有月份下拉框范围从 3 年/15 月扩展至 2020-2027(8 年 96 月)
This commit is contained in:
mac
2026-07-13 16:34:53 +08:00
parent 89810942cd
commit f619ed34a7
15 changed files with 209 additions and 149 deletions

View File

@@ -104,11 +104,11 @@ window.editProductDate = (event, id) => {
try {
await api(`/api/products/${id}`, { method: "PUT", body: JSON.stringify({ data: { launch_date: newValue } }) });
product.launch_date = newValue;
td.innerHTML = `<span class="cursor-pointer hover:text-blue-600" onclick="editProductDate(event, ${id})">${newValue || '—'}</span>`;
td.innerHTML = `<span class="cursor-pointer hover:text-brand-600" onclick="editProductDate(event, ${id})">${newValue || '—'}</span>`;
} catch (e) { toast("修改失败:" + e.message, "error"); }
});
input.addEventListener("blur", () => {
td.innerHTML = `<span class="cursor-pointer hover:text-blue-600" onclick="editProductDate(event, ${id})">${currentValue || '—'}</span>`;
td.innerHTML = `<span class="cursor-pointer hover:text-brand-600" onclick="editProductDate(event, ${id})">${currentValue || '—'}</span>`;
});
td.innerHTML = "";
td.appendChild(input);
@@ -181,12 +181,12 @@ function sortItems(items) {
function renderProducts() {
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 priorityColor = { P0: "bg-red-100 text-red-700", P1: "bg-orange-100 text-orange-700", P2: "bg-brand-100 text-brand-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>`;
const sortTh = (f, label, extra='') => `<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap cursor-pointer hover:text-brand-600 select-none" onclick="sortProducts('${f}')"><span class="inline-flex items-center gap-1">${label}${sortIcon(f)}</span>${extra}</th>`;
const tab = state.productTab || 'version';
const tabs = `<div class="finance-tabs" style="padding:0;border-bottom:1px solid #e2e8f0"><button onclick="switchProductTab('version')" class="finance-tab${tab==='version'?' active':''}" style="font-size:14px;font-weight:600">版本迭代</button><button onclick="switchProductTab('ops')" class="finance-tab${tab==='ops'?' active':''}" style="font-size:14px;font-weight:600">产品运营</button></div>`;