manual save(2026-01-22 18:52)
This commit is contained in:
33
src/App.tsx
33
src/App.tsx
@@ -1,17 +1,38 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
|
||||
import { SiteLayout } from './components/SiteLayout'
|
||||
import { Home } from './pages/Home'
|
||||
import { PostDetail } from './pages/PostDetail'
|
||||
import { CategoriesPage } from './pages/Categories'
|
||||
import { CategoryDetail } from './pages/CategoryDetail'
|
||||
import { Why } from './pages/Why'
|
||||
import { How } from './pages/How'
|
||||
import { System } from './pages/System'
|
||||
import { Discovery } from './pages/Discovery'
|
||||
import { Solutions } from './pages/Solutions'
|
||||
import { Proof } from './pages/Proof'
|
||||
import { Contact } from './pages/Contact'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route element={<SiteLayout />}>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/posts/:slug" element={<PostDetail />} />
|
||||
<Route path="/categories" element={<CategoriesPage />} />
|
||||
<Route path="/categories/:slug" element={<CategoryDetail />} />
|
||||
<Route path="/why" element={<Why />} />
|
||||
<Route path="/how" element={<How />} />
|
||||
<Route path="/system" element={<System />} />
|
||||
<Route path="/discovery" element={<Discovery />} />
|
||||
<Route path="/solutions" element={<Solutions />} />
|
||||
<Route path="/proof" element={<Proof />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
|
||||
<Route
|
||||
path="*"
|
||||
element={
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<h1 className="text-2xl font-semibold text-gray-900">页面不存在</h1>
|
||||
<p className="text-gray-600 mt-2">请通过顶部导航回到主线内容。</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
)
|
||||
|
||||
46
src/components/SectionShell.tsx
Normal file
46
src/components/SectionShell.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import React from 'react'
|
||||
|
||||
type HeadingTag = 'h1' | 'h2'
|
||||
|
||||
export type SectionShellProps = {
|
||||
sectionKey: string
|
||||
title: string
|
||||
lead?: string
|
||||
headingAs?: HeadingTag
|
||||
notes?: string[]
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
export const SectionShell: React.FC<SectionShellProps> = ({
|
||||
sectionKey,
|
||||
title,
|
||||
lead,
|
||||
headingAs = 'h2',
|
||||
notes,
|
||||
children,
|
||||
}) => {
|
||||
const Heading = headingAs
|
||||
|
||||
return (
|
||||
<section aria-labelledby={sectionKey} className="py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl">
|
||||
<Heading id={sectionKey} className="text-2xl font-semibold text-gray-900 tracking-tight">
|
||||
{title}
|
||||
</Heading>
|
||||
{lead ? <p className="mt-3 text-gray-600 leading-relaxed">{lead}</p> : null}
|
||||
|
||||
{notes?.length ? (
|
||||
<ul className="mt-5 space-y-1 text-sm text-gray-500 list-disc pl-5">
|
||||
{notes.map((note) => (
|
||||
<li key={note}>{note}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
{children ? <div className="mt-6">{children}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
17
src/components/SiteLayout.tsx
Normal file
17
src/components/SiteLayout.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react'
|
||||
import { Outlet, ScrollRestoration } from 'react-router-dom'
|
||||
import { Header } from './Header'
|
||||
import { Footer } from './Footer'
|
||||
|
||||
export const SiteLayout: React.FC = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-gray-900">
|
||||
<Header />
|
||||
<main id="main" className="bg-gray-50">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
<ScrollRestoration />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
109
src/pages/Contact.tsx
Normal file
109
src/pages/Contact.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const ConversationInvite: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="ConversationInvite"
|
||||
title="ConversationInvite|邀请式文案"
|
||||
lead="提供低压力下一步:先对齐问题与边界,再决定是否合作。"
|
||||
headingAs="h1"
|
||||
notes={['边界:不制造紧迫感,不做硬销售', '输出:会谈目标与准备材料清单']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const ContactForm: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="ContactForm"
|
||||
title="ContactForm|基础表单"
|
||||
lead="最小字段:姓名/公司/角色/邮箱/你正在面对的决策问题。"
|
||||
notes={['工程:前端先做静态表单,后续接入表单服务或自建 API', '合规:隐私声明与数据用途说明']}
|
||||
>
|
||||
<form className="grid gap-4 mt-6" onSubmit={(e) => e.preventDefault()} aria-label="联系表单">
|
||||
<div className="grid gap-1">
|
||||
<label className="text-sm text-gray-700" htmlFor="name">
|
||||
姓名
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
className="h-11 px-3 rounded-md border border-gray-300 bg-white"
|
||||
autoComplete="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<label className="text-sm text-gray-700" htmlFor="company">
|
||||
公司
|
||||
</label>
|
||||
<input id="company" name="company" className="h-11 px-3 rounded-md border border-gray-300 bg-white" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<label className="text-sm text-gray-700" htmlFor="role">
|
||||
角色
|
||||
</label>
|
||||
<input id="role" name="role" className="h-11 px-3 rounded-md border border-gray-300 bg-white" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<label className="text-sm text-gray-700" htmlFor="email">
|
||||
邮箱
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
className="h-11 px-3 rounded-md border border-gray-300 bg-white"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<label className="text-sm text-gray-700" htmlFor="message">
|
||||
你正在面对的决策问题
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows={5}
|
||||
className="px-3 py-2 rounded-md border border-gray-300 bg-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="h-11 px-4 rounded-md bg-gray-900 text-white text-sm font-medium hover:bg-gray-800"
|
||||
>
|
||||
提交(占位)
|
||||
</button>
|
||||
<p className="text-xs text-gray-500">V1 先占位,后续接入表单服务。</p>
|
||||
</div>
|
||||
</form>
|
||||
</SectionShell>
|
||||
)
|
||||
}
|
||||
|
||||
const AlternativeCTA: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="AlternativeCTA"
|
||||
title="AlternativeCTA|其他沟通方式"
|
||||
lead="提供替代入口:邮件、引荐、日程链接(后续再填)。"
|
||||
notes={['边界:给选择,不强迫用户留资', '可扩展:日程工具/企业微信/加密附件入口']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const Contact: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<ConversationInvite />
|
||||
<ContactForm />
|
||||
<AlternativeCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
src/pages/Discovery.tsx
Normal file
58
src/pages/Discovery.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const DiscoveryPositioning: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="DiscoveryPositioning"
|
||||
title="DiscoveryPositioning|定位说明"
|
||||
lead="Discovery 是内容系统入口,不是博客:承载思想、框架与决策输入。"
|
||||
headingAs="h1"
|
||||
notes={['边界:内容系统定位与使用方式', '约束:不扩展成传统 Blog 导航']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const ContentTypes: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="ContentTypes"
|
||||
title="ContentTypes|内容类型入口"
|
||||
lead="为后续内容建模预留入口,例如:框架、洞察、清单、案例、方法。"
|
||||
notes={['标签:国家 / 行业 / PSTEL', '可扩展:A/B 入口样式实验']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const LatestInsights: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="LatestInsights"
|
||||
title="LatestInsights|最新内容流"
|
||||
lead="展示最新洞察流(后续可接 MDX / Headless CMS)。"
|
||||
notes={['边界:内容流组件,不做“按时间归档”的博客结构', '可扩展:过滤器与推荐算法']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const DecisionValue: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="DecisionValue"
|
||||
title="DecisionValue|内容如何用于决策"
|
||||
lead="说明内容如何进入决策流程:提出问题、形成假设、验证、沉淀。"
|
||||
notes={['边界:决策链路说明', '输出:内容到行动的映射方式']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const Discovery: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<DiscoveryPositioning />
|
||||
<ContentTypes />
|
||||
<LatestInsights />
|
||||
<DecisionValue />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,48 +1,122 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Header } from '../components/Header'
|
||||
import { Footer } from '../components/Footer'
|
||||
import { PostCard } from '../components/PostCard'
|
||||
import { PostCardSkeleton } from '../components/PostCardSkeleton'
|
||||
import { Posts } from '../clientsdk/sdk.gen'
|
||||
import { createClient } from '../clientsdk/client'
|
||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
||||
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: API_URL,
|
||||
querySerializer: customQuerySerializer,
|
||||
headers: {
|
||||
'X-Tenant-Slug': TENANT_SLUG,
|
||||
'X-API-Key': TENANT_API_KEY,
|
||||
},
|
||||
})
|
||||
const HeroWorldView: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="HeroWorldView"
|
||||
title="HeroWorldView|世界观判断"
|
||||
headingAs="h1"
|
||||
lead="一个思想驱动型官网的开场:先定义全球化决策的世界观与判断框架。"
|
||||
notes={['边界:世界观与主张,不展示产品 UI', '连接:引出决策不可控的问题']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const DecisionProblem: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="DecisionProblem"
|
||||
title="DecisionProblem|决策不可控"
|
||||
lead="说明决策在信息噪音、约束冲突与时间压力下为何不可控。"
|
||||
notes={['边界:问题机制与代价', '输出:决策痛点的共同语言']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const CoreThesis: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="CoreThesis"
|
||||
title="CoreThesis|反常识观点"
|
||||
lead="用一句核心论断把读者拉到同一认知:合规与增长是同一件事的两面。"
|
||||
notes={['边界:只讲主张与论证线索', '可扩展:对比式表达与关键证据']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const Methodology: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="Methodology"
|
||||
title="Methodology|方法论来源"
|
||||
lead="交代方法论来自哪些实践与验证路径,为 How 页面做铺垫。"
|
||||
notes={['边界:来源与原则', '连接:跳转到 How']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const SystemOverview: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="SystemOverview"
|
||||
title="SystemOverview|系统级解法"
|
||||
lead="用系统视角解释:不是功能堆叠,而是可复用的决策-执行系统。"
|
||||
notes={['边界:系统全景,不拆到模块细节', '连接:跳转到 System']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const DiscoveryIntro: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="DiscoveryIntro"
|
||||
title="DiscoveryIntro|决策雷达"
|
||||
lead="Discovery 作为持续的决策输入:思想、框架与证据的入口。"
|
||||
notes={['边界:内容入口,不做博客化归档', '连接:跳转到 Discovery']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const MeasurableOutcome: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="MeasurableOutcome"
|
||||
title="MeasurableOutcome|可度量结果"
|
||||
lead="强调可验证:输出物、指标、复盘机制,而非宏大叙事。"
|
||||
notes={['边界:指标与结果类型,不披露敏感数据', '可扩展:指标卡片/结果对照']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const TrustProof: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="TrustProof"
|
||||
title="TrustProof|权威背书"
|
||||
lead="放置信任材料:客户类型、合作方式、第三方背书(占位)。"
|
||||
notes={['边界:信任材料分类与呈现方式', '连接:跳转到 Proof']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const SoftCTA: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="SoftCTA"
|
||||
title="SoftCTA|行动入口"
|
||||
lead="提供低压力行动入口:先对齐问题,再进入下一步。"
|
||||
notes={['边界:弱 CTA,避免硬销售', '连接:跳转到 Contact']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const Home: React.FC = () => {
|
||||
const [posts, setPosts] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
return (
|
||||
<div>
|
||||
<HeroWorldView />
|
||||
<DecisionProblem />
|
||||
<CoreThesis />
|
||||
<Methodology />
|
||||
<SystemOverview />
|
||||
<DiscoveryIntro />
|
||||
<MeasurableOutcome />
|
||||
<TrustProof />
|
||||
<SoftCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const response = await Posts.listPosts({
|
||||
client,
|
||||
query: {
|
||||
limit: 10,
|
||||
sort: '-createdAt',
|
||||
},
|
||||
})
|
||||
|
||||
setPosts((response as any)?.data?.docs || [])
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
console.error('获取文章失败:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPosts()
|
||||
|
||||
70
src/pages/How.tsx
Normal file
70
src/pages/How.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const MethodologyOrigin: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="MethodologyOrigin"
|
||||
title="MethodologyOrigin|方法论来源"
|
||||
lead="交代方法论从哪里来、如何被验证(研究、实战、合规场景)。"
|
||||
headingAs="h1"
|
||||
notes={['边界:原则与来源,不展开产品模块', '可扩展:引用研究/白皮书/框架图']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const ComplianceAsGrowth: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="ComplianceAsGrowth"
|
||||
title="ComplianceAsGrowth|核心思想"
|
||||
lead="合规不是约束,而是增长的结构性机会(关键论点)。"
|
||||
notes={['边界:讲“思想”,不讲功能清单', '输出:可复述的一句话核心主张']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const WhyAgentSystem: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="WhyAgentSystem"
|
||||
title="WhyAgentSystem|为什么是 Agent"
|
||||
lead="解释为什么需要 Agent 协作体系来处理信息密度、约束冲突与执行闭环。"
|
||||
notes={['边界:概念与机制,不落具体实现细节', '可扩展:Agent 角色/协作图']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const ExecutionModel: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="ExecutionModel"
|
||||
title="ExecutionModel|执行模式(OaaS)"
|
||||
lead="说明交付方式:以结果为导向的持续执行与复盘(Operation as a Service)。"
|
||||
notes={['边界:交付模型与节奏', '输出:典型周期/输入输出定义']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const Boundary: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="Boundary"
|
||||
title="Boundary|适用边界说明"
|
||||
lead="明确适用与不适用场景,避免用户误解与过度承诺。"
|
||||
notes={['边界:风险提示与前置条件', '可扩展:FAQ / 反例清单']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const How: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<MethodologyOrigin />
|
||||
<ComplianceAsGrowth />
|
||||
<WhyAgentSystem />
|
||||
<ExecutionModel />
|
||||
<Boundary />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
src/pages/Proof.tsx
Normal file
58
src/pages/Proof.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const ProofPhilosophy: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="ProofPhilosophy"
|
||||
title="ProofPhilosophy|为什么强调复杂场景"
|
||||
lead="解释为什么用复杂场景证明能力:约束越多,越能体现系统性。"
|
||||
headingAs="h1"
|
||||
notes={['边界:证据策略与选择原则', '可扩展:评价维度(风险/合规/执行)']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const GovernmentCases: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="GovernmentCases"
|
||||
title="GovernmentCases|政府级案例"
|
||||
lead="案例骨架:背景、约束、方法、输出物、结果(不必公开敏感信息)。"
|
||||
notes={['边界:可以匿名化', '可扩展:可验证指标与第三方背书']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const EnterpriseCases: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="EnterpriseCases"
|
||||
title="EnterpriseCases|企业级案例"
|
||||
lead="案例骨架:从决策问题到执行闭环,突出可复制方法。"
|
||||
notes={['边界:聚焦“决策到行动”', '可扩展:行业标签与相似案例推荐']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const CapabilitySummary: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="CapabilitySummary"
|
||||
title="CapabilitySummary|能力总结"
|
||||
lead="把能力总结为少量可验证的结论与指标,作为信任收口。"
|
||||
notes={['边界:结论式表达,避免泛泛而谈', '连接:引导到 Contact 进行下一步']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const Proof: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<ProofPhilosophy />
|
||||
<GovernmentCases />
|
||||
<EnterpriseCases />
|
||||
<CapabilitySummary />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
src/pages/Solutions.tsx
Normal file
58
src/pages/Solutions.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const IndustryLogic: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="IndustryLogic"
|
||||
title="IndustryLogic|为什么按行业拆"
|
||||
lead="用行业差异来帮助用户判断适配性(而不是堆行业 Logo)。"
|
||||
headingAs="h1"
|
||||
notes={['边界:行业维度的决策变量', '输出:行业拆分的原则']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const IndustryList: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="IndustryList"
|
||||
title="IndustryList|行业卡片列表"
|
||||
lead="卡片入口:每个行业一张卡(后续可用路由或折叠展开)。"
|
||||
notes={['边界:只做入口与概览', '可扩展:卡片字段(风险/机会/约束/输出物)']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const IndustryTemplate: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="IndustryTemplate"
|
||||
title="IndustryTemplate|单行业展开模板"
|
||||
lead="定义单行业内容模板:问题、约束、指标、交付物、典型路径。"
|
||||
notes={['边界:模板结构,不写具体行业内容', '可扩展:动态路由 /solutions/:industry']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const FitCriteria: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="FitCriteria"
|
||||
title="FitCriteria|适配与不适配说明"
|
||||
lead="明确哪些组织/阶段/目标适配,哪些不适配,降低沟通成本。"
|
||||
notes={['边界:准入条件与排除条件', '输出:自检清单']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const Solutions: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<IndustryLogic />
|
||||
<IndustryList />
|
||||
<IndustryTemplate />
|
||||
<FitCriteria />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
70
src/pages/System.tsx
Normal file
70
src/pages/System.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const SystemMap: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="SystemMap"
|
||||
title="SystemMap|全局系统图"
|
||||
lead="展示系统全景与各模块关系(不是功能列表)。"
|
||||
headingAs="h1"
|
||||
notes={['边界:架构视角,只展示系统层级', '可扩展:系统地图插画/图表']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const GComply: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="GComply"
|
||||
title="GComply|合规系统模块"
|
||||
lead="说明合规模块解决的决策问题、输入输出与可验证性。"
|
||||
notes={['边界:模块职责与接口,不展开 UI/功能按钮', '可扩展:能力清单与样例']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const GGrowth: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="GGrowth"
|
||||
title="GGrowth|增长系统模块"
|
||||
lead="说明增长模块如何在约束下形成可执行策略与行动路径。"
|
||||
notes={['边界:模块职责与协作关系', '可扩展:策略模板/输出物示例']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const GBrain: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="GBrain"
|
||||
title="GBrain|Agent 协同层"
|
||||
lead="描述 Agent 协作层如何把问题拆解、对齐约束、形成闭环。"
|
||||
notes={['边界:协作机制与责任边界', '可扩展:Agent 角色矩阵']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const DiscoveryModule: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="DiscoveryModule"
|
||||
title="DiscoveryModule|决策入口模块"
|
||||
lead="说明 Discovery 如何作为持续输入与决策入口,连接思想与执行。"
|
||||
notes={['边界:入口定义与信息组织方式', '连接:跳转到 Discovery 页面']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const System: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<SystemMap />
|
||||
<GComply />
|
||||
<GGrowth />
|
||||
<GBrain />
|
||||
<DiscoveryModule />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
src/pages/Why.tsx
Normal file
58
src/pages/Why.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from 'react'
|
||||
import { SectionShell } from '../components/SectionShell'
|
||||
|
||||
const GlobalContext: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="GlobalContext"
|
||||
title="GlobalContext|全球环境变化"
|
||||
lead="描述外部环境变化与不确定性来源(不讲产品)。"
|
||||
headingAs="h1"
|
||||
notes={['边界:宏观趋势与约束条件', '产出:问题空间的共同前提']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const RealDecisionFear: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="RealDecisionFear"
|
||||
title="RealDecisionFear|决策者真实焦虑"
|
||||
lead="把 CEO/决策者的担忧说清楚(成本、声誉、合规、战略窗口期)。"
|
||||
notes={['边界:真实决策压力,不做解决方案承诺', '输入:访谈语料/一线案例']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const FalseSolutions: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="FalseSolutions"
|
||||
title="FalseSolutions|传统解法失效"
|
||||
lead="说明传统咨询、工具堆叠、碎片化数据为什么不足以支撑全球化决策。"
|
||||
notes={['边界:只讲失效机制,不做竞品对比表', '输出:为什么需要系统级解法']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const ProblemReframe: React.FC = () => {
|
||||
return (
|
||||
<SectionShell
|
||||
sectionKey="ProblemReframe"
|
||||
title="ProblemReframe|问题重定义"
|
||||
lead="把问题从“信息不足”重定义为“决策不可控/不可验证”,为后续 How 与 System 铺垫。"
|
||||
notes={['边界:提出新框架/新语言', '连接:从 Why 过渡到 How']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const Why: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<GlobalContext />
|
||||
<RealDecisionFear />
|
||||
<FalseSolutions />
|
||||
<ProblemReframe />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user