${theme.title} · 管理端界面 Demo

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-fresh-mint.html', title: '01 · 薄荷清新（现行基准）', desc: '主色 #10b981 · 偏亮清爽，企业厚重感较弱', note: '适合年轻化、活力感产品。若需厚重企业感，请对比 02～06。', primary: '#10b981', dark: '#059669', bg: '#ecfdf5', border: '#d9e8e2', swatches: ['#10b981', '#059669', '#ecfdf5', '#d9e8e2'] }, { id: '02', file: '02-forest-enterprise.html', title: '02 · 森林企业绿', desc: '主色 #047857 · 深翠绿，稳重有分量', note: '推荐：综合型企业门户。厚重感 ★★★★☆', primary: '#047857', dark: '#065f46', bg: '#e8f4ee', border: '#c5e0d4', swatches: ['#047857', '#065f46', '#e8f4ee', '#c5e0d4'] }, { id: '03', file: '03-deep-teal.html', title: '03 · 深海青绿', desc: '主色 #0f766e · 青绿偏冷，医疗/实验室气质', note: '推荐：细胞存储、质检、研发模块。厚重感 ★★★★☆', primary: '#0f766e', dark: '#115e59', bg: '#f0fdfa', border: '#b8e0dc', swatches: ['#0f766e', '#115e59', '#f0fdfa', '#b8e0dc'] }, { id: '04', file: '04-cedar-green.html', title: '04 · 雪松经典绿', desc: '主色 #15803d · 常见企业绿，比薄荷沉一档', note: '推荐：通用 B 端。厚重感 ★★★☆☆', primary: '#15803d', dark: '#166534', bg: '#f0fdf4', border: '#bbf7d0', swatches: ['#15803d', '#166534', '#f0fdf4', '#bbf7d0'] }, { id: '05', file: '05-jade-corporate.html', title: '05 · 墨玉企业绿', desc: '主色 #186b4f · 墨绿沉厚，权威合规感', note: '推荐：审批、缴费、合规类界面。厚重感 ★★★★★', primary: '#186b4f', dark: '#145241', bg: '#e8f5f0', border: '#b5d4c6', swatches: ['#186b4f', '#145241', '#e8f5f0', '#b5d4c6'] }, { id: '06', file: '06-ink-emerald.html', title: '06 · 沉墨翡翠', desc: '主色 #2d6a4f · 灰绿最沉，长时间看不累', note: '推荐：数据密集、长时间操作。厚重感 ★★★★★（最沉）', primary: '#2d6a4f', dark: '#1b4332', bg: '#edf7f2', border: '#c8ddd4', swatches: ['#2d6a4f', '#1b4332', '#edf7f2', '#c8ddd4'] } ] function themeJump(currentId) { return themes .map((t) => { const cls = t.id === currentId ? 'is-current' : '' return `${t.id}` }) .join('') } function swatchesHtml(swatches) { const labels = ['主色', '深', '浅底', '边'] return swatches .map((c, i) => `${labels[i]}`) .join('') } function renderPage(theme) { return ` ${theme.title} · 管理端界面 Demo

工作台

采集协议单

样本接收

📄

协议单管理

协议审核与状态维护

💰

缴费信息

缴费计划与到账

🏅

储存证管理

储存证开具管理

📅

满月待办

满月事项跟进

	序号	状态	协议编号	客户姓名	手机号	预产期	缴费状态	创建时间	操作
	1	生效中	XY-2026-0042	张女士	138****6621	2026-08-12	已缴费	2026-03-01 10:22
	2	待生效	XY-2026-0038	李先生	139****8890	2026-07-20	缴费确认中	2026-02-28 15:06
	3	已过期	XY-2025-1201	王女士	136****3345	2025-12-08	已缴费	2025-11-02 09:18
	4	已作废	XY-2025-0899	赵先生	137****2210	2025-10-15	待缴费	2025-09-20 14:40
	5	转科研	XY-2025-0756	陈女士	135****9088	2025-09-01	已缴费	2025-08-11 11:05

本月新增协议

42

生效中

86

待缴费

12

${theme.note}

查看协议 · XY-2026-0042

协议状态

生效中

缴费状态

已缴费

客户姓名

手机号

备注

` } for (const theme of themes) { fs.writeFileSync(path.join(__dirname, theme.file), renderPage(theme)) console.log('written', theme.file) }