65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { useParams, Link } from 'react-router-dom'
|
|
import { METHODS as FALLBACK_METHODS } from '@/data/mock'
|
|
import { useCMS, useCMSTexts, getCMSMethods } from '@/services/cms'
|
|
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
|
|
|
export default function MethodDetail() {
|
|
const { data: METHODS } = useCMS(getCMSMethods, FALLBACK_METHODS)
|
|
const { data: texts } = useCMSTexts()
|
|
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 }}>
|
|
{texts['methods.detail_note'] || '完整方法阐述、工具清单和交付物清单请在后台维护。'}
|
|
</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>
|
|
)
|
|
}
|