chore: initialize deployable website and CMS

src/pages/Evolution/index.tsx

@@ -0,0 +1,176 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { FOUR_VALUES as FALLBACK_FOUR, AMB_STATUS_META } from '@/data/mock'
+import { useCMS, 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 [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>企业进化</h1>
+          <p>
+            内部顺序强制：<strong>企业进化思想 → 四大价值坐标 → A/M/B 状态坐标</strong>，顺序不可调换。
+          </p>
+          <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>
+            V1.1 FINAL 冻结顺序，任何调换需登记台账延后二期。
+          </p>
+        </div>
+      </div>
+
+      {/* 1. 企业进化思想 */}
+      <section className="section" id="idea">
+        <div className="container">
+          <p className="eyebrow">01 — 企业进化思想</p>
+          <h2 className="h2">进化是持续迭代，而非一次性变革</h2>
+          <p className="desc">
+            企业进化强调在不确定环境中，通过机制与人的双重迭代，实现组织的自适应与自进化。拒绝“规模决定论”，强调价值维度独立观察。
+          </p>
+          <div className="card" style={{ marginTop: 16 }}>
+            <h3>核心主张（占位）</h3>
+            <ul style={{ paddingLeft: 18, fontSize: 14, color: '#475569', lineHeight: 2 }}>
+              <li>经营即进化：战略、组织、机制、人的协同进化</li>
+              <li>坐标而非标签：用价值与状态观察，而非给企业贴标签</li>
+              <li>陪跑而非交付：共创机制，陪跑落地，复盘迭代</li>
+              <li>【占位｜待业务确认】更多思想阐述由知识母盘灌入</li>
+            </ul>
+            <div className="placeholder" style={{ marginTop: 12 }}>
+              【占位｜待业务确认】此段需业务方确认最终表述，一期仅保留结构。
+            </div>
+          </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">02 — 四大价值坐标</p>
+              <h2 className="h2">观察坐标，非售卖产品</h2>
+              <p className="desc">四大价值定位为观察坐标，不能包装成售卖产品。用于看清企业在各维度的真实位置。</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">03 — A/M/B 状态坐标</p>
+              <h2 className="h2">A / M / B 不绑定规模</h2>
+              <p className="desc">支持同一企业不同价值维度处于不同状态；拒绝“规模决定状态”的包装。</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>跨维度状态示例（占位）</h3>
+            <p style={{ fontSize: 13, color: '#64748b' }}>
+              示例：某企业 · 战略价值 A / 组织价值 M / 经营价值 B / 人的价值 M。说明同一企业可在不同坐标处不同状态，需分维度干预。
+            </p>
+            <div className="placeholder" style={{ marginTop: 10 }}>
+              【占位｜待业务确认】真实示例需脱敏后灌入，一期仅示意结构。
+            </div>
+          </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>
+  )
+}