import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const themes = [
{
id: '00',
file: '00-fresh-mint-clash.html',
title: '00 · 现行薄荷绿（Logo 同色）',
desc: '主色 #10b981 与 Logo 同为绿色 · 层次易糊',
note: '对比基准：Logo 绿 + UI 绿叠在一起，是当前觉得「不好看」的典型情况。',
primary: '#10b981',
dark: '#059669',
bg: '#ecfdf5',
border: '#d9e8e2',
swatches: ['#10b981', '#059669', '#ecfdf5', '#d9e8e2'],
recommended: false
},
{
id: '01',
file: '01-slate-blue.html',
title: '01 · 深海蓝（推荐）',
desc: '主色 #2563eb · Logo 绿 + UI 蓝，专业医疗后台',
note: '推荐首选：与绿色 Logo 互补，成功/进行中仍用绿色 Tag，操作引导清晰。',
primary: '#2563eb',
dark: '#1d4ed8',
bg: '#eff6ff',
border: '#e2e8f0',
swatches: ['#2563eb', '#1d4ed8', '#eff6ff', '#e2e8f0'],
recommended: true
},
{
id: '02',
file: '02-bio-teal.html',
title: '02 · 生物青绿',
desc: '主色 #0d9488 · 偏蓝的 Teal，保留生命感',
note: '折中方案：比薄荷绿沉、比纯蓝更有生物气质；注意与成功 Tag 绿色区分。',
primary: '#0d9488',
dark: '#0f766e',
bg: '#f0fdfa',
border: '#cce7e4',
swatches: ['#0d9488', '#0f766e', '#f0fdfa', '#cce7e4'],
recommended: false
},
{
id: '03',
file: '03-graphite-blue.html',
title: '03 · 石墨灰 + 蓝色按钮',
desc: '导航 Slate #475569 · 主按钮 #0369a1',
note: '最克制：界面几乎无彩色，Logo 绿最突出；主按钮单独用蓝色强调。',
primary: '#475569',
dark: '#334155',
bg: '#f8fafc',
border: '#e2e8f0',
cta: '#0369a1',
ctaDark: '#0284c7',
swatches: ['#475569', '#0369a1', '#f8fafc', '#e2e8f0'],
recommended: false
},
{
id: '04',
file: '04-indigo-tech.html',
title: '04 · 靛蓝科技',
desc: '主色 #4f46e5 · 偏生物科技平台气质',
note: '辨识度高、略活泼；适合强调数字化，医疗场景需控制 Tag 饱和度。',
primary: '#4f46e5',
dark: '#4338ca',
bg: '#eef2ff',
border: '#c7d2fe',
swatches: ['#4f46e5', '#4338ca', '#eef2ff', '#c7d2fe'],
recommended: false
}
]
function themeJump(currentId) {
return themes
.map((t) => {
const cls = t.id === currentId ? 'is-current' : ''
return `${t.id}`
})
.join('')
}
function swatchesHtml(theme) {
const labels = theme.cta
? ['导航', '按钮', '浅底', '边']
: ['主色', '深', '浅底', '边']
return theme.swatches
.map((c, i) => `${labels[i]}`)
.join('')
}
function rootVars(theme) {
const lines = [
` --primary: ${theme.primary};`,
` --primary-dark: ${theme.dark};`,
` --primary-bg: ${theme.bg};`,
` --text: #1e293b;`,
` --text-muted: #64748b;`,
` --border: ${theme.border};`,
` --bg-page: #fefefe;`,
` --surface: #ffffff;`,
` --table-head: #f8fafc;`,
` --row-alt: #fafafa;`,
` --row-hover: #f1f5f9;`,
` --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);`,
` --radius: 10px;`,
` --brand-green: #10b981;`,
` --brand-green-dark: #059669;`
]
if (theme.cta) {
lines.push(` --cta: ${theme.cta};`, ` --cta-dark: ${theme.ctaDark};`)
}
return lines.join('\n')
}
function renderPage(theme) {
const badge = theme.recommended
? '推荐'
: theme.id === '00'
? '现状'
: ''
return `
${theme.title} · 管理端界面 Demo
${badge}${theme.title}
${theme.desc}
${swatchesHtml(theme)}
${themeJump(theme.id)}
选型入口
采集协议单
已选 2 项
`
}
for (const theme of themes) {
fs.writeFileSync(path.join(__dirname, theme.file), renderPage(theme))
console.log('written', theme.file)
}