|
|
@@ -0,0 +1,422 @@
|
|
|
+import { useState } from 'react';
|
|
|
+
|
|
|
+type FilterType = 'all' | 'report' | 'article' | 'paper' | 'paid';
|
|
|
+
|
|
|
+interface ReportItem {
|
|
|
+ type: 'report' | 'article' | 'paper';
|
|
|
+ fee: 'free' | 'paid' | 'vip';
|
|
|
+ tag: string;
|
|
|
+ tagClass: 'free' | 'paid' | 'vip';
|
|
|
+ date: string;
|
|
|
+ title: string;
|
|
|
+ desc: string;
|
|
|
+ views: string;
|
|
|
+ length: string;
|
|
|
+ author: string;
|
|
|
+ free?: boolean;
|
|
|
+ price: string;
|
|
|
+ priceUnit?: string;
|
|
|
+ orderName: string;
|
|
|
+ orderPrice?: number;
|
|
|
+ action: 'buy' | 'read';
|
|
|
+ actionLabel: string;
|
|
|
+ outline?: boolean;
|
|
|
+}
|
|
|
+
|
|
|
+const reports: ReportItem[] = [
|
|
|
+ {
|
|
|
+ type: 'report',
|
|
|
+ fee: 'paid',
|
|
|
+ tag: '付费报告',
|
|
|
+ tagClass: 'paid',
|
|
|
+ date: '2025-08',
|
|
|
+ title: '2025 企业级大模型 Token 消耗与成本优化研究报告',
|
|
|
+ desc: '调研 200+ 企业 Token 消耗现状，拆解调用链路浪费点，给出缓存、压缩、路由三位一体的降本路径，平均可降低 Token 成本 40%。',
|
|
|
+ views: '👁 3.2k 阅读量',
|
|
|
+ length: '📑 86 页',
|
|
|
+ author: '研究团队',
|
|
|
+ price: '¥299',
|
|
|
+ priceUnit: ' / 份',
|
|
|
+ orderName: '2025 企业级大模型 Token 消耗与成本优化研究报告',
|
|
|
+ orderPrice: 299,
|
|
|
+ action: 'buy',
|
|
|
+ actionLabel: '立即购买',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'paper',
|
|
|
+ fee: 'paid',
|
|
|
+ tag: '付费白皮书',
|
|
|
+ tagClass: 'paid',
|
|
|
+ date: '2025-07',
|
|
|
+ title: 'Token 经济学白皮书：从计费模型到企业成本治理',
|
|
|
+ desc: '系统梳理国内外主流大模型 Token 定价机制，构建企业级 Token 成本核算与预算治理框架，附 12 个行业落地案例。',
|
|
|
+ views: '👁 2.8k 阅读量',
|
|
|
+ length: '📑 132 页',
|
|
|
+ author: '首席经济学家',
|
|
|
+ price: '¥499',
|
|
|
+ priceUnit: ' / 份',
|
|
|
+ orderName: 'Token 经济学白皮书',
|
|
|
+ orderPrice: 499,
|
|
|
+ action: 'buy',
|
|
|
+ actionLabel: '立即购买',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'report',
|
|
|
+ fee: 'free',
|
|
|
+ tag: '免费报告',
|
|
|
+ tagClass: 'free',
|
|
|
+ date: '2025-08',
|
|
|
+ title: '电力行业大模型 Token 调用基准测试报告',
|
|
|
+ desc: '基于配网运维真实场景，对主流模型在中文电力语料下的 Token 效率、时延与准确率进行横评，公开全部测试方法与数据。',
|
|
|
+ views: '👁 5.6k 阅读量',
|
|
|
+ length: '📑 54 页',
|
|
|
+ author: '光明电力大模型团队',
|
|
|
+ free: true,
|
|
|
+ price: '免费',
|
|
|
+ orderName: '电力行业大模型 Token 调用基准测试报告',
|
|
|
+ action: 'read',
|
|
|
+ actionLabel: '阅读全文',
|
|
|
+ outline: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'article',
|
|
|
+ fee: 'free',
|
|
|
+ tag: '免费文章',
|
|
|
+ tagClass: 'free',
|
|
|
+ date: '2025-08',
|
|
|
+ title: 'MCP 协议与 Skills 组件的 Token 效率实践',
|
|
|
+ desc: '解析自研 MCP 调度协议如何通过技能复用减少重复上下文注入，实测智能体编排场景下 Token 节省率达 35%。',
|
|
|
+ views: '👁 4.1k 阅读量',
|
|
|
+ length: '⏱ 12 分钟',
|
|
|
+ author: '平台架构组',
|
|
|
+ free: true,
|
|
|
+ price: '免费',
|
|
|
+ orderName: 'MCP 协议与 Skills 组件的 Token 效率实践',
|
|
|
+ action: 'read',
|
|
|
+ actionLabel: '阅读全文',
|
|
|
+ outline: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'article',
|
|
|
+ fee: 'free',
|
|
|
+ tag: '免费文章',
|
|
|
+ tagClass: 'free',
|
|
|
+ date: '2025-07',
|
|
|
+ title: '长上下文时代的"Token 墙"：上下文窗口技术演进',
|
|
|
+ desc: '从稀疏注意力到 KV 缓存压缩，一文讲清长上下文模型的 Token 承载边界与工程取舍。',
|
|
|
+ views: '👁 6.3k 阅读量',
|
|
|
+ length: '⏱ 15 分钟',
|
|
|
+ author: '大模型算法组',
|
|
|
+ free: true,
|
|
|
+ price: '免费',
|
|
|
+ orderName: '长上下文时代的 Token 墙',
|
|
|
+ action: 'read',
|
|
|
+ actionLabel: '阅读全文',
|
|
|
+ outline: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'report',
|
|
|
+ fee: 'vip',
|
|
|
+ tag: '会员专享',
|
|
|
+ tagClass: 'vip',
|
|
|
+ date: '2025-08',
|
|
|
+ title: '企业 Token 池化管理与多模型路由策略研究',
|
|
|
+ desc: '提出 Token 池统一计量、配额与智能路由方案，支持按任务难度自动匹配模型档位，实现"好钢用在刀刃上"。',
|
|
|
+ views: '👁 1.9k 阅读量',
|
|
|
+ length: '📑 68 页',
|
|
|
+ author: '解决方案中心',
|
|
|
+ price: '会员免费',
|
|
|
+ priceUnit: ' / ¥1,999 每年',
|
|
|
+ orderName: '会员订阅（解锁全部专享内容）',
|
|
|
+ orderPrice: 1999,
|
|
|
+ action: 'buy',
|
|
|
+ actionLabel: '开通会员',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'article',
|
|
|
+ fee: 'free',
|
|
|
+ tag: '免费文章',
|
|
|
+ tagClass: 'free',
|
|
|
+ date: '2025-07',
|
|
|
+ title: '大模型 API 定价追踪季报（2025 Q3）',
|
|
|
+ desc: '跟踪 10+ 家主流模型厂商输入/输出 Token 单价变动、免费额度与阶梯折扣政策，附比价工具使用指南。',
|
|
|
+ views: '👁 3.7k 阅读量',
|
|
|
+ length: '⏱ 8 分钟',
|
|
|
+ author: '市场研究组',
|
|
|
+ free: true,
|
|
|
+ price: '免费',
|
|
|
+ orderName: '大模型 API 定价追踪季报 2025 Q3',
|
|
|
+ action: 'read',
|
|
|
+ actionLabel: '阅读全文',
|
|
|
+ outline: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'report',
|
|
|
+ fee: 'paid',
|
|
|
+ tag: '付费报告',
|
|
|
+ tagClass: 'paid',
|
|
|
+ date: '2025-06',
|
|
|
+ title: 'RAG vs 长上下文：Token 成本与效果权衡研究',
|
|
|
+ desc: '在 6 类企业知识场景下对比两种技术路线的 Token 开销、召回质量与响应时延，给出分场景选型决策树。',
|
|
|
+ views: '👁 2.2k 阅读量',
|
|
|
+ length: '📑 45 页',
|
|
|
+ author: '数据智能实验室',
|
|
|
+ price: '¥199',
|
|
|
+ priceUnit: ' / 份',
|
|
|
+ orderName: 'RAG vs 长上下文研究报告',
|
|
|
+ orderPrice: 199,
|
|
|
+ action: 'buy',
|
|
|
+ actionLabel: '立即购买',
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const filters: { key: FilterType; label: string }[] = [
|
|
|
+ { key: 'all', label: '全部' },
|
|
|
+ { key: 'report', label: '研究报告' },
|
|
|
+ { key: 'article', label: '行业文章' },
|
|
|
+ { key: 'paper', label: '白皮书' },
|
|
|
+ { key: 'paid', label: '付费专区' },
|
|
|
+];
|
|
|
+
|
|
|
+const tagStyles: Record<'free' | 'paid' | 'vip', string> = {
|
|
|
+ free: 'bg-[rgba(16,185,129,.12)] text-[#0d9668]',
|
|
|
+ paid: 'bg-[rgba(249,115,22,.12)] text-[#ea580c]',
|
|
|
+ vip: 'bg-[rgba(139,92,246,.12)] text-[#7c3aed]',
|
|
|
+};
|
|
|
+
|
|
|
+interface Tier {
|
|
|
+ name: string;
|
|
|
+ price: string;
|
|
|
+ unit: string;
|
|
|
+ features: string[];
|
|
|
+ hot?: boolean;
|
|
|
+}
|
|
|
+
|
|
|
+const tiers: Tier[] = [
|
|
|
+ {
|
|
|
+ name: 'Token 成本诊断咨询',
|
|
|
+ price: '¥5,000',
|
|
|
+ unit: ' / 次',
|
|
|
+ features: [
|
|
|
+ '2 小时专家一对一线上沟通',
|
|
|
+ 'Token 消耗链路全景诊断',
|
|
|
+ '浪费点定位与快速优化清单',
|
|
|
+ '7 天内出具诊断报告',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '企业 Token 治理体系搭建',
|
|
|
+ price: '¥30,000',
|
|
|
+ unit: ' / 项目',
|
|
|
+ hot: true,
|
|
|
+ features: [
|
|
|
+ 'Token 计量、配额、预算全流程体系设计',
|
|
|
+ '多模型智能路由与降级策略落地',
|
|
|
+ '提示词与缓存优化工程实施',
|
|
|
+ '30 天驻场/远程陪跑支持',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '年度 AI 成本顾问',
|
|
|
+ price: '¥100,000',
|
|
|
+ unit: ' / 年',
|
|
|
+ features: [
|
|
|
+ '专属顾问团队全年服务',
|
|
|
+ '季度 Token 成本审计与优化报告',
|
|
|
+ '模型选型与定价谈判支持',
|
|
|
+ '全部付费报告与白皮书免费畅读',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const stats = [
|
|
|
+ { value: '120+', label: '研究报告与文章' },
|
|
|
+ { value: '20+', label: '覆盖行业' },
|
|
|
+ { value: '15+', label: '领域专家' },
|
|
|
+ { value: '每周', label: '内容更新' },
|
|
|
+];
|
|
|
+
|
|
|
+function buy(name: string, price?: number) {
|
|
|
+ window.alert(
|
|
|
+ `订单确认\n\n商品：${name}\n金额：¥${price?.toLocaleString()}\n\n请扫码或联系商务完成支付（此处可对接支付系统）。`
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+function read(name: string) {
|
|
|
+ window.alert(`《${name}》即将开放全文阅读（此处可对接文档系统）。`);
|
|
|
+}
|
|
|
+
|
|
|
+export function Research() {
|
|
|
+ const [filter, setFilter] = useState<FilterType>('all');
|
|
|
+
|
|
|
+ const visibleReports = reports.filter(
|
|
|
+ (r) => filter === 'all' || r.type === filter || (filter === 'paid' && r.fee !== 'free')
|
|
|
+ );
|
|
|
+
|
|
|
+ return (
|
|
|
+ <main className="pt-16 md:pt-20">
|
|
|
+ {/* Hero */}
|
|
|
+ <section className="py-20 md:py-[80px] text-center bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(79,140,255,.09),transparent)]">
|
|
|
+ <div className="container mx-auto px-4 md:px-6">
|
|
|
+ <h1 className="text-3xl md:text-[42px] font-bold mb-4 text-[#1a2333]">
|
|
|
+ 研究和学习{' '}
|
|
|
+ <span className="bg-gradient-to-r from-[#4f8cff] to-[#a06bff] bg-clip-text text-transparent">
|
|
|
+ · Token 领域知识库
|
|
|
+ </span>
|
|
|
+ </h1>
|
|
|
+ <p className="text-[#64748b] text-[15px] md:text-[17px] max-w-[640px] mx-auto">
|
|
|
+ 汇聚行业研究报告、深度文章与专家咨询，助力企业 Token 资产精细化管理。
|
|
|
+ </p>
|
|
|
+ <div className="flex justify-center gap-8 md:gap-14 mt-12 flex-wrap">
|
|
|
+ {stats.map((s) => (
|
|
|
+ <div key={s.label}>
|
|
|
+ <b className="text-[26px] md:text-[32px] text-[#2f6bff] block">{s.value}</b>
|
|
|
+ <span className="text-[#64748b] text-sm">{s.label}</span>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* 筛选 + 报告卡片 */}
|
|
|
+ <div className="container mx-auto px-4 md:px-6">
|
|
|
+ <div className="flex gap-3 justify-center my-9 md:my-14 flex-wrap">
|
|
|
+ {filters.map((f) => (
|
|
|
+ <button
|
|
|
+ key={f.key}
|
|
|
+ onClick={() => setFilter(f.key)}
|
|
|
+ className={`px-[22px] py-2 rounded-[20px] text-sm cursor-pointer transition-all ${
|
|
|
+ filter === f.key
|
|
|
+ ? 'bg-gradient-to-r from-[#4f8cff] to-[#a06bff] text-white'
|
|
|
+ : 'border border-black/14 bg-transparent text-[#64748b] hover:border-[#4f8cff] hover:text-[#1a2333]'
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ {f.label}
|
|
|
+ </button>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(340px,1fr))] gap-6 pb-10">
|
|
|
+ {visibleReports.map((r) => (
|
|
|
+ <div
|
|
|
+ key={r.title}
|
|
|
+ className="bg-white border border-[#e5e9f2] rounded-[14px] p-[26px] flex flex-col transition-all duration-300 shadow-[0_1px_3px_rgba(16,24,40,.04)] hover:-translate-y-1 hover:border-[rgba(79,140,255,.45)] hover:shadow-[0_12px_32px_rgba(79,140,255,.13)]"
|
|
|
+ >
|
|
|
+ <div className="flex justify-between items-center mb-[14px]">
|
|
|
+ <span className={`text-xs px-2.5 py-[3px] rounded-[12px] ${tagStyles[r.tagClass]}`}>{r.tag}</span>
|
|
|
+ <span className="text-xs text-[#8a94a6]">{r.date}</span>
|
|
|
+ </div>
|
|
|
+ <h3 className="text-lg mb-2.5 leading-[1.5] text-[#1a2333]">{r.title}</h3>
|
|
|
+ <p className="text-[#5b6779] text-sm flex-1 mb-4">{r.desc}</p>
|
|
|
+ <div className="text-xs text-[#8a94a6] mb-4 flex gap-4 flex-wrap">
|
|
|
+ <span>{r.views}</span>
|
|
|
+ <span>{r.length}</span>
|
|
|
+ <span>{r.author}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <span
|
|
|
+ className={`font-bold text-[17px] ${
|
|
|
+ r.free ? 'text-[#0d9668]' : 'text-[#ea580c]'
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ {r.price}
|
|
|
+ {r.priceUnit && <small className="text-xs text-[#8a94a6] font-normal">{r.priceUnit}</small>}
|
|
|
+ </span>
|
|
|
+ <button
|
|
|
+ onClick={() => (r.action === 'buy' ? buy(r.orderName, r.orderPrice) : read(r.orderName))}
|
|
|
+ className={`px-5 py-[9px] rounded-lg text-sm cursor-pointer border transition-all ${
|
|
|
+ r.outline
|
|
|
+ ? 'bg-transparent border-[#4f8cff] text-[#2f6bff] hover:bg-[rgba(79,140,255,.08)]'
|
|
|
+ : 'bg-gradient-to-r from-[#4f8cff] to-[#a06bff] text-white border-transparent hover:opacity-88'
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ {r.actionLabel}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 专家咨询 */}
|
|
|
+ <section className="bg-[#f6f8fc] border-y border-[#e5e9f2] py-[72px]">
|
|
|
+ <div className="container mx-auto px-4 md:px-6">
|
|
|
+ <h2 className="text-center mb-3 text-[26px] md:text-[32px] font-bold text-[#1a2333]">专家咨询服务</h2>
|
|
|
+ <p className="text-center text-[#64748b] mb-12">
|
|
|
+ Token 领域资深专家一对一服务，帮助企业建立可持续的成本治理体系
|
|
|
+ </p>
|
|
|
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
|
|
|
+ {tiers.map((t) => (
|
|
|
+ <div
|
|
|
+ key={t.name}
|
|
|
+ className={`bg-white rounded-[14px] p-8 text-center shadow-[0_1px_3px_rgba(16,24,40,.04)] relative border ${
|
|
|
+ t.hot ? 'border-[#a06bff]' : 'border-[#e5e9f2]'
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ {t.hot && (
|
|
|
+ <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-[#4f8cff] to-[#a06bff] px-4 py-[3px] rounded-[12px] text-xs text-white">
|
|
|
+ 最受欢迎
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ <h3 className="text-[19px] mb-2 text-[#1a2333]">{t.name}</h3>
|
|
|
+ <div className="text-[30px] font-bold text-[#2f6bff] my-3.5">
|
|
|
+ {t.price}
|
|
|
+ <small className="text-[13px] text-[#8a94a6] font-normal">{t.unit}</small>
|
|
|
+ </div>
|
|
|
+ <ul className="list-none text-left my-4 mb-6 text-[#5b6779] text-sm">
|
|
|
+ {t.features.map((f) => (
|
|
|
+ <li key={f} className="py-1.5 pl-[22px] relative">
|
|
|
+ <span className="absolute left-0 text-[#0d9668]">✓</span>
|
|
|
+ {f}
|
|
|
+ </li>
|
|
|
+ ))}
|
|
|
+ </ul>
|
|
|
+ <button
|
|
|
+ onClick={() => buy(t.name, parseInt(t.price.replace(/[¥,]/g, ''), 10))}
|
|
|
+ className={`w-full px-5 py-[9px] rounded-lg text-sm cursor-pointer border transition-all ${
|
|
|
+ t.hot
|
|
|
+ ? 'bg-gradient-to-r from-[#4f8cff] to-[#a06bff] text-white border-transparent hover:opacity-88'
|
|
|
+ : 'bg-transparent border-[#4f8cff] text-[#2f6bff] hover:bg-[rgba(79,140,255,.08)]'
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ 预约咨询
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* 订阅 CTA */}
|
|
|
+ <section className="py-[72px] text-center">
|
|
|
+ <div className="container mx-auto px-4 md:px-6">
|
|
|
+ <div className="bg-[linear-gradient(135deg,rgba(79,140,255,.07),rgba(160,107,255,.07))] border border-[rgba(79,140,255,.25)] rounded-[18px] px-8 py-12">
|
|
|
+ <h2 className="text-[26px] mb-2.5 text-[#1a2333]">订阅 Token 领域研究通讯</h2>
|
|
|
+ <p className="text-[#64748b] mb-6">每周一封邮件，送达最新报告导读、模型定价变动与降本实践技巧</p>
|
|
|
+ <form
|
|
|
+ onSubmit={(e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ window.alert('订阅成功！每周研究通讯将发送至您的邮箱。');
|
|
|
+ (e.target as HTMLFormElement).reset();
|
|
|
+ }}
|
|
|
+ className="flex gap-3 justify-center flex-wrap"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ type="email"
|
|
|
+ placeholder="请输入您的企业邮箱"
|
|
|
+ required
|
|
|
+ className="py-[11px] px-[18px] rounded-lg border border-[#d4dae6] bg-white text-[#1a2333] w-full md:w-[300px] text-sm outline-none focus:border-[#4f8cff]"
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ type="submit"
|
|
|
+ className="px-5 py-[9px] rounded-lg text-sm cursor-pointer bg-gradient-to-r from-[#4f8cff] to-[#a06bff] text-white hover:opacity-88"
|
|
|
+ >
|
|
|
+ 免费订阅
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ );
|
|
|
+}
|
xuyonghao