169 lines
8.8 KiB
TypeScript
169 lines
8.8 KiB
TypeScript
import { useState } from 'react'
|
||
import { Link } from 'react-router-dom'
|
||
import { FOUR_VALUES as FALLBACK_FOUR, AMB_STATUS_META } from '@/data/mock'
|
||
import { useCMS, useCMSTexts, getCMSFourValues, getCMSAmb } from '@/services/cms'
|
||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||
|
||
export default function Evolution() {
|
||
const { data: FOUR_VALUES } = useCMS(getCMSFourValues, FALLBACK_FOUR)
|
||
const { data: AMB_META } = useCMS(getCMSAmb, AMB_STATUS_META)
|
||
const { data: texts } = useCMSTexts()
|
||
const text = (key: string, fallback: string) => texts[key] || fallback
|
||
const [foldValues, setFoldValues] = useState(false)
|
||
const [foldAmb, setFoldAmb] = useState(false)
|
||
|
||
return (
|
||
<div>
|
||
<div className="page-header">
|
||
<div className="container">
|
||
<div className="breadcrumb">
|
||
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||
首页
|
||
</Link>{' '}
|
||
/ 企业进化
|
||
</div>
|
||
<h1>{text('evolution.header_title', '企业进化')}</h1>
|
||
<p>
|
||
{text('evolution.header_description', '内部顺序强制：企业进化思想 → 四大价值坐标 → A/M/B 状态坐标，顺序不可调换。')}
|
||
</p>
|
||
<p style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>
|
||
{text('evolution.header_note', '从进化思想到价值坐标，再到状态坐标，逐层看清企业位置。')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 1. 企业进化思想 */}
|
||
<section className="section" id="idea">
|
||
<div className="container">
|
||
<p className="eyebrow">{text('evolution.idea_eyebrow', '01 — 企业进化思想')}</p>
|
||
<h2 className="h2">{text('evolution.idea_title', '进化是持续迭代，而非一次性变革')}</h2>
|
||
<p className="desc">{text('evolution.idea_description', '企业进化强调在不确定环境中，通过机制与人的双重迭代，实现组织的自适应与自进化。拒绝规模决定论，强调价值维度独立观察。')}</p>
|
||
<div className="card" style={{ marginTop: 16 }}>
|
||
<h3>{text('evolution.idea_core_title', '核心主张')}</h3>
|
||
<ul style={{ paddingLeft: 18, fontSize: 14, color: '#475569', lineHeight: 2 }}>
|
||
<li>{text('evolution.idea_bullet_1', '经营即进化：战略、组织、机制、人的协同进化')}</li>
|
||
<li>{text('evolution.idea_bullet_2', '坐标而非标签：用价值与状态观察，而非给企业贴标签')}</li>
|
||
<li>{text('evolution.idea_bullet_3', '陪跑而非交付：共创机制，陪跑落地，复盘迭代')}</li>
|
||
<li>{text('evolution.idea_bullet_4', '持续复盘迭代，让每一次行动都沉淀为组织能力')}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 2. 四大价值坐标 */}
|
||
<section className="section section-muted" id="values">
|
||
<div className="container">
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
|
||
<div>
|
||
<p className="eyebrow">{text('evolution.values_eyebrow', '02 — 四大价值坐标')}</p>
|
||
<h2 className="h2">{text('evolution.values_title', '观察坐标，非售卖产品')}</h2>
|
||
<p className="desc">{text('evolution.values_description', '四大价值定位为观察坐标，用于看清企业在各维度的真实位置。')}</p>
|
||
</div>
|
||
<button className="foldable-trigger" onClick={() => setFoldValues(!foldValues)} style={{ width: 'auto' }}>
|
||
{foldValues ? '收起' : '展开'}价值详情 <span>{foldValues ? '−' : '+'}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className={`foldable-content ${foldValues ? 'expanded' : 'collapsed'}`} style={{ display: foldValues ? 'block' : undefined }}>
|
||
<div className="grid-2" style={{ marginTop: 20 }}>
|
||
{FOUR_VALUES.map(v => (
|
||
<div key={v.id} className="card">
|
||
<h3>{v.name}</h3>
|
||
<p style={{ fontSize: 13, color: '#64748b' }}>{v.summary}</p>
|
||
<div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||
{v.observationDimensions.map(d => (
|
||
<span key={d} style={{ fontSize: 11, background: '#f1f5f9', padding: '4px 8px', borderRadius: 999 }}>
|
||
{d}
|
||
</span>
|
||
))}
|
||
</div>
|
||
<div className="placeholder" style={{ marginTop: 12, fontSize: 12 }}>
|
||
{v.description}
|
||
</div>
|
||
<Link to={`/evolution/values/${v.key}`} className="btn btn-ghost" style={{ marginTop: 12, width: '100%' }}>
|
||
进入详情 →
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{/* 始终显示在桌面端 */}
|
||
<div className="grid-2" style={{ marginTop: 20 }} data-desktop-only>
|
||
{/* 兼容：桌面端始终展开，移动端由折叠控制 */}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 桌面端强制展开 */}
|
||
<div className="grid-2" style={{ marginTop: 20 }}>
|
||
{FOUR_VALUES.map(v => (
|
||
<div key={v.id} className="card" data-desktop-card>
|
||
<h3>{v.name}</h3>
|
||
<p style={{ fontSize: 13, color: '#64748b' }}>{v.summary}</p>
|
||
<div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||
{v.observationDimensions.map(d => (
|
||
<span key={d} style={{ fontSize: 11, background: '#f1f5f9', padding: '4px 8px', borderRadius: 999 }}>
|
||
{d}
|
||
</span>
|
||
))}
|
||
</div>
|
||
<Link to={`/evolution/values/${v.key}`} className="btn btn-ghost" style={{ marginTop: 12, width: '100%' }}>
|
||
进入详情 →
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<style>{`@media(max-width:768px){ [data-desktop-card]{display:none} } @media(min-width:769px){ .foldable-trigger{display:none} .foldable-content{display:none!important} }`}</style>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 3. A/M/B 状态坐标 */}
|
||
<section className="section" id="amb">
|
||
<div className="container">
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
|
||
<div>
|
||
<p className="eyebrow">{text('evolution.amb_eyebrow', '03 — A/M/B 状态坐标')}</p>
|
||
<h2 className="h2">{text('evolution.amb_title', 'A / M / B 不绑定规模')}</h2>
|
||
<p className="desc">{text('evolution.amb_description', '支持同一企业不同价值维度处于不同状态，拒绝规模决定状态的包装。')}</p>
|
||
</div>
|
||
<button className="foldable-trigger" onClick={() => setFoldAmb(!foldAmb)} style={{ width: 'auto' }}>
|
||
{foldAmb ? '收起' : '展开'}状态详情 <span>{foldAmb ? '−' : '+'}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid-3" style={{ marginTop: 20 }}>
|
||
{Object.values(AMB_META).map(m => (
|
||
<div key={m.status} className="card">
|
||
<h3>{m.label}</h3>
|
||
<p style={{ fontSize: 13 }}>{m.description}</p>
|
||
<ul style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
|
||
{m.traits.map(t => (
|
||
<li key={t}>{t}</li>
|
||
))}
|
||
</ul>
|
||
<Link to={`/evolution/amb/${m.status}`} className="btn btn-secondary" style={{ marginTop: 12, width: '100%' }}>
|
||
查看 {m.status} 详情
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="card" style={{ marginTop: 20, background: '#f8fafc' }}>
|
||
<h3>{text('evolution.amb_example_title', '跨维度状态示例')}</h3>
|
||
<p style={{ fontSize: 13, color: '#64748b' }}>{text('evolution.amb_example_description', '示例：某企业 · 战略价值 A / 组织价值 M / 经营价值 B / 人的价值 M。说明同一企业可在不同坐标处不同状态，需分维度干预。')}</p>
|
||
</div>
|
||
|
||
<div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||
<Link to="/self-check" className="btn btn-primary">
|
||
看看你的企业（轻量对照）
|
||
</Link>
|
||
<Link to="/contact" className="btn btn-ghost">
|
||
咨询获取方案
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<GlobalCTA title="看清坐标，再谈行动" desc="先完成轻量对照，定位你的价值×状态矩阵，再选择陪跑路径。" />
|
||
</div>
|
||
)
|
||
}
|