refactor: 优化网站页面结构和数据展示
- 增强服务数据模型，添加 challenges 和 outcomes 字段 - 简化统计数据配置，改为静态定义 - 重构多个页面组件，优化代码结构 - 新增产品、服务、解决方案相关的布局和组件 - 更新样式和动画配置 - 优化测试用例和类型定义 - 修复 ESLint 错误：移除不必要的 useEffect 和未使用的导入
This commit is contained in:
张翔
@@ -243,12 +243,13 @@ interface RippleButtonProps {
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
rippleColor?: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
export function RippleButton({ children, onClick, className = '', rippleColor = 'rgba(196, 30, 58, 0.3)' }: RippleButtonProps) {
|
||||
export function RippleButton({ children, onClick, className = '', rippleColor = 'rgba(196, 30, 58, 0.3)', href }: RippleButtonProps) {
|
||||
const [ripples, setRipples] = useState<Array<{ x: number; y: number; id: number }>>([]);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
|
||||
const button = e.currentTarget;
|
||||
const rect = button.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
@@ -264,13 +265,17 @@ export function RippleButton({ children, onClick, className = '', rippleColor =
|
||||
onClick?.();
|
||||
};
|
||||
|
||||
const Component = href ? motion.a : motion.button;
|
||||
const linkProps = href ? { href } : {};
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
<Component
|
||||
onClick={handleClick}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
|
||||
className={`relative overflow-hidden ${className}`}
|
||||
{...linkProps}
|
||||
>
|
||||
{children}
|
||||
{ripples.map((ripple) => (
|
||||
@@ -287,7 +292,7 @@ export function RippleButton({ children, onClick, className = '', rippleColor =
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</motion.button>
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ describe('Constants', () => {
|
||||
});
|
||||
|
||||
it('should have short name', () => {
|
||||
expect(COMPANY_INFO.shortName).toBe('睿新致遠');
|
||||
expect(COMPANY_INFO.shortName).toBe('睿新致远');
|
||||
});
|
||||
|
||||
it('should have slogan', () => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export { COMPANY_INFO } from './company';
|
||||
export { NAVIGATION, type NavigationItem } from './navigation';
|
||||
export { STATS, type StatItem } from './stats';
|
||||
export { SERVICES } from './services';
|
||||
export { SERVICES, type Service } from './services';
|
||||
export { PRODUCTS } from './products';
|
||||
export { NEWS, type NewsItem, type NewsCategory } from './news';
|
||||
export { CASES } from './cases';
|
||||
|
||||
@@ -7,10 +7,9 @@ export interface NavigationItem {
|
||||
export const NAVIGATION: NavigationItem[] = [
|
||||
{ id: 'home', label: '首页', href: '/' },
|
||||
{ id: 'services', label: '核心业务', href: '/services' },
|
||||
{ id: 'solutions', label: '解决方案', href: '/solutions' },
|
||||
{ id: 'solutions', label: '行业方案', href: '/solutions' },
|
||||
{ id: 'products', label: '产品服务', href: '/products' },
|
||||
{ id: 'cases', label: '成功案例', href: '/cases' },
|
||||
{ id: 'about', label: '关于我们', href: '/about' },
|
||||
{ id: 'news', label: '新闻动态', href: '/news' },
|
||||
{ id: 'contact', label: '联系', href: '/contact' },
|
||||
{ id: 'contact', label: '联系我们', href: '/contact' },
|
||||
];
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
export type Product = (typeof PRODUCTS)[number];
|
||||
|
||||
export const PRODUCTS = [
|
||||
{
|
||||
id: 'erp',
|
||||
@@ -15,30 +17,31 @@ export const PRODUCTS = [
|
||||
'报表分析：丰富的报表模板，支持自定义报表',
|
||||
],
|
||||
benefits: [
|
||||
'数据完全自主可控，满足安全合规要求',
|
||||
'支持本地/私有云/混合云多种部署方式',
|
||||
'提升运营效率30%，减少人工操作',
|
||||
'降低库存成本20%，优化库存周转',
|
||||
'实现数据实时共享，消除信息孤岛',
|
||||
'支持多部门协同，提升整体协作效率',
|
||||
'一次部署永久使用，无持续订阅压力',
|
||||
],
|
||||
process: [
|
||||
'需求调研：深入了解企业业务流程和管理需求',
|
||||
'方案设计：制定符合企业特点的ERP实施方案',
|
||||
'系统配置：根据需求进行系统配置和参数设置',
|
||||
'数据迁移：安全迁移历史数据，确保数据完整性',
|
||||
'用户培训：提供全面的用户培训和操作指导',
|
||||
'上线支持：协助系统上线，提供技术支持',
|
||||
'环境评估：评估服务器环境与网络架构',
|
||||
'方案设计：制定部署方案与数据迁移策略',
|
||||
'系统部署：私有化部署与系统配置',
|
||||
'数据迁移：安全迁移历史数据，确保完整性',
|
||||
'培训交付：用户培训与正式交付上线',
|
||||
],
|
||||
specs: [
|
||||
'支持本地服务器、私有云、混合云部署',
|
||||
'支持多组织、多账套管理',
|
||||
'支持多币种、多语言',
|
||||
'支持移动端访问',
|
||||
'支持API接口集成',
|
||||
'支持自定义报表',
|
||||
'支持信创环境（国产操作系统/数据库）',
|
||||
'支持API接口集成，对接现有系统',
|
||||
'支持移动端访问（APP/微信/钉钉）',
|
||||
'支持数据加密存储与传输',
|
||||
],
|
||||
pricing: {
|
||||
base: '基础版：¥19,800/年',
|
||||
standard: '标准版：¥39,800/年',
|
||||
enterprise: '企业版：¥79,800/年',
|
||||
base: '标准版',
|
||||
standard: '专业版',
|
||||
enterprise: '企业定制版',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -57,30 +60,31 @@ export const PRODUCTS = [
|
||||
'数据分析：客户分析、销售分析、业绩报表',
|
||||
],
|
||||
benefits: [
|
||||
'客户数据私有化存储，保障商业机密',
|
||||
'支持与企业现有系统深度集成',
|
||||
'销售转化率提升25%，提高销售效率',
|
||||
'客户满意度提升40%，增强客户粘性',
|
||||
'销售周期缩短30%，加快成交速度',
|
||||
'支持团队协作，提升整体销售业绩',
|
||||
'灵活定制销售流程，适配业务变化',
|
||||
],
|
||||
process: [
|
||||
'客户调研：了解企业销售流程和客户管理需求',
|
||||
'流程梳理：梳理销售流程，优化客户管理策略',
|
||||
'系统配置：配置客户字段、销售阶段、审批流程',
|
||||
'数据导入：导入历史客户数据和销售记录',
|
||||
'培训上线：培训销售人员，协助系统上线',
|
||||
'持续优化：根据使用情况持续优化系统配置',
|
||||
'需求调研：了解企业销售流程和客户管理需求',
|
||||
'环境评估：评估IT基础设施与集成需求',
|
||||
'方案设计：制定部署方案与系统集成策略',
|
||||
'系统部署：私有化部署与流程配置',
|
||||
'数据导入：导入历史客户数据与销售记录',
|
||||
'培训交付：销售团队培训与系统上线',
|
||||
],
|
||||
specs: [
|
||||
'支持本地服务器、私有云部署',
|
||||
'支持多渠道客户数据整合',
|
||||
'支持自定义销售流程',
|
||||
'支持信创环境适配',
|
||||
'支持API接口，对接ERP/OA等系统',
|
||||
'支持移动端访问',
|
||||
'支持邮件集成',
|
||||
'支持API接口集成',
|
||||
'支持数据加密与权限隔离',
|
||||
],
|
||||
pricing: {
|
||||
base: '基础版：¥9,800/年',
|
||||
standard: '标准版：¥19,800/年',
|
||||
enterprise: '企业版：¥39,800/年',
|
||||
base: '标准版',
|
||||
standard: '专业版',
|
||||
enterprise: '企业定制版',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -99,30 +103,31 @@ export const PRODUCTS = [
|
||||
'SEO优化：内置SEO工具，优化搜索引擎排名',
|
||||
],
|
||||
benefits: [
|
||||
'内容数据自主管理，支持等保合规',
|
||||
'支持私有化部署，内外网隔离访问',
|
||||
'内容发布效率提升50%，加快内容更新',
|
||||
'管理成本降低40%，减少人工投入',
|
||||
'支持多终端访问，提升用户体验',
|
||||
'灵活的权限管理，确保内容安全',
|
||||
'灵活的权限体系，满足多部门协作',
|
||||
],
|
||||
process: [
|
||||
'需求分析：了解企业内容管理需求和业务场景',
|
||||
'架构设计：设计内容架构和分类体系',
|
||||
'系统配置：配置站点、栏目、模板、权限',
|
||||
'内容迁移：迁移历史内容数据',
|
||||
'培训上线：培训内容管理人员，协助系统上线',
|
||||
'运营支持：提供持续的运营支持和技术服务',
|
||||
'需求分析：了解企业内容管理需求与安全要求',
|
||||
'环境评估：评估部署环境与网络隔离需求',
|
||||
'方案设计：制定部署方案与内容架构',
|
||||
'系统部署：私有化部署与权限配置',
|
||||
'内容迁移：迁移历史内容与媒体资源',
|
||||
'培训交付：内容团队培训与系统上线',
|
||||
],
|
||||
specs: [
|
||||
'支持多站点管理',
|
||||
'支持多语言内容',
|
||||
'支持移动端访问',
|
||||
'支持本地服务器、私有云部署',
|
||||
'支持多站点统一管理',
|
||||
'支持信创环境适配',
|
||||
'支持API接口集成',
|
||||
'支持自定义模板',
|
||||
'支持自定义模板与组件',
|
||||
'支持等保二级/三级安全要求',
|
||||
],
|
||||
pricing: {
|
||||
base: '基础版：¥4,800/年',
|
||||
standard: '标准版：¥9,800/年',
|
||||
enterprise: '企业版：¥19,800/年',
|
||||
base: '标准版',
|
||||
standard: '专业版',
|
||||
enterprise: '企业定制版',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -141,30 +146,31 @@ export const PRODUCTS = [
|
||||
'移动看板：支持移动端访问，随时随地查看数据',
|
||||
],
|
||||
benefits: [
|
||||
'分析能力私有化部署，数据不出企业',
|
||||
'支持对接内部数据源，无需数据上云',
|
||||
'决策效率提升60%，加快决策速度',
|
||||
'数据准备时间减少70%，提高数据分析效率',
|
||||
'发现隐藏业务洞察，把握业务机会',
|
||||
'支持数据驱动决策，提升管理水平',
|
||||
'自助式分析，降低数据使用门槛',
|
||||
],
|
||||
process: [
|
||||
'数据评估：评估数据源和数据质量',
|
||||
'平台搭建：搭建数据仓库和BI平台',
|
||||
'模型开发：开发数据分析模型和报表',
|
||||
'数据集成：整合多源数据到统一平台',
|
||||
'培训上线：培训数据分析人员，协助系统上线',
|
||||
'持续优化：持续优化数据模型和报表',
|
||||
'数据评估：评估数据源、数据质量与安全要求',
|
||||
'环境评估：评估服务器性能与数据规模',
|
||||
'方案设计：制定部署方案与数据仓库架构',
|
||||
'系统部署：私有化部署与数据集成',
|
||||
'模型开发：开发分析模型与可视化报表',
|
||||
'培训交付：数据分析培训与系统上线',
|
||||
],
|
||||
specs: [
|
||||
'支持多种数据源',
|
||||
'支持实时数据分析',
|
||||
'支持移动端访问',
|
||||
'支持本地服务器、私有云部署',
|
||||
'支持多种数据源（数据库/文件/API）',
|
||||
'支持信创环境适配',
|
||||
'支持实时与离线数据分析',
|
||||
'支持API接口集成',
|
||||
'支持自定义报表',
|
||||
'支持数据加密与访问审计',
|
||||
],
|
||||
pricing: {
|
||||
base: '基础版：¥14,800/年',
|
||||
standard: '标准版：¥29,800/年',
|
||||
enterprise: '企业版：¥59,800/年',
|
||||
base: '标准版',
|
||||
standard: '专业版',
|
||||
enterprise: '企业定制版',
|
||||
},
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
export type Service = (typeof SERVICES)[number];
|
||||
|
||||
export const SERVICES = [
|
||||
{
|
||||
id: 'software',
|
||||
@@ -18,6 +20,17 @@ export const SERVICES = [
|
||||
'快速响应市场变化，保持竞争优势',
|
||||
'数据驱动决策，支持业务增长',
|
||||
],
|
||||
challenges: [
|
||||
{ title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' },
|
||||
{ title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' },
|
||||
{ title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' },
|
||||
{ title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' },
|
||||
],
|
||||
outcomes: [
|
||||
{ value: '30%', label: '开发效率提升' },
|
||||
{ value: '50%', label: '返工率降低' },
|
||||
{ value: '100%', label: '按时交付率' },
|
||||
],
|
||||
process: [
|
||||
'需求分析：深入了解业务需求，制定详细需求文档',
|
||||
'方案设计：设计系统架构和技术方案',
|
||||
@@ -46,6 +59,17 @@ export const SERVICES = [
|
||||
'优化业务流程，提升运营效率',
|
||||
'增强市场洞察力，把握市场趋势',
|
||||
],
|
||||
challenges: [
|
||||
{ title: '数据孤岛', description: '各系统数据分散，无法整合分析' },
|
||||
{ title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' },
|
||||
{ title: '报表滞后', description: '手工制作报表，时效性差' },
|
||||
{ title: '价值难挖', description: '数据很多，但不知道怎么用' },
|
||||
],
|
||||
outcomes: [
|
||||
{ value: '70%', label: '决策效率提升' },
|
||||
{ value: '实时', label: '数据更新' },
|
||||
{ value: '100+', label: '可视化报表' },
|
||||
],
|
||||
process: [
|
||||
'数据评估：评估数据质量和可用性',
|
||||
'平台搭建：构建数据分析平台',
|
||||
@@ -74,6 +98,17 @@ export const SERVICES = [
|
||||
'提升技术团队整体能力',
|
||||
'加速数字化转型进程，抢占市场先机',
|
||||
],
|
||||
challenges: [
|
||||
{ title: '方向不明', description: '数字化转型不知道从哪里入手' },
|
||||
{ title: '技术债务', description: '历史系统包袱重，新技术难以引入' },
|
||||
{ title: '人才短缺', description: '缺乏专业的技术规划和架构人才' },
|
||||
{ title: '投入浪费', description: 'IT投入不少，但看不到明显效果' },
|
||||
],
|
||||
outcomes: [
|
||||
{ value: '60%', label: '方向明确度' },
|
||||
{ value: '40%', label: '试错成本降低' },
|
||||
{ value: '3x', label: '转型速度提升' },
|
||||
],
|
||||
process: [
|
||||
'现状调研：深入了解企业现状和痛点',
|
||||
'需求分析：梳理业务需求和技术需求',
|
||||
@@ -102,6 +137,17 @@ export const SERVICES = [
|
||||
'获得端到端的完整解决方案',
|
||||
'持续获得行业前沿技术和趋势',
|
||||
],
|
||||
challenges: [
|
||||
{ title: '行业壁垒', description: '不了解行业最佳实践，走弯路' },
|
||||
{ title: '方案碎片化', description: '各系统各自为政，无法协同' },
|
||||
{ title: '实施风险', description: '大型项目实施失败率高' },
|
||||
{ title: '效果难量化', description: '投入产出比不清晰，难以评估' },
|
||||
],
|
||||
outcomes: [
|
||||
{ value: '50%', label: '实施周期缩短' },
|
||||
{ value: '30%', label: '成本降低' },
|
||||
{ value: '95%', label: '客户满意度' },
|
||||
],
|
||||
process: [
|
||||
'行业调研：深入研究行业趋势和客户需求',
|
||||
'方案设计：设计符合行业特点的解决方案',
|
||||
|
||||
@@ -1,32 +1,11 @@
|
||||
import { CASES } from './cases';
|
||||
|
||||
export interface StatItem {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function calculateYearsOfExperience(): number {
|
||||
const startYear = 2014;
|
||||
const currentYear = new Date().getFullYear();
|
||||
return currentYear - startYear;
|
||||
}
|
||||
|
||||
function calculateUniqueClients(): number {
|
||||
const uniqueClients = new Set(CASES.map(c => c.client));
|
||||
return uniqueClients.size;
|
||||
}
|
||||
|
||||
function getStats(): StatItem[] {
|
||||
const yearsOfExperience = calculateYearsOfExperience();
|
||||
const uniqueClients = calculateUniqueClients();
|
||||
const caseCount = CASES.length;
|
||||
|
||||
return [
|
||||
{ value: `${uniqueClients}+`, label: '企业客户' },
|
||||
{ value: `${caseCount}+`, label: '成功案例' },
|
||||
{ value: `${caseCount}+`, label: '项目交付' },
|
||||
{ value: `${yearsOfExperience}+`, label: '年团队经验' },
|
||||
];
|
||||
}
|
||||
|
||||
export const STATS: StatItem[] = getStats();
|
||||
export const STATS: StatItem[] = [
|
||||
{ value: '12+', label: '年核心成员行业经验' },
|
||||
{ value: '4', label: '核心服务' },
|
||||
{ value: '4', label: '自研产品' },
|
||||
{ value: '5+', label: '行业覆盖' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user