From 00af2a4f26a409d7484c95c563df808ca0befdb9 Mon Sep 17 00:00:00 2001 From: gao Date: Tue, 2 Dec 2025 20:10:40 +0800 Subject: [PATCH] feat: Refactor homepage sections to use markdown-based content management MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refactored Solutions and Cases sections to use markdown data sources instead of hardcoded arrays, improving content maintainability and enabling easier updates by non-technical team members. Changes: - Created solutionsData.ts with markdown-based data loader for Solutions section - Created casesData.ts with markdown-based data loader for Cases section - Updated SolutionsSection component to load data from markdown source - Updated CasesSection component to load data from markdown source - Added comprehensive MARKDOWN_CONTENT_GUIDE.md documentation Benefits: - Content and code separation for better maintainability - YAML front matter provides structured metadata management - Easy content updates without touching component code - Version control friendly with Git tracking - Non-technical team members can edit content easily Technical details: - Custom YAML front matter parser for metadata extraction - Type-safe TypeScript interfaces for data consistency - Async loading with React state management - Icon mapping system for lucide-react icons - Support for ordering, categorization, and filtering 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- MARKDOWN_CONTENT_GUIDE.md | 256 +++++++++++++++++++ src/components/sections/CasesSection.tsx | 77 ++---- src/components/sections/SolutionsSection.tsx | 66 ++--- src/data/casesData.ts | 232 +++++++++++++++++ src/data/solutionsData.ts | 213 +++++++++++++++ 5 files changed, 749 insertions(+), 95 deletions(-) create mode 100644 MARKDOWN_CONTENT_GUIDE.md create mode 100644 src/data/casesData.ts create mode 100644 src/data/solutionsData.ts diff --git a/MARKDOWN_CONTENT_GUIDE.md b/MARKDOWN_CONTENT_GUIDE.md new file mode 100644 index 0000000..1f95858 --- /dev/null +++ b/MARKDOWN_CONTENT_GUIDE.md @@ -0,0 +1,256 @@ +# Markdown 内容管理指南 + +本指南说明如何使用 Markdown 文件管理首页的各个 Section 内容。 + +## 概述 + +为了方便内容维护，首页以下 Section 已改为使用 Markdown 文件作为数据源： + +- ✅ **解决方案 (Solutions)** - `/src/data/solutionsData.ts` +- ✅ **客户案例 (Cases)** - `/src/data/casesData.ts` +- ✅ **博客与资讯 (Blog)** - `/src/data/markdownBlogData.ts` (已存在) +- ⚠️ **开发文档 (Docs)** - 已有 markdown 支持，但 DocsSection 组件仍使用硬编码数据 + +## 文件结构 + +``` +src/ +├── data/ +│ ├── solutionsData.ts # 解决方案数据加载器 (新增) +│ ├── casesData.ts # 客户案例数据加载器 (新增) +│ └── markdownBlogData.ts # 博客数据加载器 (已存在) +├── components/sections/ +│ ├── SolutionsSection.tsx # 解决方案组件 (已更新) +│ ├── CasesSection.tsx # 客户案例组件 (已更新) +│ ├── BlogSection.tsx # 博客组件 (已使用 markdown) +│ └── DocsSection.tsx # 文档组件 (待更新) +``` + +## 数据格式 + +### 解决方案 (Solutions) + +每个解决方案包含以下字段： + +```yaml +--- +id: elderly-care # 唯一标识符 +title: 养老院智慧康养 # 标题 +subtitle: 专业照护，温暖相伴 # 副标题 +description: 为养老机构提供... # 描述 +icon: Home # 图标名称 (lucide-react) +image: /images/elderly-care.jpg # 图片路径 +order: 1 # 显示顺序 +category: healthcare # 分类（可选） +benefits: # 优势列表 + - 24小时健康监测 + - 智能预警系统 + - 个性化护理方案 + - 家属远程关怀 +--- + +# 解决方案详细内容 + +Markdown 正文内容... +``` + +**可用图标名称：** +- `Home` - 家庭/养老院 +- `Hospital` - 医院 +- `Building2` - 企业/建筑 +- `FlaskConical` - 科研/实验 + +### 客户案例 (Cases) + +每个客户案例包含以下字段： + +```yaml +--- +id: xiehe-hospital # 唯一标识符 +company: 北京协和医院 # 公司名称 +logo: XH # Logo 缩写 +author: 张主任 # 作者姓名 +position: 信息科主任 # 职位 +rating: 5 # 评分 (1-5) +testimonial: 灵境万象的... # 客户评价 +order: 1 # 显示顺序 +category: hospital # 分类（可选） +metrics: # 指标数据 + - label: 诊疗效率提升 + value: 45% + - label: 数据准确率 + value: 99.8% +--- + +# 客户案例详细内容 + +Markdown 正文内容... +``` + +## 如何添加新内容 + +### 添加新的解决方案 + +1. 打开 `/src/data/solutionsData.ts` +2. 在 `solutionContents` 数组中添加新的内容： + +```typescript +const solutionContents = [ + // ... 现有内容 + `--- +id: new-solution +title: 新解决方案 +subtitle: 解决方案副标题 +description: 详细描述... +icon: Home +image: /images/new-solution.jpg +order: 5 +benefits: + - 优势1 + - 优势2 +--- + +# 新解决方案 + +详细的 Markdown 内容... +`, +]; +``` + +### 添加新的客户案例 + +1. 打开 `/src/data/casesData.ts` +2. 在 `caseContents` 数组中添加新的内容： + +```typescript +const caseContents = [ + // ... 现有内容 + `--- +id: new-case +company: 新客户公司 +logo: NC +author: 负责人 +position: 职位 +rating: 5 +testimonial: 客户评价内容... +order: 5 +metrics: + - label: 指标1 + value: 80% + - label: 指标2 + value: 95% +--- + +# 客户案例 + +详细内容... +`, +]; +``` + +## 如何修改现有内容 + +### 修改解决方案 + +1. 打开 `/src/data/solutionsData.ts` +2. 找到对应的解决方案（通过 `id` 查找） +3. 修改 YAML front matter 中的字段或 Markdown 正文 +4. 保存文件，Vite 会自动热重载 + +### 修改客户案例 + +1. 打开 `/src/data/casesData.ts` +2. 找到对应的案例（通过 `id` 查找） +3. 修改内容 +4. 保存文件 + +## API 使用 + +### Solutions API + +```typescript +import { loadSolutions, getSolutionById, getSolutionsByCategory } from '@/data/solutionsData'; + +// 加载所有解决方案 +const solutions = await loadSolutions(); + +// 根据 ID 获取单个解决方案 +const solution = await getSolutionById('elderly-care'); + +// 根据分类获取解决方案 +const healthcareSolutions = await getSolutionsByCategory('healthcare'); +``` + +### Cases API + +```typescript +import { loadCases, getCaseById, getCasesByCategory } from '@/data/casesData'; + +// 加载所有客户案例 +const cases = await loadCases(); + +// 根据 ID 获取单个案例 +const case = await getCaseById('xiehe-hospital'); + +// 根据分类获取案例 +const hospitalCases = await getCasesByCategory('hospital'); +``` + +## 优势 + +使用 Markdown 管理内容的优势： + +1. **易于维护** - 内容与代码分离，非技术人员也可以编辑 +2. **版本控制** - 可以通过 Git 跟踪内容变更历史 +3. **结构化数据** - YAML front matter 提供结构化的元数据 +4. **富文本支持** - Markdown 支持格式化文本、代码块、列表等 +5. **集中管理** - 所有内容集中在数据文件中，便于统一管理 + +## 未来改进 + +### 建议的改进方向： + +1. **将内容提取到独立文件** + - 创建 `/src/content/solutions/` 目录 + - 每个解决方案一个独立的 `.md` 文件 + - 使用 Vite 的 `import.meta.glob` 动态加载 + +2. **添加图片管理** + - 将图片放在 `/public/images/solutions/` 和 `/public/images/cases/` + - 建议使用 webp 格式以提高性能 + +3. **国际化支持** + - 为每个语言创建单独的内容文件 + - 例如：`solution-elderly-care.zh.md`, `solution-elderly-care.en.md` + +4. **CMS 集成** + - 未来可以考虑集成 Headless CMS (如 Strapi, Contentful) + - 提供可视化编辑界面 + +## 示例文件 + +完整的示例请参考： +- 解决方案：`/src/data/solutionsData.ts` 中的 `solutionContents` +- 客户案例：`/src/data/casesData.ts` 中的 `caseContents` +- 博客文章：`/src/content/blog/*.md` + +## 注意事项 + +1. **ID 唯一性**：每个内容项的 `id` 必须唯一 +2. **顺序控制**：使用 `order` 字段控制显示顺序（数字越小越靠前） +3. **图标名称**：确保使用的图标名称在 `iconMap` 中已定义 +4. **YAML 格式**：注意 YAML 的缩进和格式（使用空格，不要使用 Tab） +5. **热重载**：修改内容后，开发服务器会自动重新加载 + +## 技术栈 + +- **Markdown 解析**：自定义 front matter 解析器 +- **数据加载**：异步加载函数 with caching +- **图标系统**：lucide-react +- **状态管理**：React useState/useEffect + +--- + +**创建时间**：2025-12-02 +**最后更新**：2025-12-02 +**维护者**：OmniVerse Development Team diff --git a/src/components/sections/CasesSection.tsx b/src/components/sections/CasesSection.tsx index 21b0c94..9a42973 100644 --- a/src/components/sections/CasesSection.tsx +++ b/src/components/sections/CasesSection.tsx @@ -1,9 +1,11 @@ +import React from 'react'; import { motion } from 'framer-motion'; import { Star, Quote, Heart, Shield, Zap, Cpu, Smartphone, Hospital, Building2, Phone, Globe, ShoppingBag, Stethoscope, Home, Wifi } from 'lucide-react'; import { useTheme } from '../../contexts/ThemeContext'; +import { loadCases } from '../../data/casesData'; interface Case { - id: number; + id: string; company: string; logo: string; testimonial: string; @@ -16,61 +18,6 @@ interface Case { }[]; } -const cases: Case[] = [ - { - id: 1, - company: '北京协和医院', - logo: 'XH', - testimonial: '灵境万象的健康数据平台极大提升了我们的诊疗效率，AI辅助诊断功能帮助医生做出更精准的判断。', - author: '张主任', - position: '信息科主任', - rating: 5, - metrics: [ - { label: '诊疗效率提升', value: '45%' }, - { label: '数据准确率', value: '99.8%' }, - ], - }, - { - id: 2, - company: '阳光养老院', - logo: 'YG', - testimonial: '智能穿戴设备和康养机器人让我们能够为老人提供更贴心的照护服务，家属满意度大幅提升。', - author: '李院长', - position: '养老院院长', - rating: 5, - metrics: [ - { label: '照护效率提升', value: '60%' }, - { label: '家属满意度', value: '95%' }, - ], - }, - { - id: 3, - company: '华为技术有限公司', - logo: 'HW', - testimonial: 'EHS健康保障系统帮助我们建立了完善的员工健康管理体系，有效降低了职业健康风险。', - author: '王经理', - position: 'EHS负责人', - rating: 5, - metrics: [ - { label: '健康风险降低', value: '70%' }, - { label: '员工满意度', value: '92%' }, - ], - }, - { - id: 4, - company: '清华大学医学院', - logo: 'TH', - testimonial: '高质量的健康数据服务加速了我们的医疗研究进程，为科研创新提供了坚实基础。', - author: '陈教授', - position: '研究院院长', - rating: 5, - metrics: [ - { label: '研究效率提升', value: '50%' }, - { label: '数据利用率', value: '85%' }, - ], - }, -]; - interface Partner { name: string; logo: React.ReactNode; @@ -301,6 +248,24 @@ const PartnerCard = ({ partner, effectiveTheme }: { const CasesSection = () => { const { effectiveTheme } = useTheme(); + const [cases, setCases] = React.useState([]); + + React.useEffect(() => { + loadCases().then(data => { + // 转换数据格式以匹配组件接口 + const converted = data.map(item => ({ + id: item.id, + company: item.company, + logo: item.logo, + testimonial: item.testimonial, + author: item.author, + position: item.position, + rating: item.rating, + metrics: item.metrics, + })); + setCases(converted); + }); + }, []); return (
, - title: '养老院智慧康养', - subtitle: '专业照护，温暖相伴', - description: '为养老机构提供全方位智能化健康管理解决方案，实现精准照护和高效管理', - benefits: ['24小时健康监测', '智能预警系统', '个性化护理方案', '家属远程关怀'], - image: '/images/elderly-care.jpg', - }, - { - id: 2, - icon: , - title: '医院数字化健康管理', - subtitle: '精准医疗，智慧服务', - description: '助力医院实现数字化转型，提升医疗服务质量和效率', - benefits: ['患者数据管理', '远程医疗支持', 'AI辅助诊断', '医疗资源优化'], - image: '/images/hospital.jpg', - }, - { - id: 3, - icon: , - title: '企业EHS健康保障', - subtitle: '安全生产，健康工作', - description: '为企业员工提供全面的健康安全管理方案，降低职业健康风险', - benefits: ['员工健康档案', '职业病预防', '安全风险评估', '应急响应系统'], - image: '/images/corporate.jpg', - }, - { - id: 4, - icon: , - title: '科研机构数据服务', - subtitle: '数据驱动，创新引领', - description: '为科研机构提供高质量健康数据支持，加速医疗创新研究', - benefits: ['大数据分析', '临床研究支持', 'AI模型训练', '数据安全保障'], - image: '/images/research.jpg', - }, -]; +// 映射图标名称到实际的图标组件 +const iconMap: Record = { + Home: , + Hospital: , + Building2: , + FlaskConical: , +}; const SolutionsSection = () => { const { effectiveTheme } = useTheme(); + const [solutions, setSolutions] = React.useState([]); + + React.useEffect(() => { + loadSolutions().then(data => { + // 转换数据格式，将icon名称映射为React组件 + const converted = data.map(item => ({ + id: item.id, + icon: iconMap[item.icon] || , + title: item.title, + subtitle: item.subtitle, + description: item.description, + benefits: item.benefits, + image: item.image, + })); + setSolutions(converted); + }); + }, []); return (
0) { + const key = line.substring(0, colonIndex).trim(); + let value = line.substring(colonIndex + 1).trim(); + + // 处理 metrics 数组（包含对象） + if (key === 'metrics' && (value === '' || line.endsWith(':'))) { + const metrics: CaseMetric[] = []; + i++; + + while (i < frontMatterLines.length) { + const nextLine = frontMatterLines[i].trim(); + + if (nextLine.startsWith('- label:')) { + const label = nextLine.substring(8).trim(); + i++; + + if (i < frontMatterLines.length) { + const valueLine = frontMatterLines[i].trim(); + if (valueLine.startsWith('value:')) { + const metricValue = valueLine.substring(6).trim(); + metrics.push({ label, value: metricValue }); + } + } + i++; + } else if (nextLine === '') { + i++; + } else if (!nextLine.startsWith(' ') && nextLine.includes(':')) { + // 下一个键开始了 + break; + } else { + i++; + } + } + + data[key] = metrics; + continue; + } + + // 处理普通值 + if (value.startsWith('"') && value.endsWith('"')) { + value = value.slice(1, -1); + } else if (value.startsWith("'") && value.endsWith("'")) { + value = value.slice(1, -1); + } + + // 尝试解析数字 + if (/^\d+$/.test(value)) { + data[key] = parseInt(value, 10); + } else if (value === 'true') { + data[key] = true; + } else if (value === 'false') { + data[key] = false; + } else { + data[key] = value; + } + } + + i++; + } + + return { + id: data.id || '', + company: data.company || '', + logo: data.logo || '', + testimonial: data.testimonial || '', + author: data.author || '', + position: data.position || '', + rating: data.rating || 5, + metrics: data.metrics || [], + order: data.order || 999, + category: data.category, + image: data.image + }; +} + +// 静态客户案例数据 +const caseContents = [ + `--- +id: xiehe-hospital +company: 北京协和医院 +logo: XH +author: 张主任 +position: 信息科主任 +rating: 5 +testimonial: 灵境万象的健康数据平台极大提升了我们的诊疗效率，AI辅助诊断功能帮助医生做出更精准的判断。 +order: 1 +category: hospital +metrics: + - label: 诊疗效率提升 + value: 45% + - label: 数据准确率 + value: 99.8% +--- + +# 北京协和医院案例 + +北京协和医院是中国顶尖的医疗机构之一，通过部署灵境万象的智能健康数据平台，实现了医疗服务的数字化转型。`, + + `--- +id: sunshine-nursing-home +company: 阳光养老院 +logo: YG +author: 李院长 +position: 养老院院长 +rating: 5 +testimonial: 智能穿戴设备和康养机器人让我们能够为老人提供更贴心的照护服务，家属满意度大幅提升。 +order: 2 +category: elderly-care +metrics: + - label: 照护效率提升 + value: 60% + - label: 家属满意度 + value: 95% +--- + +# 阳光养老院案例 + +阳光养老院是一家专注于智慧养老的现代化养老机构，通过引入智能穿戴设备和康养机器人，为老人提供24小时智能健康监护服务。`, + + `--- +id: huawei-ehs +company: 华为技术有限公司 +logo: HW +author: 王经理 +position: EHS负责人 +rating: 5 +testimonial: EHS健康保障系统帮助我们建立了完善的员工健康管理体系，有效降低了职业健康风险。 +order: 3 +category: enterprise +metrics: + - label: 健康风险降低 + value: 70% + - label: 员工满意度 + value: 92% +--- + +# 华为技术有限公司案例 + +华为作为全球领先的科技企业，通过部署EHS健康保障系统，建立了完善的员工健康安全管理体系。`, + + `--- +id: tsinghua-medical +company: 清华大学医学院 +logo: TH +author: 陈教授 +position: 研究院院长 +rating: 5 +testimonial: 高质量的健康数据服务加速了我们的医疗研究进程，为科研创新提供了坚实基础。 +order: 4 +category: research +metrics: + - label: 研究效率提升 + value: 50% + - label: 数据利用率 + value: 85% +--- + +# 清华大学医学院案例 + +清华大学医学院在医疗研究和创新方面一直处于领先地位，通过使用灵境万象的健康数据服务平台，大大加速了医疗研究的进程。` +]; + +// 加载所有客户案例 +export async function loadCases(): Promise { + try { + const cases = caseContents.map(content => parseCaseMarkdown(content)); + return cases.sort((a, b) => a.order - b.order); + } catch (error) { + console.error('Failed to load cases:', error); + return []; + } +} + +// 根据ID获取单个案例 +export async function getCaseById(id: string): Promise { + const cases = await loadCases(); + return cases.find(caseItem => caseItem.id === id) || null; +} + +// 根据分类获取案例 +export async function getCasesByCategory(category: string): Promise { + const cases = await loadCases(); + return cases.filter(caseItem => caseItem.category === category); +} diff --git a/src/data/solutionsData.ts b/src/data/solutionsData.ts new file mode 100644 index 0000000..f355ea4 --- /dev/null +++ b/src/data/solutionsData.ts @@ -0,0 +1,213 @@ +// Solutions markdown data loader +export interface Solution { + id: string; + title: string; + subtitle: string; + description: string; + icon: string; // Icon name from lucide-react + image: string; + benefits: string[]; + order: number; + category?: string; + link?: string; +} + +// 从 markdown 格式的静态内容加载解决方案 +function parseSolutionMarkdown(content: string): Solution { + const lines = content.split('\n'); + + if (lines[0] !== '---') { + throw new Error('Invalid markdown format: missing front matter'); + } + + let frontMatterEnd = -1; + for (let i = 1; i < lines.length; i++) { + if (lines[i] === '---') { + frontMatterEnd = i; + break; + } + } + + if (frontMatterEnd === -1) { + throw new Error('Invalid markdown format: unclosed front matter'); + } + + const frontMatterLines = lines.slice(1, frontMatterEnd); + const data: any = {}; + + let i = 0; + while (i < frontMatterLines.length) { + const line = frontMatterLines[i]; + const colonIndex = line.indexOf(':'); + + if (colonIndex > 0) { + const key = line.substring(0, colonIndex).trim(); + let value = line.substring(colonIndex + 1).trim(); + + // 处理数组值（benefits, metrics等） + if (value === '' || line.endsWith(':')) { + const arrayValues: any[] = []; + i++; + + while (i < frontMatterLines.length) { + const nextLine = frontMatterLines[i].trim(); + + if (nextLine.startsWith('- ')) { + // 简单的数组项 + arrayValues.push(nextLine.substring(2).trim()); + i++; + } else if (nextLine === '') { + i++; + } else if (!nextLine.startsWith(' ')) { + // 下一个键开始了 + break; + } else { + i++; + } + } + + if (arrayValues.length > 0) { + data[key] = arrayValues; + } + continue; + } + + // 处理普通值 + if (value.startsWith('"') && value.endsWith('"')) { + value = value.slice(1, -1); + } + + // 尝试解析数字 + if (/^\d+$/.test(value)) { + data[key] = parseInt(value, 10); + } else if (value === 'true') { + data[key] = true; + } else if (value === 'false') { + data[key] = false; + } else { + data[key] = value; + } + } + + i++; + } + + return { + id: data.id || '', + title: data.title || '', + subtitle: data.subtitle || '', + description: data.description || '', + icon: data.icon || 'Home', + image: data.image || '', + benefits: data.benefits || [], + order: data.order || 999, + category: data.category, + link: data.link + }; +} + +// 静态解决方案数据 +const solutionContents = [ + `--- +id: elderly-care +title: 养老院智慧康养 +subtitle: 专业照护，温暖相伴 +description: 为养老机构提供全方位智能化健康管理解决方案，实现精准照护和高效管理 +icon: Home +image: /images/elderly-care.jpg +order: 1 +category: healthcare +benefits: + - 24小时健康监测 + - 智能预警系统 + - 个性化护理方案 + - 家属远程关怀 +--- + +# 养老院智慧康养解决方案 + +为养老机构提供全方位智能化健康管理解决方案，通过物联网设备、AI分析和智能机器人，实现精准照护和高效管理。`, + + `--- +id: hospital-digital +title: 医院数字化健康管理 +subtitle: 精准医疗，智慧服务 +description: 助力医院实现数字化转型，提升医疗服务质量和效率 +icon: Hospital +image: /images/hospital.jpg +order: 2 +category: healthcare +benefits: + - 患者数据管理 + - 远程医疗支持 + - AI辅助诊断 + - 医疗资源优化 +--- + +# 医院数字化健康管理解决方案 + +通过智能化的健康数据平台，帮助医院实现数字化转型，提供全面的患者数据管理、远程医疗支持和AI辅助诊断功能。`, + + `--- +id: corporate-ehs +title: 企业EHS健康保障 +subtitle: 安全生产，健康工作 +description: 为企业员工提供全面的健康安全管理方案，降低职业健康风险 +icon: Building2 +image: /images/corporate.jpg +order: 3 +category: enterprise +benefits: + - 员工健康档案 + - 职业病预防 + - 安全风险评估 + - 应急响应系统 +--- + +# 企业EHS健康保障解决方案 + +为企业提供环境、健康、安全（EHS）一体化管理平台，帮助企业建立完善的员工健康管理体系，有效降低职业健康风险。`, + + `--- +id: research-data +title: 科研机构数据服务 +subtitle: 数据驱动，创新引领 +description: 为科研机构提供高质量健康数据支持，加速医疗创新研究 +icon: FlaskConical +image: /images/research.jpg +order: 4 +category: research +benefits: + - 大数据分析 + - 临床研究支持 + - AI模型训练 + - 数据安全保障 +--- + +# 科研机构数据服务解决方案 + +为科研机构和医疗研究团队提供高质量、标准化的健康数据服务，支持临床研究、AI模型训练和医学创新。` +]; + +// 加载所有解决方案 +export async function loadSolutions(): Promise { + try { + const solutions = solutionContents.map(content => parseSolutionMarkdown(content)); + return solutions.sort((a, b) => a.order - b.order); + } catch (error) { + console.error('Failed to load solutions:', error); + return []; + } +} + +// 根据ID获取单个解决方案 +export async function getSolutionById(id: string): Promise { + const solutions = await loadSolutions(); + return solutions.find(solution => solution.id === id) || null; +} + +// 根据分类获取解决方案 +export async function getSolutionsByCategory(category: string): Promise { + const solutions = await loadSolutions(); + return solutions.filter(solution => solution.category === category); +}