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

@@ -43,7 +43,7 @@ window.toggleTenantMenu = (event) => {
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wider">切换工作台</p>
</div>
${tenants.map(t => `
<button class="w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors flex items-center justify-between gap-2 ${t === state.tenant ? 'text-blue-600 font-medium' : 'text-slate-700'}" onclick="switchTenantFromMenu('${t.replace(/'/g, "\\'")}')">
<button class="w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors flex items-center justify-between gap-2 ${t === state.tenant ? 'text-brand-600 font-medium' : 'text-slate-700'}" onclick="switchTenantFromMenu('${t.replace(/'/g, "\\'")}')">
<span>${esc(t)}</span>
${t === state.tenant ? '<i data-lucide="check" style="width:14px;height:14px"></i>' : ''}
</button>
@@ -78,7 +78,7 @@ function updateTenantLabel() {
var currentShort = (state.tenant || '').replace("·无界", "");
var currentIcon = tenantIcons[state.tenant] || 'circle';
container.innerHTML = '<div class="flex flex-col items-center cursor-pointer hover:bg-slate-800 rounded-lg py-2 px-1 w-14 transition-colors" onclick="toggleTenantMenu(event)" title="切换工作台">' +
'<i data-lucide="' + currentIcon + '" style="width:20px;height:20px;color:#60a5fa"></i>' +
'<i data-lucide="' + currentIcon + '" style="width:20px;height:20px;color:var(--brand-400)"></i>' +
'<span class="text-[10px] mt-1 max-w-[56px] truncate text-center text-slate-300">' + esc(currentShort) + '</span>' +
'<i data-lucide="chevron-down" style="width:12px;height:12px;color:#64748b;margin-top:2px"></i>' +
'</div>';
@@ -112,10 +112,10 @@ window.toggleTenantMenu = (event) => {
const shortName = t.replace("·无界", "");
const isActive = t === state.tenant;
var icon = tenantIcons[t] || 'circle';
return '<button class="w-full text-left px-4 py-2.5 text-sm hover:bg-slate-50 transition-colors flex items-center gap-3 ' + (isActive ? 'text-blue-600 font-medium bg-blue-50' : 'text-slate-700') + '" onclick="switchTenantFromMenu(\'' + t.replace(/'/g, "\\'") + '\')">' +
'<i data-lucide="' + icon + '" style="width:16px;height:16px;color:' + (isActive ? '#2563eb' : '#94a3b8') + '"></i>' +
return '<button class="w-full text-left px-4 py-2.5 text-sm hover:bg-slate-50 transition-colors flex items-center gap-3 ' + (isActive ? 'text-brand-600 font-medium bg-brand-50' : 'text-slate-700') + '" onclick="switchTenantFromMenu(\'' + t.replace(/'/g, "\\'") + '\')">' +
'<i data-lucide="' + icon + '" style="width:16px;height:16px;color:' + (isActive ? 'var(--brand-600)' : '#94a3b8') + '"></i>' +
'<span class="flex-1">' + esc(shortName) + '</span>' +
(isActive ? '<i data-lucide="check" style="width:14px;height:14px;color:#2563eb"></i>' : '') +
(isActive ? '<i data-lucide="check" style="width:14px;height:14px;color:var(--brand-600)"></i>' : '') +
'</button>';
}).join('');
document.body.appendChild(menu);