chore: initialize deployable website and CMS
This commit is contained in:
Codex User
@@ -0,0 +1,64 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
import { useCMS, getCMSAmeba } from '@/services/cms'
|
||||
|
||||
export default function Ameba() {
|
||||
const { data } = useCMS(getCMSAmeba, null)
|
||||
const content = data || {}
|
||||
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>{content.brand_position || '以企业进化经营哲学为底色，坚持“利他、务实、陪跑”。不做纸上谈兵，只做可落地、可量化、有结果的实操辅导。'}</p>
|
||||
<div className="placeholder" style={{ marginTop: 16 }}>
|
||||
【占位｜待业务确认】团队介绍、资质、里程碑、价值观等由知识母盘灌入。专家网络仅作辅助信任证据，不作为核心支柱。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid-2">
|
||||
<div className="card">
|
||||
<h3>经营哲学</h3>
|
||||
<p>{content.philosophy || '阿米巴哲学本土化实践，强调人人经营、数据透明、持续改善。'}</p>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位】哲学主张、原则、行为准则待确认。
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3>服务理念</h3>
|
||||
<p>{content.practice || '教练式陪跑：顾问入企，手把手带教，体系化交付 SOP 与工具包。'}</p>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位】陪跑模式、交付标准待确认。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section section-muted">
|
||||
<div className="container">
|
||||
<h2 className="h2">我们是谁 · 占位</h2>
|
||||
<div className="card">
|
||||
<p className="desc">
|
||||
成都阿美巴企业管理咨询有限公司，专注体系化增长落地。核心团队十年以上实战经验，覆盖制造、服务、科技、商贸等领域。
|
||||
</p>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
{content.mission || '【占位｜待业务确认】公司简介、团队、资质证书、合作客户 LOGO 墙均待业务方提供定稿素材。'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { CASES as FALLBACK_CASES } from '@/data/mock'
|
||||
import { useCMS, getCMSCases } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
const LABELS: Record<string, string> = {
|
||||
originalState: '企业原状',
|
||||
goal: '企业目标',
|
||||
gap: '现存差距',
|
||||
rootCause: '根因',
|
||||
amebaIntervention: '阿美巴介入',
|
||||
evolutionPath: '进化路径',
|
||||
actions: '落地动作',
|
||||
phasedResult: '阶段结果',
|
||||
continuousIteration: '持续迭代',
|
||||
}
|
||||
|
||||
export default function CaseDetail() {
|
||||
const { data: CASES } = useCMS(getCMSCases, FALLBACK_CASES)
|
||||
const { slug } = useParams()
|
||||
const c = CASES.find(x => x.slug === slug)
|
||||
|
||||
if (!c)
|
||||
return (
|
||||
<div className="container section">
|
||||
<div className="placeholder">未找到案例：{slug}</div>
|
||||
<Link to="/cases" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
返回案例列表
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<div className="breadcrumb">
|
||||
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
首页
|
||||
</Link>{' '}
|
||||
/{' '}
|
||||
<Link to="/cases" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
实践案例
|
||||
</Link>{' '}
|
||||
/ 详情
|
||||
</div>
|
||||
<h1>{c.title}</h1>
|
||||
<p>{c.summary}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="card" style={{ borderLeft: '4px solid #163E70' }}>
|
||||
<h3>案例叙事 · 9段固定插槽</h3>
|
||||
<p style={{ fontSize: 12, color: '#64748b' }}>CMS 仅替换插槽文本，不改结构。未确认字段统一占位。</p>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 20, display: 'grid', gap: 16 }}>
|
||||
{Object.entries(c.narrative).map(([key, val]) => (
|
||||
<div key={key} className="card">
|
||||
<div style={{ fontSize: 11, letterSpacing: '0.08em', color: '#0f6b5b', fontWeight: 800 }}>{LABELS[key]}</div>
|
||||
<p style={{ marginTop: 6, fontSize: 14, color: '#334155' }}>{val as string}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginTop: 16, background: '#f8fafc' }}>
|
||||
<h3>关联维度（预留）</h3>
|
||||
<p style={{ fontSize: 13, color: '#64748b' }}>关联价值：{c.fourValuesInvolved?.join(', ') || '【占位】待关联'}</p>
|
||||
<p style={{ fontSize: 13, color: '#64748b' }}>关联服务：{c.serviceIds?.join(', ') || '【占位】待关联'}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
<Link to="/cases" className="btn btn-ghost">
|
||||
← 返回案例列表
|
||||
</Link>
|
||||
<Link to="/contact" className="btn btn-primary">
|
||||
咨询同类方案
|
||||
</Link>
|
||||
<Link to="/services" className="btn btn-ghost">
|
||||
查看产品服务
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { CASES as FALLBACK_CASES } from '@/data/mock'
|
||||
import { useCMS, getCMSCases } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function Cases() {
|
||||
const { data: CASES } = useCMS(getCMSCases, FALLBACK_CASES)
|
||||
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>固定叙事插槽 9 段式结构，业务数据与布局解耦，未来由 CMS 接管。无虚构数据，未确认统一占位。</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid-2">
|
||||
{CASES.map(c => (
|
||||
<Link key={c.id} to={`/cases/${c.slug}`} className="card" style={{ display: 'block' }}>
|
||||
<div style={{ fontSize: 11, color: '#0f6b5b', fontWeight: 800, letterSpacing: '0.08em' }}>CASE · {c.status.toUpperCase()}</div>
|
||||
<h3 style={{ marginTop: 6 }}>{c.title}</h3>
|
||||
<p>{c.summary}</p>
|
||||
<div className="placeholder" style={{ marginTop: 10, fontSize: 12 }}>
|
||||
权重 {c.sortWeight} · 上下架 {c.status} · 预留排序
|
||||
</div>
|
||||
<span style={{ fontSize: 12, color: '#163E70', fontWeight: 700, marginTop: 10, display: 'inline-block' }}>查看完整叙事 →</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="card" style={{ marginTop: 20, background: '#fff7e6', borderColor: '#f59e0b' }}>
|
||||
<strong style={{ color: '#92400e' }}>案例叙事模板插槽（固定 9 段）</strong>
|
||||
<p style={{ fontSize: 13, color: '#78350f', marginTop: 6 }}>
|
||||
企业原状 → 企业目标 → 现存差距 → 根因 → 阿美巴介入 → 进化路径 → 落地动作 → 阶段结果 → 持续迭代
|
||||
</p>
|
||||
<p style={{ fontSize: 12, color: '#92400e', marginTop: 4 }}>CMS 接管后，编辑仅替换插槽内容，不改页面结构。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function Contact() {
|
||||
const [form, setForm] = useState({ name: '', company: '', phone: '', need: '' })
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setSaving(true)
|
||||
try {
|
||||
const response = await fetch('/api/contact/leads', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
})
|
||||
const result = await response.json()
|
||||
if (!response.ok || result.code !== 0) throw new Error(result.msg || '提交失败')
|
||||
setSubmitted(true)
|
||||
setForm({ name: '', company: '', phone: '', need: '' })
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : '提交失败，请稍后再试')
|
||||
} finally {
|
||||
setSaving(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>任意页面均可直达此页发起行动；不强制浏览完整链路。提交后由顾问跟进。</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container" style={{ maxWidth: 720 }}>
|
||||
<div className="grid-2">
|
||||
<div className="card">
|
||||
<h3>咨询获取方案</h3>
|
||||
<p style={{ fontSize: 13, color: '#64748b' }}>提交后将进入顾问线索列表，请填写真实联系方式。</p>
|
||||
<form onSubmit={submit} style={{ marginTop: 16, display: 'grid', gap: 12 }}>
|
||||
<label style={{ fontSize: 13 }}>
|
||||
姓名
|
||||
<input
|
||||
required
|
||||
value={form.name}
|
||||
onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
placeholder="请输入姓名"
|
||||
style={{ width: '100%', marginTop: 6, padding: '10px 12px', border: '1px solid #e2e8f0', borderRadius: 8 }}
|
||||
/>
|
||||
</label>
|
||||
<label style={{ fontSize: 13 }}>
|
||||
企业名称
|
||||
<input
|
||||
value={form.company}
|
||||
onChange={e => setForm({ ...form, company: e.target.value })}
|
||||
placeholder="【占位】选填"
|
||||
style={{ width: '100%', marginTop: 6, padding: '10px 12px', border: '1px solid #e2e8f0', borderRadius: 8 }}
|
||||
/>
|
||||
</label>
|
||||
<label style={{ fontSize: 13 }}>
|
||||
联系电话
|
||||
<input
|
||||
required
|
||||
value={form.phone}
|
||||
onChange={e => setForm({ ...form, phone: e.target.value })}
|
||||
placeholder="请输入手机号"
|
||||
style={{ width: '100%', marginTop: 6, padding: '10px 12px', border: '1px solid #e2e8f0', borderRadius: 8 }}
|
||||
/>
|
||||
</label>
|
||||
<label style={{ fontSize: 13 }}>
|
||||
需求简述
|
||||
<textarea
|
||||
value={form.need}
|
||||
onChange={e => setForm({ ...form, need: e.target.value })}
|
||||
placeholder="请简述你的企业现状与期望（占位）"
|
||||
rows={3}
|
||||
style={{ width: '100%', marginTop: 6, padding: '10px 12px', border: '1px solid #e2e8f0', borderRadius: 8 }}
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" className="btn btn-primary" style={{ width: '100%' }} disabled={saving}>
|
||||
{saving ? '提交中…' : '提交咨询'}
|
||||
</button>
|
||||
{submitted && <div style={{ fontSize: 13, color: '#0f6b5b', background: '#ecfdf5', padding: 10, borderRadius: 8 }}>已提交，顾问将尽快联系。</div>}
|
||||
{error && <div style={{ fontSize: 13, color: '#be123c', background: '#fff1f2', padding: 10, borderRadius: 8 }}>{error}</div>}
|
||||
<p style={{ fontSize: 11, color: '#94a3b8' }}>提交即视为同意隐私与合规说明（占位）。</p>
|
||||
</form>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gap: 16, alignContent: 'start' }}>
|
||||
<div className="card">
|
||||
<h3>其他通道</h3>
|
||||
<p style={{ fontSize: 13, color: '#475569' }}>电话、邮箱、地址等待业务确认后灌入。</p>
|
||||
<div className="placeholder" style={{ marginTop: 10 }}>
|
||||
【占位｜待业务确认】商务电话 / 企业邮箱 / 办公地址 / 企业微信二维码
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3>快速路径</h3>
|
||||
<p style={{ fontSize: 13, color: '#475569' }}>首页 → 看看你的企业（轻量对照）→ 联系我们 → 顾问跟进</p>
|
||||
<p style={{ fontSize: 13, color: '#475569' }}>首页 → 企业进化 → 价值/A/M/B → 联系我们（深度路径）</p>
|
||||
<Link to="/self-check" className="btn btn-ghost" style={{ width: '100%', marginTop: 10 }}>
|
||||
先看看你的企业 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="cta-band">
|
||||
<div className="container">
|
||||
<div>
|
||||
<strong>全站任意页面均可发起咨询</strong>
|
||||
<p>无需浏览完整链路，点击常驻 CTA 即可直达此页。</p>
|
||||
</div>
|
||||
<Link to="/self-check" className="btn" style={{ background: '#fff', color: '#163E70' }}>
|
||||
轻量对照 →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
|
||||
function Radar({scores}:{scores:Record<string,number>}){
|
||||
const keys=['value1','value2','value3','value4']
|
||||
const labels:{[k:string]:string}={value1:'价值创造',value2:'价值传递',value3:'价值交付',value4:'价值支持'}
|
||||
const vals = keys.map(k=> scores[k]||0)
|
||||
const max=5
|
||||
const size=200, cx=100, cy=100, r=80
|
||||
const points = vals.map((v,i)=>{
|
||||
const angle = -90 + (360/keys.length)*i
|
||||
const rad = angle*Math.PI/180
|
||||
const rr = (v/max)*r
|
||||
return `${cx + rr*Math.cos(rad)},${cy + rr*Math.sin(rad)}`
|
||||
}).join(' ')
|
||||
const grid = [0.25,0.5,0.75,1].map(s=>{
|
||||
const pts = keys.map((_,i)=>{
|
||||
const angle=-90+(360/keys.length)*i
|
||||
const rad=angle*Math.PI/180
|
||||
const rr=r*s
|
||||
return `${cx+rr*Math.cos(rad)},${cy+rr*Math.sin(rad)}`
|
||||
}).join(' ')
|
||||
return <polygon key={s} points={pts} fill="none" stroke="#e2e8f0" strokeWidth={1} />
|
||||
})
|
||||
return (
|
||||
<div style={{textAlign:'center'}}>
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
|
||||
{grid}
|
||||
{keys.map((k,i)=>{
|
||||
const angle=-90+(360/keys.length)*i
|
||||
const rad=angle*Math.PI/180
|
||||
return <line key={k} x1={cx} y1={cy} x2={cx+r*Math.cos(rad)} y2={cy+r*Math.sin(rad)} stroke="#e2e8f0" />
|
||||
})}
|
||||
<polygon points={points} fill="rgba(22,62,112,0.2)" stroke="#163E70" strokeWidth={2} />
|
||||
{vals.map((v,i)=>{
|
||||
const angle=-90+(360/keys.length)*i
|
||||
const rad=angle*Math.PI/180
|
||||
const rr=(v/max)*r
|
||||
return <circle key={i} cx={cx+rr*Math.cos(rad)} cy={cy+rr*Math.sin(rad)} r={4} fill="#163E70" />
|
||||
})}
|
||||
</svg>
|
||||
<div style={{display:'flex', justifyContent:'space-around', fontSize:11, color:'#475569'}}>
|
||||
{keys.map(k=> <span key={k}>{labels[k]}:{scores[k]}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Report(){
|
||||
const {token}=useParams()
|
||||
const [data,setData]=useState<any>(null)
|
||||
const [loading,setLoading]=useState(true)
|
||||
const [err,setErr]=useState('')
|
||||
const [lead,setLead]=useState({name:'',company:'',phone:''})
|
||||
const [leadDone,setLeadDone]=useState(false)
|
||||
const [showFull,setShowFull]=useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
fetch(`/api/diagnosis/reports/${token}`).then(r=>r.json()).then(j=>{
|
||||
if(j.code!==0) throw new Error(j.msg)
|
||||
setData(j.data)
|
||||
}).catch(e=> setErr(e.message)).finally(()=> setLoading(false))
|
||||
},[token])
|
||||
|
||||
if(loading) return <div className="container section">生成报告中... <5s</div>
|
||||
if(err) return <div className="container section"><div className="placeholder">{err}</div><Link to="/diagnosis" className="btn btn-primary">重新诊断</Link></div>
|
||||
if(!data) return null
|
||||
|
||||
const scores=data.scores, amb=data.amb, gap=data.gap, rc=data.root_cause, ps=data.path_suggestion
|
||||
const shareUrl=`${location.origin}/diagnosis/share/${data.share_token}`
|
||||
|
||||
const submitLead=async()=>{
|
||||
if(lead.phone && !/^1[3-9]\d{9}$/.test(lead.phone)) return alert('手机号格式错误')
|
||||
const r=await fetch(`/api/diagnosis/reports/${token}/lead`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(lead)}).then(r=>r.json())
|
||||
if(r.code===0){ setLeadDone(true); setShowFull(true) }
|
||||
else alert(r.msg)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<h1>企业进化诊断报告</h1>
|
||||
<p>基于企业自填信息的初步分析，仅供参考，不替代人工咨询</p>
|
||||
<p style={{fontSize:12, color:'rgba(255,255,255,0.7)'}}>报告ID {data.token} · 有效期至 {new Date(data.expires_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container" style={{maxWidth:800}}>
|
||||
<div className="card">
|
||||
<h3>1. 进化坐标总览</h3>
|
||||
<Radar scores={scores} />
|
||||
<div style={{marginTop:12, display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, fontSize:13}}>
|
||||
{Object.keys(amb).map(k=> <div key={k} style={{background:'#f8fafc', padding:8, borderRadius:6}}>{k}:{amb[k]}·{scores[k]}分</div>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>2. 各维度现状与差距</h3>
|
||||
<table className="table"><thead><tr><th>维度</th><th>得分</th><th>状态</th><th>差距(距5分)</th></tr></thead>
|
||||
<tbody>{Object.keys(scores).map(k=> <tr key={k}><td>{k}</td><td>{scores[k]}</td><td>{amb[k]}</td><td>{gap[k]}</td></tr>)}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>3. 核心根因判断</h3>
|
||||
<p style={{fontSize:14}}>{rc?.label}：{rc?.reason}</p>
|
||||
<p style={{fontSize:12,color:'#64748b'}}>规则：最低得分维度为瓶颈，非随机</p>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>4. 进化路径建议（分阶段）</h3>
|
||||
<p><strong>{ps?.stage}</strong> - {ps?.recommendation}（综合得分 {ps?.overall}）</p>
|
||||
<p style={{fontSize:12,color:'#475569'}}>目标→现状→差距→根因→路径→推进→反馈→再进化</p>
|
||||
</div>
|
||||
|
||||
{!showFull && (
|
||||
<div className="card" style={{border:'2px solid #163E70'}}>
|
||||
<h3>5. 推荐服务（完整版需留资解锁）</h3>
|
||||
<p style={{fontSize:13, color:'#64748b'}}>基础版已展示坐标与差距，留资后解锁：推荐匹配的产品与服务 + 下一步行动建议</p>
|
||||
<div className="form-row" style={{marginTop:12}}>
|
||||
<div className="field"><label>姓名</label><input value={lead.name} onChange={e=> setLead({...lead,name:e.target.value})} /></div>
|
||||
<div className="field"><label>企业名称</label><input value={lead.company} onChange={e=> setLead({...lead,company:e.target.value})} /></div>
|
||||
</div>
|
||||
<div className="field"><label>手机号（选填，不留也可看基础版）</label><input value={lead.phone} onChange={e=> setLead({...lead,phone:e.target.value})} placeholder="11位手机号" /></div>
|
||||
<button className="btn btn-primary" onClick={submitLead}>提交解锁完整版</button>
|
||||
<button className="btn btn-ghost" style={{marginLeft:8}} onClick={()=> setShowFull(true)}>暂不留资，仅看基础版</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showFull && (
|
||||
<>
|
||||
<div className="card">
|
||||
<h3>5. 推荐匹配的产品与服务</h3>
|
||||
<p style={{fontSize:13}}>{ps?.stage==='A态入门'?'推荐：A态入门方案 · 单点突破':'M态进阶'===ps?.stage?'推荐：M态进阶方案 · 机制完善':'推荐：B态全案 · 系统化构建'}</p>
|
||||
<Link to="/services" className="btn btn-secondary">查看产品服务</Link>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3>6. 下一步行动建议</h3>
|
||||
<p style={{fontSize:13}}>预约企业进化梳理 / 获取定制方案 / 拨打400热线</p>
|
||||
<div style={{display:'flex',gap:10}}>
|
||||
<Link to="/contact" className="btn btn-primary">预约企业进化梳理</Link>
|
||||
<a href={`tel:400`} className="btn btn-ghost">拨打400热线</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="card" style={{background:'#fff7e6'}}>
|
||||
<h3>7. 免责声明</h3>
|
||||
<p style={{fontSize:12,color:'#92400e'}}>本报告基于企业自填信息的初步分析，仅供参考，不替代人工咨询，不做绝对化结论与收益预测。最终方案需顾问介入。</p>
|
||||
</div>
|
||||
|
||||
<div style={{display:'flex', gap:10, flexWrap:'wrap', marginTop:16}}>
|
||||
<a href={`/api/diagnosis/reports/${token}/pdf`} className="btn btn-primary">下载PDF</a>
|
||||
<button className="btn btn-ghost" onClick={()=> navigator.clipboard.writeText(shareUrl).then(()=> alert('分享链接已复制：'+shareUrl))}>复制分享链接</button>
|
||||
<Link to="/diagnosis" className="btn btn-ghost">重新诊断</Link>
|
||||
</div>
|
||||
<div style={{fontSize:11,color:'#94a3b8', marginTop:8}}>分享链接：{shareUrl} · 有效期可配置，过期需重新诊断</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
export default function Share(){
|
||||
const {shareToken}=useParams()
|
||||
const [data,setData]=useState<any>(null)
|
||||
const [err,setErr]=useState('')
|
||||
useEffect(()=>{
|
||||
fetch(`/api/diagnosis/share/${shareToken}`).then(r=>r.json()).then(j=>{
|
||||
if(j.code!==0) throw new Error(j.msg)
|
||||
setData(j.data)
|
||||
}).catch(e=> setErr(e.message))
|
||||
},[shareToken])
|
||||
if(err) return <div className="container section"><div className="placeholder">{err}</div></div>
|
||||
if(!data) return <div className="container section">加载分享报告...</div>
|
||||
return (
|
||||
<div className="container section">
|
||||
<h2>分享的诊断报告</h2>
|
||||
<p style={{fontSize:12,color:'#64748b'}}>基于企业自填信息的初步分析，仅供参考</p>
|
||||
<div className="card"><pre style={{whiteSpace:'pre-wrap',fontSize:12}}>{JSON.stringify({scores:data.scores, amb:data.amb, gap:data.gap}, null, 2)}</pre></div>
|
||||
<a href={`/api/diagnosis/reports/${data.token}/pdf`} className="btn btn-primary">下载PDF</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
|
||||
type Q = { id:string, group_key:string, group_name:string, type:string, title:string, options:any[], sort_order:number }
|
||||
const STORAGE_KEY='diagnosis_progress'
|
||||
|
||||
export default function Diagnosis(){
|
||||
const [questions,setQuestions]=useState<Q[]>([])
|
||||
const [answers,setAnswers]=useState<Record<string,any>>({})
|
||||
const [idx,setIdx]=useState(0)
|
||||
const nav=useNavigate()
|
||||
const [loading,setLoading]=useState(true)
|
||||
|
||||
useEffect(()=>{
|
||||
fetch('/api/diagnosis/questions').then(r=>r.json()).then(j=>{
|
||||
const list = (j.data||[]).sort((a:Q,b:Q)=> b.sort_order - a.sort_order)
|
||||
setQuestions(list)
|
||||
// 断点续填
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
if(saved){
|
||||
try{ const p=JSON.parse(saved); if(p.answers) setAnswers(p.answers); if(typeof p.idx==='number') setIdx(p.idx)}catch{}
|
||||
}
|
||||
setLoading(false)
|
||||
})
|
||||
},[])
|
||||
useEffect(()=>{
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({answers, idx}))
|
||||
},[answers, idx])
|
||||
|
||||
const q = questions[idx]
|
||||
const progress = questions.length? Math.round(((idx)/questions.length)*100):0
|
||||
const answeredCount = Object.keys(answers).length
|
||||
|
||||
const handleAnswer=(val:any)=>{
|
||||
const next={...answers, [q.id]:val}
|
||||
setAnswers(next)
|
||||
}
|
||||
const nextQ=()=>{
|
||||
if(idx<questions.length-1) setIdx(idx+1)
|
||||
else submit()
|
||||
}
|
||||
const prevQ=()=> setIdx(Math.max(0, idx-1))
|
||||
|
||||
const submit=async()=>{
|
||||
// 创建会话并提交
|
||||
const sess = await fetch('/api/diagnosis/sessions',{method:'POST'}).then(r=>r.json())
|
||||
const token = sess.data.token
|
||||
await fetch(`/api/diagnosis/sessions/${token}`,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({answers})})
|
||||
const rep = await fetch(`/api/diagnosis/sessions/${token}/submit`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({answers})}).then(r=>r.json())
|
||||
localStorage.removeItem(STORAGE_KEY)
|
||||
nav(`/diagnosis/report/${rep.data.token}`)
|
||||
}
|
||||
|
||||
if(loading) return <div className="container section">加载问卷... <2s</div>
|
||||
if(!q) return <div className="container section">暂无题目，请联系管理员在CMS后台配置</div>
|
||||
|
||||
const isAnswered = answers[q.id]!==undefined
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<h1>企业进化诊断</h1>
|
||||
<p>15-20题 · 按四大价值分组 · 区间选择无需精确填写 · 免责：初步分析仅供参考</p>
|
||||
<div style={{marginTop:12, background:'rgba(255,255,255,0.2)', height:6, borderRadius:6}}>
|
||||
<div style={{width:`${progress}%`, height:'100%', background:'#fff', borderRadius:6}} />
|
||||
</div>
|
||||
<div style={{fontSize:12, color:'rgba(255,255,255,0.8)', marginTop:4}}>{idx+1}/{questions.length} · 已答 {answeredCount} 题 · 本地自动保存，刷新不丢失</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container" style={{maxWidth:720}}>
|
||||
<div className="card">
|
||||
<div style={{fontSize:12, color:'#0f6b5b', fontWeight:800}}>{q.group_name} · {q.type==='scale'?'量表 1-5':q.type==='multiple'?'多选':'单选'}</div>
|
||||
<h3 style={{marginTop:6}}>{idx+1}. {q.title}</h3>
|
||||
<div style={{marginTop:12, display:'grid', gap:8}}>
|
||||
{q.options.map((opt:any)=> {
|
||||
const selected = q.type==='multiple' ? (Array.isArray(answers[q.id]) && answers[q.id].includes(opt.label)) : answers[q.id]===opt.label
|
||||
return (
|
||||
<label key={opt.label} style={{border: selected?'2px solid #163E70':'1px solid #e2e8f0', background: selected?'#eff6ff':'#fff', padding:'10px 12px', borderRadius:8, cursor:'pointer', display:'flex', justifyContent:'space-between'}}>
|
||||
<span><input type={q.type==='multiple'?'checkbox':'radio'} checked={!!selected} onChange={()=>{
|
||||
if(q.type==='multiple'){
|
||||
const arr=Array.isArray(answers[q.id])? [...answers[q.id]]:[]
|
||||
if(selected) handleAnswer(arr.filter(v=>v!==opt.label))
|
||||
else handleAnswer([...arr, opt.label])
|
||||
} else handleAnswer(opt.label)
|
||||
}} style={{marginRight:8}} />{opt.label}</span>
|
||||
<span style={{fontSize:11,color:'#64748b'}}>{opt.score}分</span>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div style={{display:'flex', gap:10, marginTop:16}}>
|
||||
<button className="btn btn-ghost" onClick={prevQ} disabled={idx===0}>上一步</button>
|
||||
<button className="btn btn-primary" style={{flex:1}} onClick={nextQ} disabled={!isAnswered}>{idx===questions.length-1?'提交生成报告':'下一步'}</button>
|
||||
</div>
|
||||
<div style={{fontSize:11, color:'#94a3b8', marginTop:8}}>禁止开放题必填 · 采用区间选择 · 不收集敏感财务数据</div>
|
||||
</div>
|
||||
<div style={{marginTop:12, display:'flex', gap:10}}>
|
||||
<Link to="/self-check" className="btn btn-ghost">返回轻量对照</Link>
|
||||
<button className="btn btn-ghost" onClick={()=>{localStorage.removeItem(STORAGE_KEY); setAnswers({}); setIdx(0)}}>重置进度</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { AMB_STATUS_META } from '@/data/mock'
|
||||
import { useCMS, getCMSAmb } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function AmbDetail() {
|
||||
const { status } = useParams()
|
||||
const { data: ambMeta } = useCMS(getCMSAmb, AMB_STATUS_META)
|
||||
const meta = ambMeta[status as string]
|
||||
|
||||
if (!meta) {
|
||||
return (
|
||||
<div className="container section">
|
||||
<div className="placeholder">未找到状态：{status}</div>
|
||||
<Link to="/evolution" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
返回企业进化
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<div className="breadcrumb">
|
||||
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
首页
|
||||
</Link>{' '}
|
||||
/{' '}
|
||||
<Link to="/evolution" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
企业进化
|
||||
</Link>{' '}
|
||||
/ {meta.label}
|
||||
</div>
|
||||
<h1>{meta.label}</h1>
|
||||
<p>{meta.description}</p>
|
||||
<p style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>不绑定规模 · 支持跨维度不同状态</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="card">
|
||||
<h3>典型特征</h3>
|
||||
<ul style={{ paddingLeft: 18, lineHeight: 2, fontSize: 14 }}>
|
||||
{meta.traits.map(t => (
|
||||
<li key={t}>{t}</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位｜待业务确认】该状态的完整特征、风险、进化建议、案例映射待业务确认后灌入。
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
|
||||
<Link to="/evolution" className="btn btn-ghost">
|
||||
← 返回企业进化
|
||||
</Link>
|
||||
<Link to="/contact" className="btn btn-primary">
|
||||
获取进化方案
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { FOUR_VALUES as FALLBACK_FOUR } from '@/data/mock'
|
||||
import { useCMS, getCMSFourValues } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function ValuesDetail() {
|
||||
const { data: FOUR_VALUES } = useCMS(getCMSFourValues, FALLBACK_FOUR)
|
||||
const { key } = useParams()
|
||||
const value = FOUR_VALUES.find(v => v.key === key)
|
||||
|
||||
if (!value) {
|
||||
return (
|
||||
<div className="container section">
|
||||
<div className="placeholder">未找到该价值坐标：{key}</div>
|
||||
<Link to="/evolution" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
返回企业进化
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<div className="breadcrumb">
|
||||
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
首页
|
||||
</Link>{' '}
|
||||
/{' '}
|
||||
<Link to="/evolution" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
企业进化
|
||||
</Link>{' '}
|
||||
/ {value.name}
|
||||
</div>
|
||||
<h1>{value.name}</h1>
|
||||
<p>{value.summary}</p>
|
||||
<p style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>观察坐标 · 非售卖产品 · CMS预留字段已就绪</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="card">
|
||||
<h3>观察维度</h3>
|
||||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
|
||||
{value.observationDimensions.map(d => (
|
||||
<span key={d} style={{ background: '#f1f5f9', padding: '6px 12px', borderRadius: 999, fontSize: 12 }}>
|
||||
{d}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="placeholder" style={{ marginTop: 16 }}>
|
||||
{value.description}
|
||||
<br />
|
||||
【占位｜待业务确认】此价值坐标的完整阐述、评估要点、典型表现需由知识母盘灌入。
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
|
||||
<Link to="/evolution" className="btn btn-ghost">
|
||||
← 返回企业进化
|
||||
</Link>
|
||||
<Link to="/self-check" className="btn btn-primary">
|
||||
看看你的企业
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.hero-home {
|
||||
background: linear-gradient(135deg, #0f172a 0%, #163E70 55%, #0f6b5b 100%);
|
||||
color: #fff;
|
||||
padding: 64px 0 56px;
|
||||
}
|
||||
.hero-home-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; }
|
||||
.hero-copy h1 { font-size: 40px; font-weight: 900; line-height: 1.15; margin: 8px 0 14px; }
|
||||
.hero-desc { color: rgba(255,255,255,0.82); font-size: 15px; line-height: 1.8; max-width: 560px; }
|
||||
.hero-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
|
||||
.hero-trust { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,0.6); border-top: 1px solid rgba(255,255,255,0.12); padding-top: 12px; }
|
||||
.visual-card { background: #fff; color: var(--text); border-radius: 16px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
|
||||
.visual-title { font-weight: 800; color: var(--primary); margin-bottom: 16px; }
|
||||
.visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.visual-grid div { background: #f8fafc; border-radius: 10px; padding: 14px; }
|
||||
.visual-grid strong { font-size: 13px; color: var(--primary); }
|
||||
.visual-grid p { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
|
||||
|
||||
.section-heading { margin-bottom: 20px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-home-inner { grid-template-columns: 1fr; }
|
||||
.hero-copy h1 { font-size: 28px; }
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
import { FOUR_VALUES as FALLBACK_FOUR, SERVICES as FALLBACK_SERVICES, CASES as FALLBACK_CASES, INSIGHTS as FALLBACK_INSIGHTS } from '@/data/mock'
|
||||
import { useCMS, getCMSFourValues, getCMSServices, getCMSCases, getCMSInsights } from '@/services/cms'
|
||||
import './home.css'
|
||||
|
||||
export default function Home() {
|
||||
const { data: fourValues } = useCMS(getCMSFourValues, FALLBACK_FOUR)
|
||||
const { data: services } = useCMS(getCMSServices, FALLBACK_SERVICES)
|
||||
const { data: cases } = useCMS(getCMSCases, FALLBACK_CASES)
|
||||
const { data: insights } = useCMS(getCMSInsights, FALLBACK_INSIGHTS)
|
||||
return (
|
||||
<div className="home">
|
||||
{/* 首屏：3秒识别品牌 */}
|
||||
<section className="hero-home">
|
||||
<div className="container hero-home-inner">
|
||||
<div className="hero-copy">
|
||||
<p className="eyebrow">阿美巴 · 企业进化陪跑</p>
|
||||
<h1>
|
||||
让企业进化
|
||||
<br />
|
||||
被看见、被度量、被落地
|
||||
</h1>
|
||||
<p className="hero-desc">
|
||||
以“企业进化”为主线，以<strong>四大价值坐标</strong>与<strong> A/M/B 状态坐标</strong>为观察系，陪跑企业构建可复制、可持续的增长经营体系。
|
||||
<br />
|
||||
<span style={{ color: '#f59e0b' }}>一期为骨架与占位，不虚构业务数据。</span>
|
||||
</p>
|
||||
<div className="hero-actions">
|
||||
<Link to="/diagnosis" className="btn btn-primary">
|
||||
开始企业进化诊断
|
||||
</Link>
|
||||
<Link to="/contact" className="btn btn-secondary">
|
||||
咨询获取方案
|
||||
</Link>
|
||||
<Link to="/self-check" className="btn btn-ghost">
|
||||
轻量对照
|
||||
</Link>
|
||||
</div>
|
||||
<div className="hero-trust">
|
||||
<span>30秒理解主张：进化思想 → 价值坐标 → 状态坐标 → 行动路径</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-visual">
|
||||
<div className="visual-card">
|
||||
<div className="visual-title">企业进化摘要</div>
|
||||
<div className="visual-grid">
|
||||
<div>
|
||||
<strong>思想</strong>
|
||||
<p>进化是持续迭代，非一次性变革</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong>坐标</strong>
|
||||
<p>四大价值 × A/M/B 状态</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong>路径</strong>
|
||||
<p>诊断 → 机制 → 陪跑 → 复盘</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong>行动</strong>
|
||||
<p>轻量对照 / 深度陪跑</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/evolution" className="btn btn-ghost" style={{ width: '100%', marginTop: 16 }}>
|
||||
进入企业进化 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 摘要板块：阿美巴 */}
|
||||
<section className="section section-muted">
|
||||
<div className="container">
|
||||
<div className="section-heading">
|
||||
<p className="eyebrow">Ameba</p>
|
||||
<h2 className="h2">关于阿美巴</h2>
|
||||
<p className="desc">克制理性的企业服务风格，以方法与陪跑见长，非培训话术与AI噱头。</p>
|
||||
</div>
|
||||
<div className="card" style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<p className="desc" style={{ maxWidth: 640 }}>
|
||||
阿美巴以企业进化经营哲学为底色，结合中国中小企业实际，提供从诊断到落地陪跑的全链路服务。
|
||||
<br />
|
||||
<span className="placeholder" style={{ display: 'inline-block', marginTop: 8 }}>
|
||||
【占位｜待业务确认】品牌故事、创始团队、使命愿景等由知识母盘灌入。
|
||||
</span>
|
||||
</p>
|
||||
<Link to="/ameba" className="btn btn-secondary">
|
||||
了解阿美巴 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 摘要：企业进化（顺序预告） */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="section-heading">
|
||||
<p className="eyebrow">Enterprise Evolution</p>
|
||||
<h2 className="h2">企业进化 · 观察坐标</h2>
|
||||
<p className="desc">强制顺序：企业进化思想 → 四大价值坐标 → A/M/B 状态坐标。首页仅摘要，详情下沉二级页面。</p>
|
||||
</div>
|
||||
<div className="grid-3">
|
||||
{fourValues.slice(0, 3).map(v => (
|
||||
<div key={v.id} className="card">
|
||||
<h3>{v.name}</h3>
|
||||
<p>{v.summary}</p>
|
||||
<Link to={`/evolution/values/${v.key}`} className="btn btn-ghost" style={{ marginTop: 12, width: '100%' }}>
|
||||
查看价值详情
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
<Link to="/evolution" className="btn btn-primary">
|
||||
进入企业进化完整页
|
||||
</Link>
|
||||
<Link to="/evolution/amb/A" className="btn btn-ghost">
|
||||
查看 A/M/B 状态
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 摘要：方法与能力 */}
|
||||
<section className="section section-muted">
|
||||
<div className="container">
|
||||
<div className="section-heading">
|
||||
<p className="eyebrow">Methods & Capabilities</p>
|
||||
<h2 className="h2">方法与能力</h2>
|
||||
<p className="desc">方法 × 能力 × 工具，支撑进化落地。</p>
|
||||
</div>
|
||||
<div className="grid-2">
|
||||
<div className="card">
|
||||
<h3>诊断方法</h3>
|
||||
<p>访谈 + 数据 + 坐标映射，定位差距与根因。</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3>陪跑能力</h3>
|
||||
<p>机制共创、例会陪跑、复盘迭代，保障落地。</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/methods" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
查看方法与能力 →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 摘要：实践案例 */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="section-heading">
|
||||
<p className="eyebrow">Cases</p>
|
||||
<h2 className="h2">实践案例（占位）</h2>
|
||||
<p className="desc">固定叙事插槽：原状 → 目标 → 差距 → 根因 → 介入 → 路径 → 动作 → 结果 → 迭代。无虚构数据。</p>
|
||||
</div>
|
||||
<div className="grid-2">
|
||||
{cases.map(c => (
|
||||
<Link key={c.id} to={`/cases/${c.slug}`} className="card" style={{ display: 'block' }}>
|
||||
<h3>{c.title}</h3>
|
||||
<p>{c.summary}</p>
|
||||
<span style={{ fontSize: 12, color: '#0f6b5b', fontWeight: 700 }}>查看案例叙事 →</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Link to="/cases" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
全部案例 →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 摘要：产品服务 */}
|
||||
<section className="section section-muted">
|
||||
<div className="container">
|
||||
<div className="section-heading">
|
||||
<p className="eyebrow">Services</p>
|
||||
<h2 className="h2">产品服务 · 下一步行动</h2>
|
||||
<p className="desc">禁止电商商城逻辑；重心是“下一步如何行动”。标准产品预留价格，定制展示“咨询/获取方案”。</p>
|
||||
</div>
|
||||
<div className="grid-3">
|
||||
{services.map(s => (
|
||||
<div key={s.id} className="card">
|
||||
<h3>{s.title}</h3>
|
||||
<p>{s.summary}</p>
|
||||
{s.serviceType === 'standard' && s.price ? (
|
||||
<div style={{ marginTop: 10, fontWeight: 800, color: 'var(--primary)' }}>
|
||||
¥{s.price} <span style={{ fontWeight: 400, fontSize: 12 }}>{s.priceUnit}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ marginTop: 10, fontSize: 12, color: '#0f6b5b', fontWeight: 700 }}>咨询/获取方案</div>
|
||||
)}
|
||||
<Link to={`/services/${s.slug}`} className="btn btn-primary" style={{ marginTop: 12, width: '100%' }}>
|
||||
{s.ctaText} →
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 摘要：认知观察 */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="section-heading">
|
||||
<p className="eyebrow">Insights</p>
|
||||
<h2 className="h2">认知观察</h2>
|
||||
<p className="desc">围绕进化思想、价值坐标、A/M/B 的观察与思考。</p>
|
||||
</div>
|
||||
<div className="grid-2">
|
||||
{insights.map(i => (
|
||||
<Link key={i.id} to={`/insights/${i.slug}`} className="card" style={{ display: 'block' }}>
|
||||
<h3>{i.title}</h3>
|
||||
<p>{i.summary}</p>
|
||||
<span style={{ fontSize: 12, color: '#64748b' }}>{i.readingMinutes} 分钟阅读 · {i.author}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Link to="/insights" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
全部观察 →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 底部行动层 */}
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { INSIGHTS as FALLBACK_INSIGHTS } from '@/data/mock'
|
||||
import { useCMS, getCMSInsights } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function InsightDetail() {
|
||||
const { data: INSIGHTS } = useCMS(getCMSInsights, FALLBACK_INSIGHTS)
|
||||
const { slug } = useParams()
|
||||
const item = INSIGHTS.find(i => i.slug === slug)
|
||||
if (!item)
|
||||
return (
|
||||
<div className="container section">
|
||||
<div className="placeholder">未找到洞察：{slug}</div>
|
||||
<Link to="/insights" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
返回认知观察
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<div className="breadcrumb">
|
||||
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
首页
|
||||
</Link>{' '}
|
||||
/{' '}
|
||||
<Link to="/insights" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
认知观察
|
||||
</Link>{' '}
|
||||
/ 详情
|
||||
</div>
|
||||
<h1>{item.title}</h1>
|
||||
<p>{item.summary}</p>
|
||||
<p style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>
|
||||
{item.readingMinutes} 分钟 · {item.author} · {item.category}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<article className="card" style={{ maxWidth: 760 }}>
|
||||
{item.contentBlocks.map(b => (
|
||||
<div key={b.id} style={{ marginBottom: 16 }}>
|
||||
{b.type === 'heading' && <h3>{b.text}</h3>}
|
||||
{b.type === 'paragraph' && <p style={{ fontSize: 15, color: '#334155', lineHeight: 1.8 }}>{b.text}</p>}
|
||||
{b.type === 'list' && (
|
||||
<ul style={{ paddingLeft: 18, fontSize: 14, color: '#334155' }}>
|
||||
{b.items?.map(x => (
|
||||
<li key={x}>{x}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{b.type === 'placeholder' && <div className="placeholder">{b.placeholderNote}</div>}
|
||||
</div>
|
||||
))}
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位｜待业务确认】正文由 CMS 接管，编辑仅替换 contentBlocks，不改布局。
|
||||
</div>
|
||||
</article>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
|
||||
<Link to="/insights" className="btn btn-ghost">
|
||||
← 返回观察列表
|
||||
</Link>
|
||||
<Link to="/contact" className="btn btn-primary">
|
||||
咨询获取方案
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { INSIGHTS as FALLBACK_INSIGHTS } from '@/data/mock'
|
||||
import { useCMS, getCMSInsights } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function Insights() {
|
||||
const { data: INSIGHTS } = useCMS(getCMSInsights, FALLBACK_INSIGHTS)
|
||||
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>围绕企业进化、价值坐标、A/M/B 与方法论的持续观察与沉淀。</p>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位｜待业务确认】文章由知识母盘定稿后灌入，一期仅保留结构与占位。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid-2">
|
||||
{INSIGHTS.map(i => (
|
||||
<Link key={i.id} to={`/insights/${i.slug}`} className="card" style={{ display: 'block' }}>
|
||||
<div style={{ fontSize: 11, color: '#0f6b5b', fontWeight: 800, letterSpacing: '0.08em' }}>{i.category.toUpperCase()}</div>
|
||||
<h3 style={{ marginTop: 6 }}>{i.title}</h3>
|
||||
<p>{i.summary}</p>
|
||||
<div style={{ fontSize: 12, color: '#94a3b8', marginTop: 8 }}>
|
||||
{i.readingMinutes} 分钟 · {i.author} · 权重 {i.sortWeight}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { METHODS as FALLBACK_METHODS } from '@/data/mock'
|
||||
import { useCMS, getCMSMethods } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function MethodDetail() {
|
||||
const { data: METHODS } = useCMS(getCMSMethods, FALLBACK_METHODS)
|
||||
const { slug } = useParams()
|
||||
const item = METHODS.find(m => m.slug === slug)
|
||||
if (!item)
|
||||
return (
|
||||
<div className="container section">
|
||||
<div className="placeholder">未找到：{slug}</div>
|
||||
<Link to="/methods" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
返回方法与能力
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<div className="breadcrumb">
|
||||
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
首页
|
||||
</Link>{' '}
|
||||
/{' '}
|
||||
<Link to="/methods" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
方法与能力
|
||||
</Link>{' '}
|
||||
/ {item.title}
|
||||
</div>
|
||||
<h1>{item.title}</h1>
|
||||
<p>{item.summary}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="card">
|
||||
<h3>关键步骤</h3>
|
||||
<ol style={{ paddingLeft: 18, lineHeight: 2, fontSize: 14 }}>
|
||||
{item.steps?.map(s => (
|
||||
<li key={s}>{s}</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位｜待业务确认】完整方法阐述、工具清单、交付物清单待灌入。
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
|
||||
<Link to="/methods" className="btn btn-ghost">
|
||||
← 返回
|
||||
</Link>
|
||||
<Link to="/contact" className="btn btn-primary">
|
||||
咨询获取方案
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { METHODS as FALLBACK_METHODS } from '@/data/mock'
|
||||
import { useCMS, getCMSMethods } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function Methods() {
|
||||
const { data: METHODS } = useCMS(getCMSMethods, FALLBACK_METHODS)
|
||||
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>方法决定路径，能力决定落地。二者闭环，支撑企业进化。</p>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位｜待业务确认】方法论体系、工具、交付标准待知识母盘灌入。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid-2">
|
||||
{METHODS.map(m => (
|
||||
<Link key={m.id} to={`/methods/${m.slug}`} className="card" style={{ display: 'block' }}>
|
||||
<p className="eyebrow">{m.group === 'method' ? '方法' : '能力'}</p>
|
||||
<h3>{m.title}</h3>
|
||||
<p>{m.summary}</p>
|
||||
{m.steps && (
|
||||
<ol style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
|
||||
{m.steps.map(s => (
|
||||
<li key={s}>{s}</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
<span style={{ fontSize: 12, color: '#0f6b5b', fontWeight: 700, marginTop: 10, display: 'inline-block' }}>查看详情 →</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="container section" style={{ textAlign: 'center', maxWidth: 640 }}>
|
||||
<h1 style={{ fontSize: 48, color: '#163E70' }}>404</h1>
|
||||
<p style={{ color: '#64748b' }}>页面不存在或尚未发布。已为旧站 URL 配置 301 重定向，未匹配时落此页。</p>
|
||||
<div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginTop: 16, flexWrap: 'wrap' }}>
|
||||
<Link to="/" className="btn btn-primary">
|
||||
返回首页
|
||||
</Link>
|
||||
<Link to="/contact" className="btn btn-ghost">
|
||||
联系我们
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
type CheckItem = { id: string; question: string; dimension: string }
|
||||
|
||||
const CHECK_ITEMS: CheckItem[] = [
|
||||
{ id: 'q1', question: '战略方向在团队中是否清晰一致？', dimension: '战略价值' },
|
||||
{ id: 'q2', question: '组织协同是否顺畅、职责是否清晰？', dimension: '组织价值' },
|
||||
{ id: 'q3', question: '经营机制（目标/复盘/数据）是否闭环？', dimension: '经营价值' },
|
||||
{ id: 'q4', question: '团队是否具备经营意识与成长机制？', dimension: '人的价值' },
|
||||
]
|
||||
|
||||
export default function SelfCheck() {
|
||||
const [answers, setAnswers] = useState<Record<string, string>>({})
|
||||
const [showResult, setShowResult] = useState(false)
|
||||
|
||||
const set = (id: string, val: string) => setAnswers(prev => ({ ...prev, [id]: val }))
|
||||
|
||||
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>
|
||||
轻量自我对照工具，帮助你快速定位在四大价值 × A/M/B 的大致位置。
|
||||
<br />
|
||||
<strong style={{ color: '#fde68a' }}>一期禁止长问卷、复杂评分、自动诊断报告。</strong>仅做轻量对照，深度诊断需线下陪跑。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="section">
|
||||
<div className="container" style={{ maxWidth: 720 }}>
|
||||
<div className="card">
|
||||
<h3>轻量对照（4 题）</h3>
|
||||
<p style={{ fontSize: 13, color: '#64748b' }}>每题选择最贴近现状的选项，结果仅作自我对照参考，不生成诊断报告。</p>
|
||||
<div style={{ marginTop: 16, display: 'grid', gap: 16 }}>
|
||||
{CHECK_ITEMS.map(item => (
|
||||
<div key={item.id} style={{ border: '1px solid #e2e8f0', borderRadius: 10, padding: 16 }}>
|
||||
<div style={{ fontSize: 12, color: '#0f6b5b', fontWeight: 800 }}>{item.dimension}</div>
|
||||
<div style={{ fontWeight: 700, marginTop: 4 }}>{item.question}</div>
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
|
||||
{['A 较清晰/顺畅', 'M 部分卡点', 'B 待构建'].map(opt => (
|
||||
<label
|
||||
key={opt}
|
||||
style={{
|
||||
border: answers[item.id] === opt ? '1px solid #163E70' : '1px solid #e2e8f0',
|
||||
background: answers[item.id] === opt ? '#eff6ff' : '#fff',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 999,
|
||||
fontSize: 13,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<input type="radio" name={item.id} value={opt} checked={answers[item.id] === opt} onChange={() => set(item.id, opt)} style={{ marginRight: 6 }} />
|
||||
{opt}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="btn btn-primary" style={{ width: '100%', marginTop: 20 }} onClick={() => setShowResult(true)}>
|
||||
查看轻量对照结果
|
||||
</button>
|
||||
<p style={{ fontSize: 11, color: '#94a3b8', marginTop: 8, textAlign: 'center' }}>一期不做自动诊断报告，结果仅本地展示，不存储。</p>
|
||||
</div>
|
||||
|
||||
{showResult && (
|
||||
<div className="card" style={{ marginTop: 16, background: '#f8fafc' }}>
|
||||
<h3>对照结果（占位示意）</h3>
|
||||
<p style={{ fontSize: 13, color: '#475569' }}>
|
||||
基于你的选择，系统提示关注维度：
|
||||
<br />
|
||||
{Object.entries(answers)
|
||||
.map(([k, v]) => `${CHECK_ITEMS.find(i => i.id === k)?.dimension}：${v}`)
|
||||
.join('；') || '（请选择后再查看）'}
|
||||
</p>
|
||||
<div className="placeholder" style={{ marginTop: 10 }}>
|
||||
【占位｜一期不做复杂评分】此处仅为轻量对照提示，不生成诊断报告。深度诊断请预约陪跑。
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 10, marginTop: 12, flexWrap: 'wrap' }}>
|
||||
<Link to="/contact" className="btn btn-primary">
|
||||
预约深度诊断
|
||||
</Link>
|
||||
<Link to="/evolution" className="btn btn-ghost">
|
||||
了解进化坐标
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="placeholder" style={{ marginTop: 16 }}>
|
||||
快速路径：看看你的企业 → 轻量对照 → 预约咨询 / 深度路径：企业进化 → 四大价值 → A/M/B → 联系我们（全链路已打通）
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { SERVICES as FALLBACK_SERVICES } from '@/data/mock'
|
||||
import { useCMS, getCMSServices } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function ServiceDetail() {
|
||||
const { data: SERVICES } = useCMS(getCMSServices, FALLBACK_SERVICES)
|
||||
const { slug } = useParams()
|
||||
const s = SERVICES.find(x => x.slug === slug)
|
||||
if (!s)
|
||||
return (
|
||||
<div className="container section">
|
||||
<div className="placeholder">未找到服务：{slug}</div>
|
||||
<Link to="/services" className="btn btn-secondary" style={{ marginTop: 16 }}>
|
||||
返回产品服务
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<div className="breadcrumb">
|
||||
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
首页
|
||||
</Link>{' '}
|
||||
/{' '}
|
||||
<Link to="/services" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
||||
产品服务
|
||||
</Link>{' '}
|
||||
/ {s.title}
|
||||
</div>
|
||||
<h1>{s.title}</h1>
|
||||
<p>{s.summary}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="card">
|
||||
<h3>服务亮点</h3>
|
||||
<ul style={{ paddingLeft: 18, lineHeight: 2, fontSize: 14 }}>
|
||||
{s.highlights?.map(h => (
|
||||
<li key={h}>{h}</li>
|
||||
))}
|
||||
</ul>
|
||||
{s.serviceType === 'standard' ? (
|
||||
<div style={{ marginTop: 16, background: '#f1f5f9', padding: 16, borderRadius: 10 }}>
|
||||
<strong>标准产品价格</strong>
|
||||
<div style={{ fontSize: 22, fontWeight: 900, color: 'var(--primary)' }}>
|
||||
¥{s.price} <span style={{ fontSize: 13, fontWeight: 400 }}>{s.priceUnit}</span>
|
||||
</div>
|
||||
<p style={{ fontSize: 12, color: '#64748b' }}>{s.priceNote}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ marginTop: 16, background: '#ecfdf5', padding: 16, borderRadius: 10, color: '#065f46' }}>
|
||||
深度定制服务不展示价格，请 <Link to="/contact">咨询/获取方案</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位｜待业务确认】交付物、周期、适合对象、服务流程等待灌入。禁止购物车/库存逻辑。
|
||||
</div>
|
||||
<Link to="/contact" className="btn btn-primary" style={{ marginTop: 16, width: '100%' }}>
|
||||
{s.ctaText} →
|
||||
</Link>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
|
||||
<Link to="/services" className="btn btn-ghost">
|
||||
← 返回服务列表
|
||||
</Link>
|
||||
<Link to="/cases" className="btn btn-ghost">
|
||||
查看相关案例
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { SERVICES as FALLBACK_SERVICES } from '@/data/mock'
|
||||
import { useCMS, getCMSServices } from '@/services/cms'
|
||||
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
||||
|
||||
export default function Services() {
|
||||
const { data: SERVICES } = useCMS(getCMSServices, FALLBACK_SERVICES)
|
||||
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>
|
||||
禁止电商商城逻辑；重心是“下一步如何行动”，而非货品陈列。标准产品预留价格字段，深度定制展示「咨询/获取方案」。
|
||||
</p>
|
||||
<div className="placeholder" style={{ marginTop: 12 }}>
|
||||
【占位｜待业务确认】服务定价、交付清单、周期等需业务确认后灌入。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid-3">
|
||||
{SERVICES.map(s => (
|
||||
<div key={s.id} className="card" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: 11, letterSpacing: '0.08em', color: s.serviceType === 'standard' ? '#163E70' : '#0f6b5b', fontWeight: 800 }}>
|
||||
{s.serviceType === 'standard' ? '标准产品' : '深度定制'}
|
||||
</div>
|
||||
<h3 style={{ marginTop: 6 }}>{s.title}</h3>
|
||||
<p>{s.summary}</p>
|
||||
{s.highlights && (
|
||||
<ul style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
|
||||
{s.highlights.map(h => (
|
||||
<li key={h}>{h}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<div style={{ marginTop: 'auto', paddingTop: 16 }}>
|
||||
{s.serviceType === 'standard' && s.price ? (
|
||||
<div style={{ fontWeight: 900, color: 'var(--primary)', fontSize: 18 }}>
|
||||
¥{(s.price / 1000).toFixed(2)}k <span style={{ fontSize: 12, fontWeight: 400 }}>{s.priceUnit}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ fontSize: 13, color: '#0f6b5b', fontWeight: 700 }}>咨询/获取方案（无价格）</div>
|
||||
)}
|
||||
{s.priceNote && <div style={{ fontSize: 11, color: '#94a3b8' }}>{s.priceNote}</div>}
|
||||
<Link to={`/services/${s.slug}`} className="btn btn-primary" style={{ width: '100%', marginTop: 10 }}>
|
||||
{s.ctaText} →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GlobalCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user