import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const themes = [
{
id: '01',
file: '01-dark-sidebar.html',
title: '01 · 深色侧栏藏青',
desc: '侧栏 #0f172a · 点缀天蓝 · Logo 绿最跳眼',
note: '风格差异大：深色导航 + 白内容区，很多 LIS/HIS 系统采用；Logo 绿色会非常醒目。',
primary: '#38bdf8',
dark: '#0ea5e9',
bg: 'rgba(56, 189, 248, 0.14)',
border: '#e2e8f0',
swatches: ['#0f172a', '#38bdf8', '#f8fafc', '#e2e8f0'],
darkSidebar: true,
recommended: true
},
{
id: '02',
file: '02-warm-stone.html',
title: '02 · 暖石米灰',
desc: '暖灰主色 #57534e · 米白底 · 不冷不艳',
note: '偏纸质/档案感，长时间看不疲劳；适合财务、合规、大量表格录入。',
primary: '#57534e',
dark: '#44403c',
bg: '#f5f5f4',
border: '#e7e5e4',
pageBg: '#fafaf9',
tableHead: '#f5f5f4',
text: '#292524',
textMuted: '#78716c',
swatches: ['#57534e', '#44403c', '#fafaf9', '#e7e5e4'],
warm: true
},
{
id: '03',
file: '03-medical-blue.html',
title: '03 · 经典医院蓝',
desc: '主色 #0077b6 · 传统医疗信息系统气质',
note: '比 Tailwind 蓝更「医院感」；稳重、熟悉，中老年用户接受度高。',
primary: '#0077b6',
dark: '#023e8a',
bg: '#e8f4fa',
border: '#bde0fe',
swatches: ['#0077b6', '#023e8a', '#e8f4fa', '#bde0fe']
},
{
id: '04',
file: '04-zinc-minimal.html',
title: '04 · 锌灰极简',
desc: '几乎无彩色 · 主按钮 #18181b · Logo 是唯一亮点',
note: '极简 B 端：界面本身不抢戏，状态 Tag 保留语义色；适合数据密集页面。',
primary: '#52525b',
dark: '#3f3f46',
bg: '#f4f4f5',
border: '#e4e4e7',
cta: '#18181b',
ctaDark: '#27272a',
swatches: ['#52525b', '#18181b', '#fafafa', '#e4e4e7']
},
{
id: '05',
file: '05-soft-violet.html',
title: '05 · 薄雾紫',
desc: '主色 #7c6fad · 舒缓、偏医疗康养',
note: '低饱和紫，比靛蓝更柔；适合客服、客户档案类模块，主列表页需实测。',
primary: '#7c6fad',
dark: '#6b5b95',
bg: '#f3f0f8',
border: '#ddd6fe',
swatches: ['#7c6fad', '#6b5b95', '#f3f0f8', '#ddd6fe']
},
{
id: '06',
file: '06-navy-authority.html',
title: '06 · 墨蓝权威',
desc: '主色 #1e3a5f · 传统企业门户',
note: '深藏青，权威合规感强；与绿色 Logo 对比清晰，适合审批流、协议类页面。',
primary: '#1e3a5f',
dark: '#152a45',
bg: '#eef2f6',
border: '#c5d0dc',
swatches: ['#1e3a5f', '#152a45', '#eef2f6', '#c5d0dc']
}
]
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
? ['导航', '按钮', '浅底', '边']
: theme.darkSidebar
? ['侧栏', '点缀', '内容', '边']
: ['主色', '深', '浅底', '边']
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: ${theme.text || '#1e293b'};`,
` --text-muted: ${theme.textMuted || '#64748b'};`,
` --border: ${theme.border};`,
` --bg-page: ${theme.pageBg || '#fefefe'};`,
` --surface: #ffffff;`,
` --table-head: ${theme.tableHead || '#f8fafc'};`,
` --row-alt: ${theme.warm ? '#f5f5f4' : '#fafafa'};`,
` --row-hover: ${theme.warm ? '#ececea' : '#f1f5f9'};`,
` --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);`,
` --radius: 10px;`
]
if (theme.darkSidebar) {
lines.push(` --sidebar-bg: #0f172a;`, ` --sidebar-border: #1e293b;`)
}
if (theme.cta) {
lines.push(` --cta: ${theme.cta};`, ` --cta-dark: ${theme.ctaDark};`)
}
return lines.join('\n')
}
function renderPage(theme) {
const badge = theme.recommended ? '推荐' : ''
const bodyClass = theme.warm ? ' class="layout-warm"' : ''
const sidebarClass = theme.darkSidebar ? 'sidebar sidebar--dark' : 'sidebar'
return `
${theme.title} · 管理端界面 Demo B
${badge}${theme.title}
${theme.desc}
${swatchesHtml(theme)}
${themeJump(theme.id)}
选型入口
采集协议单
已选 2 项