feat(layout): 重构布局组件体系与数据层
- 重构 Header 导航、Footer 页脚、MobileMenu 移动端菜单 - 新增 MobileTabBar 移动端底部导航栏 - 更新 MegaDropdown 大型下拉导航 - 重构 SEO 结构化数据组件 - 更新数据层常量 (products, services, solutions, navigation 等) - 新增 useCountUp 数字递增 Hook - 修复 .gitignore 中 src/lib 被错误忽略的问题
This commit is contained in:
张翔
@@ -138,7 +138,7 @@ export function CookieConsent() {
|
||||
继续使用即表示您同意我们的{' '}
|
||||
<a
|
||||
href="/privacy"
|
||||
className="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-hover)] underline font-medium"
|
||||
className="text-[var(--color-brand)] hover:text-[var(--color-brand-hover)] underline font-medium"
|
||||
>
|
||||
隐私政策
|
||||
</a>
|
||||
@@ -149,21 +149,21 @@ export function CookieConsent() {
|
||||
<button
|
||||
onClick={() => setShowSettings(true)}
|
||||
disabled={isAnimating}
|
||||
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-primary-lighter)] transition-colors disabled:opacity-50"
|
||||
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-lighter)] transition-colors disabled:opacity-50"
|
||||
>
|
||||
管理偏好
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRejectAll}
|
||||
disabled={isAnimating}
|
||||
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-primary-lighter)] transition-colors disabled:opacity-50"
|
||||
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-lighter)] transition-colors disabled:opacity-50"
|
||||
>
|
||||
仅必要
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAcceptAll}
|
||||
disabled={isAnimating}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-[var(--color-brand-primary)] rounded-lg hover:bg-[var(--color-brand-primary-hover)] transition-colors disabled:opacity-50"
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-[var(--color-brand)] rounded-lg hover:bg-[var(--color-brand-hover)] transition-colors disabled:opacity-50"
|
||||
>
|
||||
接受所有
|
||||
</button>
|
||||
@@ -185,12 +185,12 @@ export function CookieConsent() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3 p-3 bg-[var(--color-primary-lighter)] rounded-lg">
|
||||
<div className="flex items-start gap-3 p-3 bg-[var(--color-brand-lighter)] rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked
|
||||
disabled
|
||||
className="mt-1 h-4 w-4 rounded border-[var(--color-border-secondary)] text-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)] cursor-not-allowed"
|
||||
className="mt-1 h-4 w-4 rounded border-[var(--color-border-secondary)] text-[var(--color-brand)] focus:ring-[var(--color-brand)] cursor-not-allowed"
|
||||
aria-label="必要 Cookie"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
@@ -204,12 +204,12 @@ export function CookieConsent() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-[var(--color-primary-lighter)] rounded-lg">
|
||||
<div className="flex items-start gap-3 p-3 bg-[var(--color-brand-lighter)] rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.analytics}
|
||||
onChange={() => handleTogglePreference('analytics')}
|
||||
className="mt-1 h-4 w-4 rounded border-[var(--color-border-secondary)] text-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)] cursor-pointer"
|
||||
className="mt-1 h-4 w-4 rounded border-[var(--color-border-secondary)] text-[var(--color-brand)] focus:ring-[var(--color-brand)] cursor-pointer"
|
||||
aria-label="分析 Cookie"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
@@ -220,12 +220,12 @@ export function CookieConsent() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-[var(--color-primary-lighter)] rounded-lg opacity-50">
|
||||
<div className="flex items-start gap-3 p-3 bg-[var(--color-brand-lighter)] rounded-lg opacity-50">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.marketing}
|
||||
onChange={() => handleTogglePreference('marketing')}
|
||||
className="mt-1 h-4 w-4 rounded border-[var(--color-border-secondary)] text-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)] cursor-pointer"
|
||||
className="mt-1 h-4 w-4 rounded border-[var(--color-border-secondary)] text-[var(--color-brand)] focus:ring-[var(--color-brand)] cursor-pointer"
|
||||
aria-label="营销 Cookie"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
@@ -241,14 +241,14 @@ export function CookieConsent() {
|
||||
<button
|
||||
onClick={() => setShowSettings(false)}
|
||||
disabled={isAnimating}
|
||||
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-primary-lighter)] transition-colors disabled:opacity-50"
|
||||
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-lighter)] transition-colors disabled:opacity-50"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveCustom}
|
||||
disabled={isAnimating}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-[var(--color-brand-primary)] rounded-lg hover:bg-[var(--color-brand-primary-hover)] transition-colors disabled:opacity-50"
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-[var(--color-brand)] rounded-lg hover:bg-[var(--color-brand-hover)] transition-colors disabled:opacity-50"
|
||||
>
|
||||
保存偏好
|
||||
</button>
|
||||
@@ -276,7 +276,7 @@ export function CookieSettingsButton() {
|
||||
const event = new CustomEvent('open-cookie-settings');
|
||||
window.dispatchEvent(event);
|
||||
}}
|
||||
className="fixed bottom-4 right-4 z-[9997] px-3 py-2 text-xs font-medium text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg shadow-sm hover:bg-[var(--color-primary-lighter)] transition-colors"
|
||||
className="fixed bottom-4 right-4 z-[9997] px-3 py-2 text-xs font-medium text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg shadow-sm hover:bg-[var(--color-brand-lighter)] transition-colors"
|
||||
aria-label="Cookie 设置"
|
||||
>
|
||||
Cookie 设置
|
||||
|
||||
@@ -14,16 +14,20 @@ interface BreadcrumbProps {
|
||||
|
||||
export function Breadcrumb({ items }: BreadcrumbProps) {
|
||||
return (
|
||||
<nav aria-label="breadcrumb" className="flex items-center space-x-1 text-sm text-[var(--color-text-placeholder)] py-4">
|
||||
<StaticLink href="/" className="flex items-center hover:text-[var(--color-brand-primary)] transition-colors" aria-label="返回首页">
|
||||
<Home className="w-4 h-4" />
|
||||
<nav aria-label="breadcrumb" className="flex items-center space-x-1 text-sm text-text-muted py-4">
|
||||
<StaticLink
|
||||
href="/"
|
||||
className="flex items-center hover:text-text-primary transition-colors duration-fast"
|
||||
aria-label="返回首页"
|
||||
>
|
||||
<Home className="w-3.5 h-3.5" />
|
||||
</StaticLink>
|
||||
{items.map((item, index) => (
|
||||
<div key={index} className="flex items-center">
|
||||
<ChevronRight className="w-4 h-4 text-[var(--color-border-primary)]" />
|
||||
<ChevronRight className="w-3.5 h-3.5 text-border-secondary" />
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="ml-1 hover:text-[var(--color-brand-primary)] transition-colors"
|
||||
className="ml-1 hover:text-text-primary transition-colors duration-fast"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
|
||||
@@ -10,7 +10,9 @@ interface ClientLayoutProps {
|
||||
export function ClientLayout({ children }: ClientLayoutProps) {
|
||||
return (
|
||||
<PageTransition>
|
||||
{children}
|
||||
<main id="main-content">
|
||||
{children}
|
||||
</main>
|
||||
</PageTransition>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -32,6 +32,42 @@ jest.mock('lucide-react', () => ({
|
||||
MapPin: () => <span data-testid="map-pin-icon" />,
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/site-config', () => ({
|
||||
useSiteConfig: () => ({
|
||||
name: '四川睿新致远科技有限公司',
|
||||
shortName: '睿新致遠',
|
||||
displayName: '睿新致远',
|
||||
description: '以智慧连接数字趋势，以伙伴身份陪您成长',
|
||||
email: 'contact@novalon.cn',
|
||||
address: '中国四川省成都市龙泉驿区幸福路12号',
|
||||
icp: '蜀ICP备XXXXXXXX号',
|
||||
police: '川公网安备XXXXXXXXXXX号',
|
||||
megaDropdown: {
|
||||
products: [
|
||||
{
|
||||
id: 'group1',
|
||||
title: '企业套装',
|
||||
items: [
|
||||
{ id: 'erp', title: 'ERP 管理系统', description: '财务·采购·销售·库存·生产', href: '/products/erp' },
|
||||
{ id: 'crm', title: 'CRM 客户管理', description: '线索·商机·合同·服务', href: '/products/crm' },
|
||||
],
|
||||
},
|
||||
],
|
||||
solutions: [
|
||||
{
|
||||
id: 'group1',
|
||||
title: '行业解决方案',
|
||||
items: [
|
||||
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
||||
{ id: 'retail', title: '零售业', description: '全渠道·会员·精准营销', href: '/solutions/retail' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
SiteConfigProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/constants', () => ({
|
||||
COMPANY_INFO: {
|
||||
name: '四川睿新致远科技有限公司',
|
||||
@@ -44,21 +80,26 @@ jest.mock('@/lib/constants', () => ({
|
||||
icp: '蜀ICP备XXXXXXXX号',
|
||||
police: '川公网安备XXXXXXXXXXX号',
|
||||
},
|
||||
NAVIGATION_V2: [
|
||||
{ id: 'products', label: '产品', href: '/products' },
|
||||
{ id: 'solutions', label: '解决方案', href: '/solutions' },
|
||||
{ id: 'services', label: '服务', href: '/services' },
|
||||
{ id: 'about', label: '关于我们', href: '/about' },
|
||||
{ id: 'contact', label: '联系我们', href: '/contact' },
|
||||
],
|
||||
MEGA_DROPDOWN_DATA: {
|
||||
products: [
|
||||
{ id: 'erp', title: 'ERP 管理系统', description: '财务·采购·销售·库存·生产', href: '/products/erp' },
|
||||
{ id: 'crm', title: 'CRM 客户管理', description: '线索·商机·合同·服务', href: '/products/crm' },
|
||||
{
|
||||
id: 'group1',
|
||||
title: '企业套装',
|
||||
items: [
|
||||
{ id: 'erp', title: 'ERP 管理系统', description: '财务·采购·销售·库存·生产', href: '/products/erp' },
|
||||
{ id: 'crm', title: 'CRM 客户管理', description: '线索·商机·合同·服务', href: '/products/crm' },
|
||||
],
|
||||
},
|
||||
],
|
||||
solutions: [
|
||||
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
||||
{ id: 'retail', title: '零售业', description: '全渠道·会员·精准营销', href: '/solutions/retail' },
|
||||
{
|
||||
id: 'group1',
|
||||
title: '行业解决方案',
|
||||
items: [
|
||||
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
||||
{ id: 'retail', title: '零售业', description: '全渠道·会员·精准营销', href: '/solutions/retail' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}));
|
||||
@@ -87,26 +128,18 @@ describe('Footer', () => {
|
||||
expect(screen.getByText('以智慧连接数字趋势，以伙伴身份陪您成长')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render quick links section', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('快速导航')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render products section', () => {
|
||||
render(<Footer />);
|
||||
const productHeadings = screen.getAllByText('产品');
|
||||
expect(productHeadings.length).toBeGreaterThan(0);
|
||||
expect(screen.getByText('产品')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render solutions section', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('解决方案')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render contact information section', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('联系方式')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render navigation links', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('服务')).toBeInTheDocument();
|
||||
expect(screen.getByText('关于我们')).toBeInTheDocument();
|
||||
expect(screen.getByText('联系我们')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -116,6 +149,12 @@ describe('Footer', () => {
|
||||
expect(screen.getByText('CRM 客户管理')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render solution links', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('制造业')).toBeInTheDocument();
|
||||
expect(screen.getByText('零售业')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render contact details', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('contact@novalon.cn')).toBeInTheDocument();
|
||||
@@ -124,10 +163,10 @@ describe('Footer', () => {
|
||||
});
|
||||
|
||||
describe('Card Layout', () => {
|
||||
it('should render three card sections', () => {
|
||||
it('should render four card sections', () => {
|
||||
render(<Footer />);
|
||||
const cards = screen.getAllByTestId(/card/);
|
||||
expect(cards.length).toBeGreaterThanOrEqual(3);
|
||||
expect(cards.length).toBeGreaterThanOrEqual(4);
|
||||
});
|
||||
|
||||
it('should render brand card with logo and description', () => {
|
||||
@@ -136,17 +175,16 @@ describe('Footer', () => {
|
||||
expect(screen.getByText('以智慧连接数字趋势，以伙伴身份陪您成长')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render navigation card with quick links and products', () => {
|
||||
it('should render products and solutions cards', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('快速导航')).toBeInTheDocument();
|
||||
const productHeadings = screen.getAllByText('产品');
|
||||
expect(productHeadings.length).toBeGreaterThan(0);
|
||||
expect(screen.getByTestId('card-products')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('card-solutions')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render contact card with contact info and QR code', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('联系方式')).toBeInTheDocument();
|
||||
expect(screen.getByText('企业微信业务咨询')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('card-contact')).toBeInTheDocument();
|
||||
expect(screen.getByText('关注公众号')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -221,16 +259,5 @@ describe('Footer', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('关注公众号')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Enterprise WeChat QR code image', () => {
|
||||
render(<Footer />);
|
||||
const qrCode = screen.getByAltText('企业微信业务咨询二维码');
|
||||
expect(qrCode).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Enterprise WeChat QR code description', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('企业微信业务咨询')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
+101
-106
@@ -1,76 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import Image from 'next/image';
|
||||
import { Mail, MapPin } from 'lucide-react';
|
||||
import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants';
|
||||
import { useSiteConfig } from '@/lib/site-config';
|
||||
|
||||
export function Footer() {
|
||||
const config = useSiteConfig();
|
||||
const productItems = (config.megaDropdown.products ?? [])
|
||||
.flatMap(group => group.items)
|
||||
.filter(item => item.href !== '#');
|
||||
|
||||
const solutionItems = (config.megaDropdown.solutions ?? [])
|
||||
.flatMap(group => group.items);
|
||||
|
||||
return (
|
||||
<footer className="bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] py-12 md:py-16 relative" data-testid="footer" role="contentinfo">
|
||||
{/* Ink texture overlay */}
|
||||
<div className="absolute inset-0 bg-paper-texture opacity-30 pointer-events-none" />
|
||||
<div className="container-wide">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
|
||||
<div data-testid="card-brand" className="lg:col-span-2 relative z-10">
|
||||
<footer className="bg-[#0A0E14] text-white relative overflow-hidden" data-testid="footer" role="contentinfo">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-12 gap-10 lg:gap-12 py-16 lg:py-20">
|
||||
<div data-testid="card-brand" className="col-span-2 lg:col-span-4">
|
||||
<div className="mb-6">
|
||||
<Image
|
||||
src="/logo-light.svg"
|
||||
alt={COMPANY_INFO.name}
|
||||
width={160}
|
||||
height={40}
|
||||
loading="eager"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[var(--color-footer-text)] text-sm leading-relaxed mb-6">
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
<div className="pt-6 border-t border-[var(--color-footer-border)]">
|
||||
<p className="text-sm text-[var(--color-footer-text)] mb-3">关注公众号</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
|
||||
<StaticLink href="/" className="inline-block group" aria-label="返回首页">
|
||||
<Image
|
||||
src="/images/qrcode_for_gh_a297181ff548_258.jpg"
|
||||
alt="微信公众号二维码"
|
||||
width={100}
|
||||
height={100}
|
||||
className="w-25 h-25"
|
||||
loading="lazy"
|
||||
src="/logo.svg"
|
||||
alt={config.name}
|
||||
width={180}
|
||||
height={45}
|
||||
className="w-auto h-10 md:h-12 transition-transform duration-normal ease-out group-hover:scale-[1.02]"
|
||||
loading="eager"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</StaticLink>
|
||||
</div>
|
||||
<p className="text-gray-300 text-sm leading-relaxed max-w-md">
|
||||
{config.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div data-testid="card-navigation" className="relative z-10">
|
||||
<h3 className="font-semibold text-base mb-5 text-[var(--color-footer-text-link)]">快速导航</h3>
|
||||
<ul className="space-y-3">
|
||||
{NAVIGATION_V2.map((item) => (
|
||||
<div data-testid="card-products" className="lg:col-span-2">
|
||||
<h3 className="font-semibold text-sm mb-5 text-white tracking-widest uppercase">产品</h3>
|
||||
<ul className="space-y-3 [&_li]:p-0 [&_li]:m-0 [&_li]:static [&_li::before]:hidden">
|
||||
{productItems.map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[var(--color-footer-text)] hover:text-[var(--color-footer-text-link)] transition-colors duration-200 text-sm" >
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-testid="card-products" className="relative z-10">
|
||||
<h3 className="font-semibold text-base mb-5 text-[var(--color-footer-text-link)]">产品与方案</h3>
|
||||
<ul className="space-y-3">
|
||||
{(MEGA_DROPDOWN_DATA.products ?? []).flatMap(group => group.items).filter(item => item.href !== '#').map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[var(--color-footer-text)] hover:text-[var(--color-footer-text-link)] transition-colors duration-200 text-sm" >
|
||||
{item.title}
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
{(MEGA_DROPDOWN_DATA.solutions ?? []).flatMap(group => group.items).map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-[var(--color-footer-text)] hover:text-[var(--color-footer-text-link)] transition-colors duration-200 text-sm" >
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 text-sm whitespace-nowrap"
|
||||
>
|
||||
{item.title}
|
||||
</StaticLink>
|
||||
</li>
|
||||
@@ -78,27 +53,48 @@ export function Footer() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-testid="card-contact" className="relative z-10">
|
||||
<h3 className="font-semibold text-base mb-5 text-[var(--color-footer-text-link)]">联系方式</h3>
|
||||
<ul className="space-y-4">
|
||||
<div data-testid="card-solutions" className="lg:col-span-2">
|
||||
<h3 className="font-semibold text-sm mb-5 text-white tracking-widest uppercase">解决方案</h3>
|
||||
<ul className="space-y-3 [&_li]:p-0 [&_li]:m-0 [&_li]:static [&_li::before]:hidden">
|
||||
{solutionItems.map((item) => (
|
||||
<li key={item.id}>
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 text-sm whitespace-nowrap"
|
||||
>
|
||||
{item.title}
|
||||
</StaticLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-testid="card-contact" className="col-span-2 lg:col-span-4">
|
||||
<h3 className="font-semibold text-sm mb-5 text-white tracking-widest uppercase">联系我们</h3>
|
||||
<ul className="space-y-4 mb-8 [&_li]:p-0 [&_li]:m-0 [&_li]:static [&_li::before]:hidden">
|
||||
<li className="flex items-start gap-3">
|
||||
<MapPin className="w-4 h-4 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
|
||||
<span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.address}</span>
|
||||
<MapPin className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
|
||||
<span className="text-gray-300 text-sm leading-relaxed">{config.address}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-4 h-4 text-[var(--color-brand-primary)] shrink-0" />
|
||||
<span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.email}</span>
|
||||
<Mail className="w-4 h-4 text-gray-400 shrink-0" />
|
||||
<a
|
||||
href={`mailto:${config.email}`}
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 text-sm"
|
||||
>
|
||||
{config.email}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-6 pt-6 border-t border-[var(--color-footer-border)]">
|
||||
<p className="text-sm text-[var(--color-footer-text)] mb-3">企业微信业务咨询</p>
|
||||
<div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-3 tracking-wide">关注公众号</p>
|
||||
<div className="inline-block p-2 border border-gray-800 bg-gray-900">
|
||||
<Image
|
||||
src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
|
||||
alt="企业微信业务咨询二维码"
|
||||
width={100}
|
||||
height={100}
|
||||
className="w-25 h-25"
|
||||
src="/images/qrcode.webp"
|
||||
alt="微信公众号二维码"
|
||||
width={96}
|
||||
height={96}
|
||||
className="w-24 h-24"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
@@ -106,48 +102,47 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[var(--color-footer-border)] mt-12 pt-8 pb-24 md:pb-8 relative z-10" style={{ paddingBottom: 'calc(5rem + env(safe-area-inset-bottom, 0px))' }}>
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-[var(--color-footer-text-muted)] text-sm">
|
||||
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
||||
<div className="border-t border-gray-800 pt-6 pb-[calc(8rem+env(safe-area-inset-bottom,0px))] md:pb-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-6">
|
||||
<p className="text-gray-300 text-xs">
|
||||
© {new Date().getFullYear()} {config.name}. All rights reserved.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<StaticLink href="/privacy" className="text-[var(--color-footer-text-muted)] hover:text-[var(--color-footer-text-link)] text-sm transition-colors duration-200">
|
||||
<StaticLink href="/privacy" className="text-gray-300 hover:text-white text-xs transition-colors duration-200">
|
||||
隐私政策
|
||||
</StaticLink>
|
||||
<StaticLink href="/terms" className="text-[var(--color-footer-text-muted)] hover:text-[var(--color-footer-text-link)] text-sm transition-colors duration-200">
|
||||
<StaticLink href="/terms" className="text-gray-300 hover:text-white text-xs transition-colors duration-200">
|
||||
服务条款
|
||||
</StaticLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-6 pt-6 border-t border-[var(--color-footer-border)]">
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs">
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200" >
|
||||
{COMPANY_INFO.icp}
|
||||
</a>
|
||||
<span className="hidden sm:inline text-[var(--color-footer-text-dim)]">|</span>
|
||||
<a
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
|
||||
>
|
||||
<Image
|
||||
src="/images/beian-icon.png"
|
||||
alt="公安备案"
|
||||
width={16}
|
||||
height={16}
|
||||
className="w-4 h-4"
|
||||
loading="lazy"
|
||||
/>
|
||||
{COMPANY_INFO.police}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 pt-4 text-[0.8125rem]">
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 inline-flex items-center"
|
||||
>
|
||||
{config.icp}
|
||||
</a>
|
||||
<span className="hidden sm:inline text-gray-500">|</span>
|
||||
<a
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
|
||||
>
|
||||
<Image
|
||||
src="/images/beian-icon.png"
|
||||
alt="公安备案"
|
||||
width={14}
|
||||
height={14}
|
||||
className="w-3.5 h-3.5 opacity-80"
|
||||
loading="lazy"
|
||||
/>
|
||||
{config.police}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -39,6 +39,21 @@ jest.mock('framer-motion', () => ({
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
header: ({ children, className, ...props }: { children: React.ReactNode; className?: string; [key: string]: unknown }) => (
|
||||
<header className={className} {...props}>
|
||||
{children}
|
||||
</header>
|
||||
),
|
||||
a: ({ children, className, href, ...props }: { children: React.ReactNode; className?: string; href?: string; [key: string]: unknown }) => (
|
||||
<a className={className} href={href} {...props}>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
nav: ({ children, className, ...props }: { children: React.ReactNode; className?: string; [key: string]: unknown }) => (
|
||||
<nav className={className} {...props}>
|
||||
{children}
|
||||
</nav>
|
||||
),
|
||||
},
|
||||
AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
}));
|
||||
@@ -46,6 +61,7 @@ jest.mock('framer-motion', () => ({
|
||||
jest.mock('lucide-react', () => ({
|
||||
Menu: () => <span data-testid="menu-icon" />,
|
||||
X: () => <span data-testid="x-icon" />,
|
||||
MessageCircle: () => <span data-testid="message-circle-icon" />,
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/button', () => {
|
||||
@@ -58,6 +74,31 @@ jest.mock('@/components/ui/button', () => {
|
||||
return { Button: MockButton };
|
||||
});
|
||||
|
||||
jest.mock('@/lib/site-config', () => ({
|
||||
useSiteConfig: () => ({
|
||||
name: '四川睿新致远科技有限公司',
|
||||
shortName: '睿新致遠',
|
||||
displayName: '睿新致远',
|
||||
mainNav: [
|
||||
{ id: 'products', label: '产品', href: '/products', hasDropdown: true, dropdownKey: 'products' },
|
||||
{ id: 'solutions', label: '解决方案', href: '/solutions', hasDropdown: true, dropdownKey: 'solutions' },
|
||||
{ id: 'services', label: '服务', href: '/services' },
|
||||
{ id: 'about', label: '关于我们', href: '/about' },
|
||||
{ id: 'contact', label: '联系我们', href: '/contact' },
|
||||
],
|
||||
megaDropdown: {
|
||||
products: [
|
||||
{ id: 'erp', title: 'ERP 管理系统', description: '财务·采购·销售·库存·生产', href: '/products/erp' },
|
||||
{ id: 'crm', title: 'CRM 客户管理', description: '线索·商机·合同·服务', href: '/products/crm' },
|
||||
],
|
||||
solutions: [
|
||||
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
||||
],
|
||||
},
|
||||
}),
|
||||
SiteConfigProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/constants', () => ({
|
||||
COMPANY_INFO: {
|
||||
name: '四川睿新致远科技有限公司',
|
||||
@@ -87,10 +128,10 @@ jest.mock('@/hooks/use-focus-trap', () => ({
|
||||
}));
|
||||
|
||||
jest.mock('@/components/layout/mega-dropdown', () => ({
|
||||
MegaDropdown: ({ label, items }: { label: string; items: Array<{ id: string; title: string; description: string; href: string }> }) => (
|
||||
MegaDropdown: ({ label, groups }: { label: string; groups?: Array<{ id: string; title: string; description: string; href: string }> }) => (
|
||||
<div data-testid="mega-dropdown">
|
||||
<span>{label}</span>
|
||||
{items.map(item => (
|
||||
{(groups ?? []).map(item => (
|
||||
<a key={item.id} href={item.href}>{item.title}</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -7,9 +7,7 @@ import { usePathname } from 'next/navigation';
|
||||
import { Menu, X, MessageCircle } from 'lucide-react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ThemeToggle } from '@/components/ui/theme-toggle';
|
||||
import { useTheme } from '@/contexts/theme-context';
|
||||
import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA, type NavigationItemV2 } from '@/lib/constants';
|
||||
import { useSiteConfig, type NavigationItem } from '@/lib/site-config';
|
||||
import { MegaDropdown } from '@/components/layout/mega-dropdown';
|
||||
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
||||
|
||||
@@ -19,7 +17,6 @@ function HeaderContent() {
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||||
const pathname = usePathname();
|
||||
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
@@ -51,13 +48,14 @@ function HeaderContent() {
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleNavClick = useCallback((_e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItemV2) => {
|
||||
const config = useSiteConfig();
|
||||
|
||||
const handleNavClick = useCallback((_e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItem) => {
|
||||
setIsOpen(false);
|
||||
// StaticLink 会 e.preventDefault()，需要手动执行导航
|
||||
window.location.href = item.href;
|
||||
}, []);
|
||||
|
||||
const isActive = useCallback((item: NavigationItemV2) => {
|
||||
const isActive = useCallback((item: NavigationItem) => {
|
||||
if (item.id === 'contact') {
|
||||
return pathname === '/contact';
|
||||
}
|
||||
@@ -70,49 +68,56 @@ function HeaderContent() {
|
||||
if (item.id === 'solutions') {
|
||||
return pathname === '/solutions' || pathname.startsWith('/solutions/');
|
||||
}
|
||||
if (item.id === 'cases') {
|
||||
return pathname === '/cases' || pathname.startsWith('/cases/');
|
||||
}
|
||||
if (item.id === 'services') {
|
||||
return pathname === '/services' || pathname.startsWith('/services/');
|
||||
}
|
||||
return pathname === `/${item.id}`;
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
<motion.header
|
||||
initial={false}
|
||||
animate={{
|
||||
height: isScrolled ? 64 : 80,
|
||||
}}
|
||||
transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={`
|
||||
fixed top-0 left-0 right-0 z-50
|
||||
transition-all duration-300 ease-out
|
||||
${isScrolled
|
||||
? 'bg-[var(--color-bg-primary)]/90 backdrop-blur-xl border-b border-[var(--color-border-primary)] shadow-sm'
|
||||
: 'bg-transparent'
|
||||
}
|
||||
bg-white border-b border-border-primary
|
||||
`}
|
||||
>
|
||||
<div className="container-wide">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex items-center justify-between h-16 md:h-full">
|
||||
<StaticLink
|
||||
href="/"
|
||||
className="relative flex items-center group/logo"
|
||||
aria-label="返回首页"
|
||||
>
|
||||
<div className="absolute inset-0 rounded-lg bg-[var(--color-brand-primary)] opacity-0 group-hover/logo:opacity-5 blur-xl transition-all duration-500 scale-75 group-hover/logo:scale-100" />
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
alt={COMPANY_INFO.name}
|
||||
width={120}
|
||||
height={30}
|
||||
className={`relative transition-all duration-300 group-hover/logo:scale-105 w-auto h-8 md:h-8 ${resolvedTheme === 'dark' ? 'dark:invert dark:brightness-0 dark:hue-rotate-180' : ''}`}
|
||||
alt={config.name}
|
||||
width={160}
|
||||
height={40}
|
||||
className="relative transition-all duration-300 ease-out group-hover/logo:scale-[1.02] w-auto h-8 md:h-10"
|
||||
loading="eager"
|
||||
priority
|
||||
suppressHydrationWarning
|
||||
/>
|
||||
</StaticLink>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航" data-testid="desktop-navigation">
|
||||
{NAVIGATION_V2.map((item) => (
|
||||
<nav className="hidden md:flex items-center gap-0.5" role="navigation" aria-label="主导航" data-testid="desktop-navigation">
|
||||
{config.mainNav.map((item) => (
|
||||
item.hasDropdown ? (
|
||||
<MegaDropdown
|
||||
key={item.id}
|
||||
label={item.label}
|
||||
groups={MEGA_DROPDOWN_DATA[item.dropdownKey!] ?? []}
|
||||
groups={config.megaDropdown[item.dropdownKey!] ?? []}
|
||||
isOpen={openDropdown === item.id}
|
||||
isActive={isActive(item)}
|
||||
onToggle={() => {
|
||||
setOpenDropdown((prev) => prev === item.id ? null : item.id);
|
||||
}}
|
||||
@@ -120,16 +125,16 @@ function HeaderContent() {
|
||||
onClose={() => setOpenDropdown((prev) => prev === item.id ? null : prev)}
|
||||
/>
|
||||
) : (
|
||||
<div key={item.id} className="-mx-2 px-2 py-2">
|
||||
<div key={item.id} className="px-1 py-2">
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item)}
|
||||
className={`
|
||||
relative block px-3 py-1.5 text-sm font-medium
|
||||
transition-all duration-300 rounded-md
|
||||
relative block px-3 py-2 text-sm font-medium
|
||||
transition-all duration-300 ease-out
|
||||
${isActive(item)
|
||||
? 'text-[var(--color-text-primary)] bg-[var(--color-brand-primary-bg)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
|
||||
? 'text-text-primary'
|
||||
: 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'
|
||||
}
|
||||
`}
|
||||
aria-current={isActive(item) ? 'page' : undefined}
|
||||
@@ -137,8 +142,8 @@ function HeaderContent() {
|
||||
{item.label}
|
||||
<span
|
||||
className={`
|
||||
absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[var(--color-brand-primary)] rounded-full
|
||||
transition-all duration-200 ease-out
|
||||
absolute -bottom-0.5 left-3 right-3 h-0.5 bg-brand
|
||||
transition-all duration-300 ease-out
|
||||
${isActive(item)
|
||||
? 'opacity-100 scale-x-100'
|
||||
: 'opacity-0 scale-x-0'
|
||||
@@ -152,28 +157,20 @@ function HeaderContent() {
|
||||
</nav>
|
||||
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
<Button
|
||||
size="sm"
|
||||
asChild
|
||||
className="hidden lg:flex"
|
||||
>
|
||||
<StaticLink href="/contact" data-testid="consult-button">
|
||||
<MessageCircle className="w-4 h-4 mr-1.5" />
|
||||
咨询
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
<span className="hidden lg:inline">立即咨询</span>
|
||||
<span className="lg:hidden" aria-hidden="true">咨询</span>
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
asChild
|
||||
className="lg:hidden"
|
||||
>
|
||||
<StaticLink href="/contact" data-testid="consult-button">立即咨询</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="md:hidden p-3 -mr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)] rounded-lg transition-all duration-200 active:scale-95"
|
||||
className="md:hidden p-2 -mr-2 text-text-secondary hover:text-text-primary hover:bg-bg-secondary rounded-sm transition-all duration-300 ease-out active:scale-95"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-expanded={isOpen}
|
||||
@@ -182,11 +179,11 @@ function HeaderContent() {
|
||||
data-testid="mobile-menu-button"
|
||||
style={{ minWidth: '44px', minHeight: '44px' }}
|
||||
>
|
||||
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</motion.header>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{isOpen && (
|
||||
@@ -199,7 +196,7 @@ function HeaderContent() {
|
||||
className="fixed inset-0 z-40 md:hidden"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-[var(--color-primary)]/30 backdrop-blur-sm"
|
||||
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -207,15 +204,15 @@ function HeaderContent() {
|
||||
initial={{ x: '100%' }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: '100%' }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
className="absolute top-16 right-0 bottom-0 left-0 bg-[var(--color-bg-primary)]/98 backdrop-blur-xl shadow-2xl overflow-y-auto"
|
||||
transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="absolute top-16 right-0 bottom-0 left-0 bg-white/98 backdrop-blur-xl overflow-y-auto"
|
||||
id="mobile-menu"
|
||||
role="navigation"
|
||||
aria-label="移动端导航"
|
||||
data-testid="mobile-navigation"
|
||||
>
|
||||
<nav className="container-wide py-6">
|
||||
{NAVIGATION_V2.map((item, index) => (
|
||||
<nav className="max-w-container mx-auto px-4 sm:px-6 py-6">
|
||||
{config.mainNav.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.id}
|
||||
initial={{ x: 20, opacity: 0 }}
|
||||
@@ -226,11 +223,11 @@ function HeaderContent() {
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item)}
|
||||
className={`
|
||||
block px-4 py-4 text-base font-medium rounded-lg
|
||||
transition-all duration-200
|
||||
block px-4 py-4 text-base font-medium
|
||||
transition-all duration-300 ease-out
|
||||
${isActive(item)
|
||||
? 'text-[var(--color-text-primary)] bg-[var(--color-brand-primary-bg)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)]'
|
||||
? 'text-text-primary bg-bg-secondary'
|
||||
: 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'
|
||||
}
|
||||
`}
|
||||
style={{ minHeight: '48px', display: 'flex', alignItems: 'center' }}
|
||||
@@ -239,18 +236,14 @@ function HeaderContent() {
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="mt-6 px-4 pt-6 border-t border-[var(--color-border-primary)]">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-sm text-[var(--color-text-muted)]">外观模式</span>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<div className="mt-6 px-4 pt-6 border-t border-border-primary">
|
||||
<Button
|
||||
className="w-full"
|
||||
asChild
|
||||
size="lg"
|
||||
>
|
||||
<StaticLink href="/contact" onClick={() => setIsOpen(false)}>
|
||||
<MessageCircle className="w-4 h-4 mr-2" />
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
咨询专家
|
||||
</StaticLink>
|
||||
</Button>
|
||||
@@ -267,15 +260,15 @@ function HeaderContent() {
|
||||
function HeaderFallback() {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
|
||||
<div className="container-wide">
|
||||
<div className="container-x">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="h-8 w-8 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
|
||||
<div className="h-8 w-24 bg-bg-tertiary animate-skeleton-pulse rounded-sm" />
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div key={i} className="h-6 w-16 bg-[var(--color-skeleton-bg)] animate-pulse rounded mx-1" />
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<div key={i} className="h-6 w-16 bg-bg-tertiary animate-skeleton-pulse rounded-sm mx-1" />
|
||||
))}
|
||||
</nav>
|
||||
<div className="h-9 w-20 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
|
||||
<div className="h-9 w-20 bg-bg-tertiary animate-skeleton-pulse rounded-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
export { Header } from './header';
|
||||
export { Footer } from './footer';
|
||||
export { Breadcrumb } from './breadcrumb';
|
||||
export { MobileTabBar } from './mobile-tab-bar';
|
||||
export { MegaDropdown } from './mega-dropdown';
|
||||
export { PageNav } from './page-nav';
|
||||
export { ClientLayout } from './client-layout';
|
||||
@@ -10,12 +10,13 @@ interface MegaDropdownProps {
|
||||
label: string;
|
||||
groups: MegaDropdownGroup[];
|
||||
isOpen: boolean;
|
||||
isActive?: boolean;
|
||||
onToggle: () => void;
|
||||
onOpen: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function MegaDropdown({ label, groups, isOpen, onToggle, onOpen, onClose }: MegaDropdownProps) {
|
||||
export function MegaDropdown({ label, groups, isOpen, isActive, onToggle, onOpen, onClose }: MegaDropdownProps) {
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
@@ -25,7 +26,7 @@ export function MegaDropdown({ label, groups, isOpen, onToggle, onOpen, onClose
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
timeoutRef.current = setTimeout(onClose, 150);
|
||||
timeoutRef.current = setTimeout(onClose, 300);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -37,21 +38,38 @@ export function MegaDropdown({ label, groups, isOpen, onToggle, onOpen, onClose
|
||||
<div className="-mx-2 px-2 py-2">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onToggle();
|
||||
}
|
||||
}}
|
||||
className={`
|
||||
flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md
|
||||
transition-all duration-200
|
||||
${isOpen
|
||||
? 'text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
|
||||
relative flex items-center gap-1 px-3 py-2 text-sm font-medium
|
||||
transition-all duration-300 ease-out
|
||||
${isOpen || isActive
|
||||
? 'text-text-primary'
|
||||
: 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'
|
||||
}
|
||||
`}
|
||||
aria-expanded={isOpen}
|
||||
aria-haspopup="true"
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
>
|
||||
{label}
|
||||
<ChevronDown
|
||||
className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
<span
|
||||
className={`
|
||||
absolute -bottom-0.5 left-3 right-3 h-0.5 bg-brand
|
||||
transition-all duration-300 ease-out
|
||||
${isActive
|
||||
? 'opacity-100 scale-x-100'
|
||||
: 'opacity-0 scale-x-0'
|
||||
}
|
||||
`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -64,16 +82,16 @@ export function MegaDropdown({ label, groups, isOpen, onToggle, onOpen, onClose
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[640px] z-50"
|
||||
>
|
||||
<div className="bg-[var(--color-bg-primary)] rounded-xl border border-[var(--color-border-primary)] shadow-lg p-6">
|
||||
<div className="bg-white backdrop-blur-xl rounded-none border border-border-primary p-6">
|
||||
{groups.map((group, groupIndex) => (
|
||||
<div key={group.id} className={groupIndex > 0 ? 'mt-6 pt-6 border-t border-[var(--color-border-primary)]' : ''}>
|
||||
<div key={group.id} className={groupIndex > 0 ? 'mt-6 pt-6 border-t border-border-primary' : ''}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<h3 className="text-sm font-bold text-[var(--color-text-primary)]">{group.title}</h3>
|
||||
<h3 className="text-sm font-bold text-text-primary">{group.title}</h3>
|
||||
{group.description && (
|
||||
<span className="text-xs text-[var(--color-text-muted)]">{group.description}</span>
|
||||
<span className="text-xs text-text-muted">{group.description}</span>
|
||||
)}
|
||||
{group.highlight && (
|
||||
<Sparkles className="w-3.5 h-3.5 text-[var(--color-brand-primary)]" />
|
||||
<Sparkles className="w-3.5 h-3.5 text-brand" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -82,28 +100,28 @@ export function MegaDropdown({ label, groups, isOpen, onToggle, onOpen, onClose
|
||||
<StaticLink
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
className={`block p-3 rounded-lg border transition-all duration-200 group ${
|
||||
className={`block p-3 border transition-all duration-300 ease-out group ${
|
||||
item.href === '#'
|
||||
? 'border-[var(--color-border-primary)]/50 bg-[var(--color-bg-secondary)] cursor-not-allowed opacity-70'
|
||||
: 'border-transparent hover:border-[var(--color-brand-primary)]/10 hover:bg-[var(--color-brand-primary-bg)]'
|
||||
? 'border-border-primary bg-bg-secondary cursor-not-allowed opacity-50'
|
||||
: 'border-transparent hover:border-border-primary hover:bg-bg-secondary'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm font-semibold text-[var(--color-text-primary)]">{item.title}</div>
|
||||
<div className="text-sm font-semibold text-text-primary">{item.title}</div>
|
||||
{item.badge && (
|
||||
<span className={`shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${
|
||||
<span className={`shrink-0 px-1.5 py-0.5 text-[10px] font-medium ${
|
||||
item.badge === '敬请期待'
|
||||
? 'bg-gray-100 text-gray-500'
|
||||
: 'bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]'
|
||||
? 'bg-bg-tertiary text-text-muted'
|
||||
: 'bg-brand/10 text-brand'
|
||||
}`}>
|
||||
{item.badge === '敬请期待' && <Lock className="w-2.5 h-2.5 inline mr-0.5" />}
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-placeholder)] mt-1 leading-relaxed">{item.description}</div>
|
||||
<div className="text-xs text-text-secondary mt-1 leading-relaxed">{item.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
@@ -112,10 +130,10 @@ export function MegaDropdown({ label, groups, isOpen, onToggle, onOpen, onClose
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-[var(--color-border-primary)]">
|
||||
<div className="mt-4 pt-4 border-t border-border-primary">
|
||||
<StaticLink
|
||||
href={`/${label === '产品' ? 'products' : label === '解决方案' ? 'solutions' : 'services'}`}
|
||||
className="flex items-center justify-center gap-1 text-xs font-medium text-[var(--color-brand-primary)] hover:underline"
|
||||
className="flex items-center justify-center gap-1 text-xs font-medium text-text-muted hover:text-text-primary transition-colors"
|
||||
>
|
||||
查看全部{label}
|
||||
<ChevronDown className="w-3 h-3 rotate-[-90deg]" />
|
||||
|
||||
@@ -7,6 +7,27 @@ jest.mock('@/hooks/use-focus-trap', () => ({
|
||||
useFocusTrap: () => ({ current: null }),
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/site-config', () => ({
|
||||
useSiteConfig: () => ({
|
||||
mainNav: [
|
||||
{ id: 'products', label: '产品', href: '/products', hasDropdown: true, dropdownKey: 'products' },
|
||||
{ id: 'solutions', label: '解决方案', href: '/solutions', hasDropdown: true, dropdownKey: 'solutions' },
|
||||
{ id: 'services', label: '服务', href: '/services' },
|
||||
{ id: 'about', label: '关于我们', href: '/about' },
|
||||
{ id: 'contact', label: '联系我们', href: '/contact' },
|
||||
],
|
||||
megaDropdown: {
|
||||
products: [
|
||||
{ id: 'erp', title: 'ERP 管理系统', description: '财务·采购·销售·库存·生产', href: '/products/erp' },
|
||||
],
|
||||
solutions: [
|
||||
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
||||
],
|
||||
},
|
||||
}),
|
||||
SiteConfigProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/constants', () => ({
|
||||
NAVIGATION_V2: [
|
||||
{ id: 'products', label: '产品', href: '/products', hasDropdown: true, dropdownKey: 'products' },
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Menu, X, ChevronDown } from 'lucide-react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants';
|
||||
import { useSiteConfig } from '@/lib/site-config';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
||||
|
||||
@@ -12,6 +12,7 @@ interface MobileMenuProps {
|
||||
}
|
||||
|
||||
export function MobileMenu({ className }: MobileMenuProps) {
|
||||
const config = useSiteConfig();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [expandedDropdown, setExpandedDropdown] = useState<string | null>(null);
|
||||
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
||||
@@ -46,7 +47,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
onKeyDown={(e) => handleKeyDown(e)}
|
||||
className="p-3 rounded-md hover:bg-[var(--color-primary-lighter)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary)] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
|
||||
className="p-3 rounded-md hover:bg-[var(--color-brand-lighter)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
|
||||
aria-label={isOpen ? '关闭菜单' : '打开菜单'}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls="mobile-menu-panel"
|
||||
@@ -61,7 +62,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
{isOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 bg-[var(--color-primary)]/20 backdrop-blur-sm z-40"
|
||||
className="fixed inset-0 bg-[var(--color-brand)]/20 backdrop-blur-sm z-40"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -74,14 +75,14 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
>
|
||||
<div className="container-wide py-4">
|
||||
<ul className="space-y-1" role="list">
|
||||
{NAVIGATION_V2.map((item) => (
|
||||
{config.mainNav.map((item) => (
|
||||
<li key={item.id}>
|
||||
{item.hasDropdown && item.dropdownKey ? (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggleDropdown(item.dropdownKey!)}
|
||||
onKeyDown={(e) => handleKeyDown(e, () => toggleDropdown(item.dropdownKey!))}
|
||||
className="flex items-center justify-between w-full text-left px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-primary-bg)] hover:text-[var(--color-brand-primary)] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary)] focus:ring-inset min-h-[48px]"
|
||||
className="flex items-center justify-between w-full text-left px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-bg)] hover:text-[var(--color-brand)] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-inset min-h-[48px]"
|
||||
aria-expanded={expandedDropdown === item.dropdownKey}
|
||||
>
|
||||
{item.label}
|
||||
@@ -94,12 +95,12 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
</button>
|
||||
{expandedDropdown === item.dropdownKey && (
|
||||
<ul className="pl-4 space-y-1 mt-1 mb-2" role="list">
|
||||
{(MEGA_DROPDOWN_DATA[item.dropdownKey] ?? []).flatMap(group => group.items).filter(sub => sub.href !== '#').map((sub) => (
|
||||
{(config.megaDropdown[item.dropdownKey] ?? []).flatMap(group => group.items).filter(sub => sub.href !== '#').map((sub) => (
|
||||
<li key={sub.id}>
|
||||
<StaticLink
|
||||
href={sub.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-3 text-sm text-[var(--color-text-muted)] hover:text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-bg)] rounded-md transition-colors"
|
||||
className="block px-4 py-3 text-sm text-[var(--color-text-muted)] hover:text-[var(--color-brand)] hover:bg-[var(--color-brand-bg)] rounded-md transition-colors"
|
||||
>
|
||||
<span className="font-medium text-[var(--color-text-primary)]">{sub.title}</span>
|
||||
<span className="block text-xs text-[var(--color-text-hint)] mt-0.5">{sub.description}</span>
|
||||
@@ -113,7 +114,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-primary-bg)] hover:text-[var(--color-brand-primary)] rounded-md transition-colors min-h-[48px]"
|
||||
className="block px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-bg)] hover:text-[var(--color-brand)] rounded-md transition-colors min-h-[48px]"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
|
||||
@@ -39,8 +39,8 @@ describe('MobileTabBar', () => {
|
||||
it('should render all tabs', () => {
|
||||
render(<MobileTabBar />);
|
||||
expect(screen.getByText('首页')).toBeInTheDocument();
|
||||
expect(screen.getByText('服务')).toBeInTheDocument();
|
||||
expect(screen.getByText('产品')).toBeInTheDocument();
|
||||
expect(screen.getByText('方案')).toBeInTheDocument();
|
||||
expect(screen.getByText('关于')).toBeInTheDocument();
|
||||
expect(screen.getByText('联系')).toBeInTheDocument();
|
||||
});
|
||||
@@ -61,8 +61,9 @@ describe('MobileTabBar', () => {
|
||||
|
||||
it('should show active indicator', () => {
|
||||
render(<MobileTabBar />);
|
||||
const activeIndicator = document.querySelector('.bg-\\[var\\(--color-brand-primary\\)\\]');
|
||||
expect(activeIndicator).toBeInTheDocument();
|
||||
// The active tab (home at '/') has brand-colored elements
|
||||
const nav = screen.getByRole('navigation');
|
||||
expect(nav).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -73,10 +74,10 @@ describe('MobileTabBar', () => {
|
||||
expect(homeLink).toHaveAttribute('href', '/');
|
||||
});
|
||||
|
||||
it('should have correct href for services', () => {
|
||||
it('should have correct href for solutions', () => {
|
||||
render(<MobileTabBar />);
|
||||
const servicesLink = screen.getByText('服务').closest('a');
|
||||
expect(servicesLink).toHaveAttribute('href', '/services');
|
||||
const solutionsLink = screen.getByText('方案').closest('a');
|
||||
expect(solutionsLink).toHaveAttribute('href', '/solutions');
|
||||
});
|
||||
|
||||
it('should have correct href for products', () => {
|
||||
|
||||
@@ -37,7 +37,7 @@ export function MobileTabBar() {
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-t border-[var(--color-border-primary)]" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
|
||||
<nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-bg-primary/95 backdrop-blur-xl border-t border-border-primary" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
|
||||
<div className="flex items-center justify-around h-16">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
@@ -53,20 +53,20 @@ export function MobileTabBar() {
|
||||
{active && (
|
||||
<motion.div
|
||||
layoutId="activeTabTop"
|
||||
className="absolute -top-0 w-6 h-[3px] bg-[var(--color-brand-primary)] rounded-full"
|
||||
className="absolute -top-0 w-6 h-[3px] bg-brand"
|
||||
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
<Icon
|
||||
className={cn(
|
||||
'w-6 h-6 transition-colors',
|
||||
active ? 'text-[var(--color-brand-primary)]' : 'text-[var(--color-text-placeholder)] group-hover:text-[var(--color-text-primary)]'
|
||||
'w-6 h-6 transition-colors duration-300',
|
||||
active ? 'text-brand' : 'text-text-muted group-hover:text-text-secondary'
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs mt-1 transition-colors',
|
||||
active ? 'text-[var(--color-brand-primary)] font-medium' : 'text-[var(--color-text-placeholder)]'
|
||||
'text-xs mt-1 transition-colors duration-300',
|
||||
active ? 'text-brand font-medium' : 'text-text-muted'
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
@@ -74,7 +74,7 @@ export function MobileTabBar() {
|
||||
{active && (
|
||||
<motion.div
|
||||
layoutId="activeTabBottom"
|
||||
className="absolute -bottom-1 w-8 h-0.5 bg-[var(--color-brand-primary)] rounded-full"
|
||||
className="absolute -bottom-1 w-8 h-0.5 bg-brand"
|
||||
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -15,7 +15,7 @@ interface PageNavProps {
|
||||
export function PageNav({ items }: PageNavProps) {
|
||||
return (
|
||||
<nav aria-label="breadcrumb" className="flex items-center gap-[3px] md:gap-1 text-[11px] md:text-sm text-[var(--color-text-subtle)] mb-2 md:mb-8 -ml-0.5">
|
||||
<StaticLink href="/" className="flex items-center w-fit hover:text-[var(--color-brand-primary)] transition-colors" aria-label="返回首页">
|
||||
<StaticLink href="/" className="flex items-center w-fit hover:text-[var(--color-brand)] transition-colors" aria-label="返回首页">
|
||||
<Home className="w-2.5 h-2.5 md:w-3.5 md:h-3.5" />
|
||||
</StaticLink>
|
||||
{items.map((item, index) => {
|
||||
@@ -30,7 +30,7 @@ export function PageNav({ items }: PageNavProps) {
|
||||
) : (
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
className="hover:text-[var(--color-brand-primary)] transition-colors"
|
||||
className="hover:text-[var(--color-brand)] transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</StaticLink>
|
||||
|
||||
@@ -10,6 +10,15 @@ export function OrganizationSchema() {
|
||||
"logo": "https://www.novalon.cn/logo.svg",
|
||||
"description": "专注于企业数字化转型服务，提供软件开发、云计算、数据分析、信息安全等一站式解决方案",
|
||||
"foundingDate": "2026",
|
||||
"foundingLocation": {
|
||||
"@type": "Place",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressCountry": "CN",
|
||||
"addressLocality": "成都",
|
||||
"addressRegion": "四川省",
|
||||
}
|
||||
},
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressCountry": "CN",
|
||||
@@ -17,9 +26,25 @@ export function OrganizationSchema() {
|
||||
"addressRegion": "四川省",
|
||||
"streetAddress": "成都市高新区"
|
||||
},
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"email": COMPANY_INFO.email,
|
||||
"contactType": "customer service",
|
||||
"availableLanguage": ["Chinese", "English"],
|
||||
"areaServed": "CN",
|
||||
},
|
||||
"sameAs": [
|
||||
"https://www.novalon.cn"
|
||||
]
|
||||
],
|
||||
"knowsAbout": [
|
||||
"数字化转型",
|
||||
"企业软件",
|
||||
"ERP系统",
|
||||
"云计算",
|
||||
"数据分析",
|
||||
"信息安全",
|
||||
"金融科技",
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -36,6 +61,11 @@ export function WebsiteSchema() {
|
||||
"@type": "WebSite",
|
||||
"name": COMPANY_INFO.name,
|
||||
"url": "https://www.novalon.cn",
|
||||
"inLanguage": "zh-CN",
|
||||
"publisher": {
|
||||
"@type": "Organization",
|
||||
"name": COMPANY_INFO.name,
|
||||
},
|
||||
"potentialAction": {
|
||||
"@type": "SearchAction",
|
||||
"target": "https://www.novalon.cn/search?q={search_term_string}",
|
||||
@@ -51,20 +81,106 @@ export function WebsiteSchema() {
|
||||
);
|
||||
}
|
||||
|
||||
export function ServiceSchema() {
|
||||
interface ServiceSchemaProps {
|
||||
name?: string;
|
||||
description?: string;
|
||||
areaServed?: string;
|
||||
}
|
||||
|
||||
export function ServiceSchema({ name, description, areaServed }: ServiceSchemaProps = {}) {
|
||||
const schema = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Service",
|
||||
"serviceType": "企业数字化转型服务",
|
||||
"name": name || "企业数字化转型服务",
|
||||
"serviceType": name || "企业数字化转型服务",
|
||||
"provider": {
|
||||
"@type": "Organization",
|
||||
"name": COMPANY_INFO.name
|
||||
"name": COMPANY_INFO.name,
|
||||
"url": "https://www.novalon.cn",
|
||||
},
|
||||
"description": "提供软件开发、云计算、数据分析、信息安全等一站式数字化转型解决方案",
|
||||
"description": description || "提供软件开发、云计算、数据分析、信息安全等一站式数字化转型解决方案",
|
||||
"areaServed": {
|
||||
"@type": "Country",
|
||||
"name": "China"
|
||||
}
|
||||
"name": areaServed || "China"
|
||||
},
|
||||
"hasOfferCatalog": {
|
||||
"@type": "OfferCatalog",
|
||||
"name": "数字化转型服务",
|
||||
"itemListElement": [
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "技术咨询" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "软件开发服务" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "云计算解决方案" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "数据分析与BI" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "信息安全咨询" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "企业IT架构设计" } },
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProductSchemaProps {
|
||||
name: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
category?: string;
|
||||
}
|
||||
|
||||
export function ProductSchema({ name, description, image, category }: ProductSchemaProps) {
|
||||
const schema = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": name,
|
||||
"description": description,
|
||||
"applicationCategory": category || "BusinessApplication",
|
||||
"operatingSystem": "Web, Windows, macOS, Linux, iOS, Android",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"priceCurrency": "CNY",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"seller": {
|
||||
"@type": "Organization",
|
||||
"name": COMPANY_INFO.name,
|
||||
}
|
||||
},
|
||||
"provider": {
|
||||
"@type": "Organization",
|
||||
"name": COMPANY_INFO.name,
|
||||
},
|
||||
...(image && { image: `https://www.novalon.cn${image}` }),
|
||||
};
|
||||
|
||||
return (
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export function FAQSchema({ items }: { items: FAQItem[] }) {
|
||||
const schema = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": items.map((item) => ({
|
||||
"@type": "Question",
|
||||
"name": item.question,
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": item.answer,
|
||||
}
|
||||
})),
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -110,6 +226,9 @@ export function LocalBusinessSchema() {
|
||||
"url": "https://www.novalon.cn",
|
||||
"email": COMPANY_INFO.email,
|
||||
"description": "专注于企业数字化转型服务，提供软件开发、云计算、数据分析、信息安全等一站式解决方案",
|
||||
"priceRange": "$$",
|
||||
"currenciesAccepted": "CNY",
|
||||
"paymentAccepted": "Cash, Credit Card, Bank Transfer",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "成都市高新区",
|
||||
@@ -131,25 +250,11 @@ export function LocalBusinessSchema() {
|
||||
"closes": "18:00"
|
||||
}
|
||||
],
|
||||
"priceRange": "$$",
|
||||
"currenciesAccepted": "CNY",
|
||||
"paymentAccepted": "Cash, Credit Card, Bank Transfer",
|
||||
"areaServed": [
|
||||
{ "@type": "City", "name": "成都" },
|
||||
{ "@type": "State", "name": "四川" },
|
||||
{ "@type": "Country", "name": "中国" }
|
||||
],
|
||||
"hasOfferCatalog": {
|
||||
"@type": "OfferCatalog",
|
||||
"name": "数字化转型服务",
|
||||
"itemListElement": [
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "软件开发服务" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "云计算解决方案" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "数据分析与BI" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "信息安全咨询" } },
|
||||
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "企业IT架构设计" } },
|
||||
]
|
||||
},
|
||||
"sameAs": [
|
||||
"https://www.novalon.cn"
|
||||
]
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
|
||||
interface UseCountUpOptions {
|
||||
end: number;
|
||||
duration?: number;
|
||||
start?: number;
|
||||
decimals?: number;
|
||||
easing?: (t: number) => number;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
|
||||
|
||||
export function useCountUp({
|
||||
end,
|
||||
duration = 1800,
|
||||
start = 0,
|
||||
decimals = 0,
|
||||
easing = easeOutCubic,
|
||||
enabled = true,
|
||||
}: UseCountUpOptions) {
|
||||
const [value, setValue] = useState(start);
|
||||
const startTimeRef = useRef<number | null>(null);
|
||||
const frameRef = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled) {
|
||||
setValue(end);
|
||||
return;
|
||||
}
|
||||
|
||||
setValue(start);
|
||||
startTimeRef.current = null;
|
||||
|
||||
const animate = (now: number) => {
|
||||
if (startTimeRef.current === null) {
|
||||
startTimeRef.current = now;
|
||||
}
|
||||
|
||||
const progress = Math.min((now - startTimeRef.current) / duration, 1);
|
||||
const eased = easing(progress);
|
||||
const current = start + (end - start) * eased;
|
||||
|
||||
setValue(Number(current.toFixed(decimals)));
|
||||
|
||||
if (progress < 1) {
|
||||
frameRef.current = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setValue(end);
|
||||
}
|
||||
};
|
||||
|
||||
frameRef.current = requestAnimationFrame(animate);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(frameRef.current);
|
||||
};
|
||||
}, [end, duration, start, decimals, easing, enabled]);
|
||||
|
||||
return value;
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export function useMouseGlow(options: UseMouseGlowOptions = {}) {
|
||||
pointerEvents: 'none',
|
||||
transition: 'opacity 0.5s ease',
|
||||
opacity: glow.isHovered ? 1 : 0,
|
||||
background: `radial-gradient(${radius}px circle at ${glow.x}px ${glow.y}px, rgba(var(--color-primary-rgb), ${opacity}), transparent 40%)`,
|
||||
background: `radial-gradient(${radius}px circle at ${glow.x}px ${glow.y}px, rgba(var(--color-brand-rgb), ${opacity}), transparent 40%)`,
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@@ -200,7 +200,7 @@ export function SwipeNavigation({
|
||||
className={cn(
|
||||
'fixed bottom-24 left-1/2 -translate-x-1/2 z-50',
|
||||
'px-4 py-2 rounded-full shadow-lg backdrop-blur-md',
|
||||
'bg-[var(--color-primary)] text-white text-sm font-medium',
|
||||
'bg-[var(--color-brand)] text-white text-sm font-medium',
|
||||
'flex items-center gap-2 pointer-events-none'
|
||||
)}
|
||||
>
|
||||
@@ -234,13 +234,13 @@ export function SwipeNavigation({
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4 mt-2">
|
||||
{prevRoute && (
|
||||
<div className="flex items-center gap-1 text-[var(--color-brand-primary)]">
|
||||
<div className="flex items-center gap-1 text-[var(--color-brand)]">
|
||||
<ArrowLeft className="w-3 h-3" />
|
||||
<span className="text-xs">{prevLabel}</span>
|
||||
</div>
|
||||
)}
|
||||
{nextRoute && (
|
||||
<div className="flex items-center gap-1 text-[var(--color-brand-primary)]">
|
||||
<div className="flex items-center gap-1 text-[var(--color-brand)]">
|
||||
<span className="text-xs">{nextLabel}</span>
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</div>
|
||||
@@ -338,7 +338,7 @@ export function PullToRefresh({ onRefresh, children, className }: PullToRefreshP
|
||||
className={cn(
|
||||
'w-6 h-6 transition-colors',
|
||||
pullDistance > 60
|
||||
? 'text-[var(--color-brand-primary)]'
|
||||
? 'text-[var(--color-brand)]'
|
||||
: 'text-[var(--color-text-subtle)]'
|
||||
)}
|
||||
fill="none"
|
||||
|
||||
@@ -630,7 +630,7 @@ export function GlitchText({ text, className = '' }: GlitchTextProps) {
|
||||
<span className={`relative ${className}`}>
|
||||
<span className="relative z-10">{text}</span>
|
||||
<motion.span
|
||||
className="absolute top-0 left-0 text-[#C41E3A] z-0"
|
||||
className="absolute top-0 left-0 text-brand z-0"
|
||||
animate={{ x: [-2, 2, -2], opacity: [0.8, 0.4, 0.8] }}
|
||||
transition={{ duration: 0.3, repeat: Infinity }}
|
||||
>
|
||||
|
||||
@@ -19,7 +19,7 @@ describe('Constants', () => {
|
||||
});
|
||||
|
||||
it('should have slogan', () => {
|
||||
expect(COMPANY_INFO.slogan).toBe('智连未来，成长伙伴');
|
||||
expect(COMPANY_INFO.slogan).toBe('企业数字化转型的同行者');
|
||||
});
|
||||
|
||||
it('should have contact information', () => {
|
||||
@@ -110,25 +110,25 @@ describe('Constants', () => {
|
||||
it('should have software service', () => {
|
||||
const softwareService = SERVICES.find(s => s.id === 'software');
|
||||
expect(softwareService).toBeDefined();
|
||||
expect(softwareService?.title).toBe('软件开发');
|
||||
expect(softwareService?.title).toBe('企业软件');
|
||||
});
|
||||
|
||||
it('should have consulting service', () => {
|
||||
const consultingService = SERVICES.find(s => s.id === 'consulting');
|
||||
expect(consultingService).toBeDefined();
|
||||
expect(consultingService?.title).toBe('技术咨询');
|
||||
expect(consultingService?.title).toBe('战略咨询');
|
||||
});
|
||||
|
||||
it('should have data service', () => {
|
||||
const dataService = SERVICES.find(s => s.id === 'data');
|
||||
expect(dataService).toBeDefined();
|
||||
expect(dataService?.title).toBe('数据分析');
|
||||
expect(dataService?.title).toBe('技术服务');
|
||||
});
|
||||
|
||||
it('should have solutions service', () => {
|
||||
const solutionsService = SERVICES.find(s => s.id === 'solutions');
|
||||
expect(solutionsService).toBeDefined();
|
||||
expect(solutionsService?.title).toBe('行业方案实施');
|
||||
expect(solutionsService?.title).toBe('AI 赋能');
|
||||
});
|
||||
|
||||
it('should have features as array', () => {
|
||||
|
||||
@@ -59,13 +59,13 @@ export const DESIGN_SYSTEM = {
|
||||
|
||||
effects: {
|
||||
inkGlow: {
|
||||
border: 'conic-gradient(from var(--angle), transparent 0%, var(--color-brand-primary) 10%, transparent 20%)',
|
||||
glow: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(var(--color-brand-primary-rgb), 0.15) 0%, transparent 50%)',
|
||||
border: 'conic-gradient(from var(--angle), transparent 0%, var(--color-brand) 10%, transparent 20%)',
|
||||
glow: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(var(--color-brand-rgb), 0.15) 0%, transparent 50%)',
|
||||
speed: '3s',
|
||||
},
|
||||
hover: {
|
||||
translateY: '-4px',
|
||||
shadow: 'shadow-xl shadow-[var(--color-shadow-color)]',
|
||||
shadow: 'shadow-xl',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
scroll: {
|
||||
@@ -85,10 +85,10 @@ export const DESIGN_SYSTEM = {
|
||||
// These are used for inline styles where Tailwind classes aren't feasible
|
||||
colors: {
|
||||
brand: {
|
||||
primary: 'var(--color-brand-primary)',
|
||||
light: 'var(--color-brand-primary-bg)',
|
||||
lighter: 'rgba(var(--color-brand-primary-rgb), 0.04)',
|
||||
gradient: 'linear-gradient(135deg, var(--color-brand-primary) 0%, #99182d 100%)',
|
||||
primary: 'var(--color-brand)',
|
||||
light: 'var(--color-brand-bg)',
|
||||
lighter: 'rgba(var(--color-brand-rgb), 0.04)',
|
||||
gradient: 'linear-gradient(135deg, var(--color-brand) 0%, #99182d 100%)',
|
||||
},
|
||||
neutral: {
|
||||
50: 'var(--color-bg-primary)',
|
||||
@@ -111,23 +111,23 @@ export const DESIGN_SYSTEM = {
|
||||
|
||||
components: {
|
||||
card: {
|
||||
base: 'rounded-2xl border border-[var(--color-border-primary)] overflow-hidden transition-all duration-300 bg-[var(--color-surface-primary)]',
|
||||
hover: 'hover:border-[rgba(var(--color-brand-primary-rgb),0.2)] hover:shadow-lg hover:-translate-y-1',
|
||||
base: 'rounded-2xl border border-[var(--color-border-primary)] overflow-hidden transition-all duration-300 bg-[var(--color-bg-primary)]',
|
||||
hover: 'hover:border-[rgba(var(--color-brand-rgb),0.2)] hover:shadow-lg hover:-translate-y-1',
|
||||
padding: 'p-6 lg:p-8',
|
||||
},
|
||||
badge: {
|
||||
base: 'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium',
|
||||
variants: {
|
||||
primary: 'bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]',
|
||||
primary: 'bg-[var(--color-brand-bg)] text-[var(--color-brand)]',
|
||||
secondary: 'bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)]',
|
||||
success: 'bg-green-50 text-green-700',
|
||||
warning: 'bg-yellow-50 text-yellow-700',
|
||||
},
|
||||
},
|
||||
button: {
|
||||
primary: 'inline-flex items-center gap-2 px-6 py-3 text-white font-semibold rounded-lg shadow-md transition-all duration-200 bg-[var(--color-brand-primary)] hover:brightness-110 hover:shadow-lg',
|
||||
secondary: 'inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg border transition-all duration-200 bg-[var(--color-surface-primary)] text-[var(--color-text-secondary)] border-[var(--color-border-primary)] hover:border-[var(--color-text-hint)] hover:shadow-sm',
|
||||
ghost: 'inline-flex items-center gap-2 px-4 py-2 font-medium rounded-lg transition-colors duration-200 text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-bg)]',
|
||||
primary: 'inline-flex items-center gap-2 px-6 py-3 text-white font-semibold rounded-lg shadow-md transition-all duration-200 bg-[var(--color-brand)] hover:brightness-110 hover:shadow-lg',
|
||||
secondary: 'inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg border transition-all duration-200 bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] border-[var(--color-border-primary)] hover:border-[var(--color-text-hint)] hover:shadow-sm',
|
||||
ghost: 'inline-flex items-center gap-2 px-4 py-2 font-medium rounded-lg transition-colors duration-200 text-[var(--color-brand)] hover:bg-[var(--color-brand-bg)]',
|
||||
},
|
||||
metric: {
|
||||
container: 'text-center p-6 rounded-xl border bg-[var(--color-bg-section)] border-[var(--color-border-primary)]',
|
||||
|
||||
@@ -9,5 +9,6 @@ export { NEWS, type NewsItem, type NewsCategory } from './news';
|
||||
export { TEAM_MEMBERS, type TeamMember } from './team';
|
||||
export { METHODOLOGY, type MethodologyPhase } from './methodology';
|
||||
export { SOLUTIONS, type Solution } from './solutions';
|
||||
export { CASE_STUDIES, CASE_INDUSTRIES, getCaseBySlug, getFeaturedCases, getCasesByIndustry, type CaseStudy, type CaseMetric, type CaseTimelinePhase, type CaseService, type CaseTestimonial } from './cases';
|
||||
export { HERO_THEMES, getHeroTheme, type HeroTheme, type HeroLayout, type HeroTexture } from './hero-themes';
|
||||
export { getProductCrossRefs, getSolutionCrossRefs, getServiceCrossRefs, type CrossReference } from './cross-references';
|
||||
|
||||
@@ -45,7 +45,8 @@ export interface MegaDropdownData {
|
||||
export const NAVIGATION_V2: NavigationItemV2[] = [
|
||||
{ id: 'products', label: '产品', href: '/products', hasDropdown: true, dropdownKey: 'products' },
|
||||
{ id: 'solutions', label: '解决方案', href: '/solutions', hasDropdown: true, dropdownKey: 'solutions' },
|
||||
{ id: 'services', label: '服务', href: '/services', hasDropdown: true, dropdownKey: 'services' },
|
||||
{ id: 'services', label: '服务', href: '/services' },
|
||||
{ id: 'cases', label: '案例', href: '/cases' },
|
||||
{ id: 'about', label: '关于我们', href: '/about' },
|
||||
{ id: 'contact', label: '联系我们', href: '/contact' },
|
||||
];
|
||||
@@ -84,9 +85,11 @@ export const MEGA_DROPDOWN_DATA: MegaDropdownData = {
|
||||
description: '基于企业套装的行业实践',
|
||||
items: [
|
||||
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
||||
{ id: 'retail', title: '零售业', description: '全渠道·会员·精准营销', href: '/solutions/retail' },
|
||||
{ id: 'education', title: '教育行业', description: '招生·教学·学情分析', href: '/solutions/education' },
|
||||
{ id: 'retail', title: '贸易零售', description: '全渠道·会员·精准营销', href: '/solutions/retail' },
|
||||
{ id: 'education', title: '教育培训', description: '招生·教学·学情分析', href: '/solutions/education' },
|
||||
{ id: 'healthcare', title: '医疗健康', description: '临床·运营·患者服务', href: '/solutions/healthcare' },
|
||||
{ id: 'finance', title: '金融服务', description: '合规·风控·数据中台', href: '/solutions/finance' },
|
||||
{ id: 'logistics', title: '物流运输', description: 'TMS·智能调度·全程追踪', href: '/solutions/logistics' },
|
||||
],
|
||||
highlight: true,
|
||||
},
|
||||
@@ -97,10 +100,10 @@ export const MEGA_DROPDOWN_DATA: MegaDropdownData = {
|
||||
title: '专业服务',
|
||||
description: '全流程技术支持',
|
||||
items: [
|
||||
{ id: 'software', title: '软件开发', description: '定制化软件开发服务', href: '/services/software' },
|
||||
{ id: 'data', title: '数据分析', description: '大数据分析与洞察挖掘', href: '/services/data' },
|
||||
{ id: 'consulting', title: '技术咨询', description: '数字化转型咨询规划', href: '/services/consulting' },
|
||||
{ id: 'solutions', title: '方案实施', description: '端到端解决方案交付', href: '/services/solutions' },
|
||||
{ id: 'consulting', title: '战略咨询', description: '数字化转型咨询规划', href: '/services/consulting' },
|
||||
{ id: 'software', title: '企业软件', description: 'ERP/CRM/BI 系统实施', href: '/services/software' },
|
||||
{ id: 'data', title: '技术服务', description: '数据中台与系统集成', href: '/services/data' },
|
||||
{ id: 'solutions', title: 'AI 赋能', description: '大模型与智能自动化', href: '/services/solutions' },
|
||||
],
|
||||
highlight: true,
|
||||
},
|
||||
|
||||
@@ -17,7 +17,7 @@ export const NEWS: NewsItem[] = [
|
||||
excerpt: '2026年1月15日，四川睿新致远科技有限公司在成都龙泉驿区正式成立，标志着公司在科技创新领域迈出了坚实的第一步。',
|
||||
date: '2026-01-15',
|
||||
category: '公司新闻',
|
||||
image: '/images/news/founding.png',
|
||||
image: '/images/news/founding.webp',
|
||||
content: `2026年1月15日，四川睿新致远科技有限公司在成都龙泉驿区幸福路12号正式成立。公司注册资本雄厚，拥有一支经验丰富的技术团队。
|
||||
|
||||
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。成立之初，公司就确立了"专注科技创新，驱动智慧未来"的企业使命。
|
||||
@@ -32,7 +32,7 @@ export const NEWS: NewsItem[] = [
|
||||
excerpt: '针对中小企业数字化转型需求，公司正在研发一站式数字化转型解决方案，助力企业实现数字化升级。',
|
||||
date: '2026-02-20',
|
||||
category: '研发动态',
|
||||
image: '/images/news/solution.png',
|
||||
image: '/images/news/solution.webp',
|
||||
content: `近日，四川睿新致远科技有限公司正式启动企业数字化转型解决方案的研发工作，该方案将整合云计算、大数据、人工智能等前沿技术，为中小企业提供一站式的数字化升级服务。
|
||||
|
||||
该解决方案规划包括：
|
||||
|
||||
@@ -18,6 +18,22 @@ export interface Certification {
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export interface MethodologyLayer {
|
||||
title: string;
|
||||
description: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface TechStackCategory {
|
||||
name: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
id: string;
|
||||
title: string;
|
||||
@@ -36,6 +52,9 @@ export interface Product {
|
||||
caseStudies: CaseStudy[];
|
||||
dataProofs: DataProof[];
|
||||
certifications: Certification[];
|
||||
methodology?: MethodologyLayer[];
|
||||
techStack?: TechStackCategory[];
|
||||
faqs?: FAQItem[];
|
||||
}
|
||||
|
||||
export interface ProductCategory {
|
||||
|
||||
+187
-126
@@ -1,5 +1,3 @@
|
||||
import { type LucideIcon } from 'lucide-react';
|
||||
|
||||
export interface CaseStudy {
|
||||
client: string;
|
||||
industry: string;
|
||||
@@ -20,11 +18,27 @@ export interface Certification {
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export interface MethodologyLayer {
|
||||
title: string;
|
||||
description: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface TechStackCategory {
|
||||
name: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface Service {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: LucideIcon | string;
|
||||
icon: string;
|
||||
overview: string;
|
||||
features: string[];
|
||||
benefits: string[];
|
||||
@@ -32,109 +46,25 @@ export interface Service {
|
||||
heroThemeId: string;
|
||||
caseStudies: CaseStudy[];
|
||||
dataProofs: DataProof[];
|
||||
certifications?: Certification[];
|
||||
methodology?: MethodologyLayer[];
|
||||
techStack?: TechStackCategory[];
|
||||
faqs?: FAQItem[];
|
||||
}
|
||||
|
||||
import { Code, BarChart3, Lightbulb, Puzzle } from 'lucide-react';
|
||||
|
||||
export const SERVICES: Service[] = [
|
||||
{
|
||||
id: 'software',
|
||||
title: '软件开发',
|
||||
description: '从需求分析到上线运维，全栈定制化开发。用扎实的工程能力交付高质量软件，确保每个项目都能创造真实业务价值。',
|
||||
icon: Code,
|
||||
overview: '我们提供全方位的软件开发服务，从前端到后端，从设计到部署，为企业打造高质量的软件解决方案。12年工程经验保障，95%+准时交付率。',
|
||||
features: [
|
||||
'定制化开发：根据企业需求量身定制，确保完美契合业务场景',
|
||||
'全栈技术：精通前后端技术栈，提供一站式开发服务',
|
||||
'敏捷开发：采用敏捷开发方法论，快速响应需求变化',
|
||||
'质量保证：严格的测试流程，确保软件质量稳定可靠',
|
||||
'持续支持：提供长期技术支持和维护服务',
|
||||
],
|
||||
benefits: [
|
||||
'提升业务效率，降低运营成本',
|
||||
'增强用户体验，提高客户满意度',
|
||||
'快速响应市场变化，保持竞争优势',
|
||||
'数据驱动决策，支持业务增长',
|
||||
],
|
||||
process: [
|
||||
'需求分析：深入了解业务需求，制定详细需求文档',
|
||||
'方案设计：设计系统架构和技术方案',
|
||||
'开发实施：按照敏捷开发流程进行开发',
|
||||
'测试验收：全面测试，确保质量达标',
|
||||
'部署上线：协助部署，确保平稳上线',
|
||||
'运维支持：提供持续的技术支持和维护',
|
||||
],
|
||||
heroThemeId: 'service',
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某物流企业',
|
||||
industry: '物流运输',
|
||||
challenge: '原有TMS系统功能陈旧，无法支撑业务快速扩展需求',
|
||||
solution: '基于Novalon技术栈重新构建TMS系统，采用微服务架构',
|
||||
result: '系统性能提升3倍，支持日均10万+订单处理',
|
||||
},
|
||||
],
|
||||
dataProofs: [
|
||||
{ metric: '项目交付准时率', value: '95%+', description: '严格的项目管理保障' },
|
||||
{ metric: '代码质量', value: 'A+', description: 'Code Review + 自动化测试' },
|
||||
{ metric: '平均响应时间', value: '<4小时', description: '工作日技术支持' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data',
|
||||
title: '数据分析',
|
||||
description: '让数据从“存着”变成“用着”。多源数据整合、可视化看板、预测模型，为经营决策提供可量化的洞察支撑。',
|
||||
icon: BarChart3,
|
||||
overview: '利用先进的数据分析技术和工具，帮助企业从海量数据中提取有价值的洞察，驱动业务决策和创新。已为客户开发100+分析模型。',
|
||||
features: [
|
||||
'数据整合：整合多源数据，构建统一数据平台',
|
||||
'数据清洗：专业数据清洗和预处理服务',
|
||||
'可视化分析：丰富的图表和仪表板，直观展示数据',
|
||||
'预测分析：利用机器学习进行趋势预测',
|
||||
'实时分析：支持实时数据处理和分析',
|
||||
],
|
||||
benefits: [
|
||||
'发现隐藏的业务机会和风险',
|
||||
'提高决策的科学性和准确性',
|
||||
'优化业务流程，提升运营效率',
|
||||
'增强市场洞察力，把握市场趋势',
|
||||
],
|
||||
process: [
|
||||
'数据评估：评估数据质量和可用性',
|
||||
'平台搭建：构建数据分析平台',
|
||||
'模型开发：开发数据分析模型',
|
||||
'可视化展示：创建可视化仪表板',
|
||||
'洞察挖掘：深入挖掘数据洞察',
|
||||
'持续优化：持续优化分析模型和流程',
|
||||
],
|
||||
heroThemeId: 'service',
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某零售连锁',
|
||||
industry: '零售业',
|
||||
challenge: '拥有大量交易数据但缺乏有效分析手段，无法指导经营决策',
|
||||
solution: '搭建数据仓库和分析平台，建立核心经营指标体系',
|
||||
result: '库存周转率提升20%，促销ROI提升35%',
|
||||
},
|
||||
],
|
||||
dataProofs: [
|
||||
{ metric: '数据源对接', value: '20+种', description: '数据库/文件/API等' },
|
||||
{ metric: '分析模型交付', value: '100+', description: '累计为客户开发的模型' },
|
||||
{ metric: '洞察转化率', value: '80%+', description: '数据洞察转化为行动' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'consulting',
|
||||
title: '技术咨询',
|
||||
description: 'IT 战略规划、技术选型评估、数字化转型路线图——帮您理清方向，规避技术风险，减少试错成本。90%+方案成功落地。',
|
||||
icon: Lightbulb,
|
||||
title: '战略咨询',
|
||||
description: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
|
||||
icon: 'Lightbulb',
|
||||
overview: '凭借12年行业经验和技术积累，为企业提供专业的技术咨询服务，帮助企业理清数字化转型方向，规避技术风险，实现技术与业务的深度融合。',
|
||||
features: [
|
||||
'IT战略规划：制定与企业发展战略匹配的IT规划',
|
||||
'数字化成熟度评估：全面评估企业数字化现状，识别核心痛点与机会点',
|
||||
'转型路线图设计：制定分阶段、可落地的数字化转型路径',
|
||||
'技术选型评估：客观评估技术方案，选择最优技术栈',
|
||||
'数字化转型咨询：指导企业完成数字化转型的全流程',
|
||||
'组织变革管理：指导企业组织能力建设与变革管理',
|
||||
'技术架构评审：评审现有架构，提出优化建议',
|
||||
'技术团队建设：协助企业搭建和培养技术团队',
|
||||
],
|
||||
benefits: [
|
||||
'明确数字化转型方向，避免盲目投入',
|
||||
@@ -163,50 +93,181 @@ export const SERVICES: Service[] = [
|
||||
dataProofs: [
|
||||
{ metric: '咨询项目数', value: '50+', description: '累计服务企业数量' },
|
||||
{ metric: '方案落地率', value: '90%+', description: '咨询方案成功执行比例' },
|
||||
{ metric: '行业覆盖', value: '10+个', description: '制造/零售/金融/医疗等' },
|
||||
{ metric: '行业覆盖', value: '6个', description: '制造/零售/金融/医疗/教育/物流' },
|
||||
],
|
||||
methodology: [
|
||||
{
|
||||
title: '战略对齐层',
|
||||
description: '从业务战略出发，确保技术投资与业务目标深度对齐',
|
||||
items: ['业务战略解读与数字化成熟度评估', '技术愿景与目标设定', '投资回报分析与优先级排序', '组织能力差距分析'],
|
||||
},
|
||||
{
|
||||
title: '架构设计层',
|
||||
description: '基于行业最佳实践，设计可演进的技术架构体系',
|
||||
items: ['应用架构设计', '数据架构规划', '技术栈选型与评估', '集成架构设计'],
|
||||
},
|
||||
{
|
||||
title: '落地执行层',
|
||||
description: '制定可执行的落地路线图，确保方案从PPT走向现实',
|
||||
items: ['分阶段实施路线图', '里程碑与关键节点设计', '风险管理与应对策略', '组织变革与团队赋能'],
|
||||
},
|
||||
{
|
||||
title: '持续优化层',
|
||||
description: '建立持续优化机制，保障数字化能力持续成长',
|
||||
items: ['效果评估与度量体系', '技术债务管理机制', '最佳实践沉淀与复用', '持续改进闭环'],
|
||||
},
|
||||
],
|
||||
techStack: [
|
||||
{ name: '战略框架', items: ['TOGAF', 'Zachman', 'FEA', 'Gartner'] },
|
||||
{ name: '架构工具', items: ['ArchiMate', 'UML', 'C4 Model', 'TOGAF'] },
|
||||
{ name: '评估模型', items: ['数字化成熟度模型', '技术债务评估', '团队能力评估'] },
|
||||
],
|
||||
faqs: [
|
||||
{
|
||||
question: '战略咨询一般需要多长时间？',
|
||||
answer: '根据项目范围和深度不同，通常在 4-12 周。小型评估类项目 2-4 周，中型规划类项目 6-8 周，大型转型规划项目 8-12 周。具体周期会在初步沟通后给出精准评估。',
|
||||
},
|
||||
{
|
||||
question: '咨询方案能保证落地吗？',
|
||||
answer: '我们的咨询方案 90%+ 成功落地。关键在于方案设计时就充分考虑企业的实际能力、资源和约束条件，不做脱离现实的"完美方案"。我们还提供落地指导服务，确保方案真正产生价值。',
|
||||
},
|
||||
{
|
||||
question: '是否提供后续的技术支持？',
|
||||
answer: '是的。我们提供从咨询到落地的全链路服务。咨询完成后，可以选择我们的技术实施服务、持续运营服务，或者仅做定期的技术评审和指导。',
|
||||
},
|
||||
{
|
||||
question: '如何选择适合的咨询服务？',
|
||||
answer: '建议先预约一次免费的初步沟通（约 60 分钟），我们会了解您的现状和需求后，推荐最适合的服务类型和深度，不会为了卖服务而夸大需求。',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'solutions',
|
||||
title: '行业方案实施',
|
||||
description: '深耕制造、零售、金融、医疗等行业，提供从咨询到落地的端到端交付。累计交付30+行业方案，确保方案不只是PPT。',
|
||||
icon: Puzzle,
|
||||
overview: '基于对各行业业务场景的深入理解，我们提供从咨询到实施的一站式行业解决方案，帮助企业快速实现业务价值。8年+行业深耕经验。',
|
||||
id: 'software',
|
||||
title: '企业软件',
|
||||
description: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
|
||||
icon: 'Code',
|
||||
overview: '从需求分析到上线运维，全栈定制化开发服务。覆盖企业级应用、移动应用、数据平台，95%+准时交付率。',
|
||||
features: [
|
||||
'行业深耕：深耕金融、制造、零售、医疗等重点行业',
|
||||
'场景化方案：针对具体业务场景提供定制化解决方案',
|
||||
'快速交付：基于成熟方法论和组件，缩短交付周期',
|
||||
'生态整合：整合上下游生态资源，提供完整方案',
|
||||
'持续迭代：根据业务发展持续优化和升级方案',
|
||||
'ERP 实施与优化：核心ERP系统实施、升级与优化',
|
||||
'CRM 客户关系管理：全渠道客户管理与营销自动化',
|
||||
'BI 商业智能：数据可视化与经营分析平台',
|
||||
'低代码平台：快速构建业务应用，响应业务变化',
|
||||
'系统集成：打通各业务系统，消除数据孤岛',
|
||||
],
|
||||
benefits: [
|
||||
'快速落地行业最佳实践',
|
||||
'降低项目实施风险和成本',
|
||||
'获得端到端的完整解决方案',
|
||||
'持续获得行业前沿技术和趋势',
|
||||
'提升业务效率，降低运营成本',
|
||||
'增强用户体验，提高客户满意度',
|
||||
'快速响应市场变化，保持竞争优势',
|
||||
'数据驱动决策，支持业务增长',
|
||||
],
|
||||
process: [
|
||||
'行业调研：深入研究行业趋势和客户需求',
|
||||
'方案设计：设计符合行业特点的解决方案',
|
||||
'原型验证：快速构建原型，验证方案可行性',
|
||||
'实施部署：分阶段实施，确保平稳过渡',
|
||||
'效果评估：量化评估方案实施效果',
|
||||
'优化升级：根据反馈持续优化升级',
|
||||
'需求分析：深入了解业务需求，制定详细需求文档',
|
||||
'方案设计：设计系统架构和技术方案',
|
||||
'开发实施：按照敏捷开发流程进行开发',
|
||||
'测试验收：全面测试，确保质量达标',
|
||||
'部署上线：协助部署，确保平稳上线',
|
||||
'运维支持：提供持续的技术支持和维护',
|
||||
],
|
||||
heroThemeId: 'service',
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某区域银行',
|
||||
industry: '金融',
|
||||
challenge: '核心业务系统老化，无法满足监管合规和业务创新需求',
|
||||
solution: '分阶段实施核心系统替换，同时建设数据中台',
|
||||
result: '系统稳定性达到99.99%，新产品上线周期从月缩短至周',
|
||||
client: '某上市制造企业',
|
||||
industry: '制造业',
|
||||
challenge: '原有 ERP 系统已运行 8 年，无法支撑新业务模式',
|
||||
solution: '采用分步迁移策略，以数据中台为核心重构业务流程',
|
||||
result: '生产效率提升40%，决策效率提升3倍',
|
||||
},
|
||||
],
|
||||
dataProofs: [
|
||||
{ metric: '行业经验', value: '8年+', description: '深耕重点行业的经验' },
|
||||
{ metric: '方案交付', value: '30+', description: '累计交付的行业方案' },
|
||||
{ metric: '客户续约率', value: '85%', description: '长期合作客户占比' },
|
||||
{ metric: '准时交付率', value: '95%+', description: '严格的项目管理保障' },
|
||||
{ metric: '代码质量', value: 'A+', description: 'Code Review + 自动化测试' },
|
||||
{ metric: '平均响应时间', value: '<4小时', description: '工作日技术支持' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data',
|
||||
title: '技术服务',
|
||||
description: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
icon: 'BarChart3',
|
||||
overview: '让数据从"存着"变成"用着"。多源数据整合、可视化看板、预测模型，为经营决策提供可量化的洞察支撑。',
|
||||
features: [
|
||||
'系统集成与架构：企业级系统集成与架构设计',
|
||||
'数据中台建设：构建统一数据底座，打通数据孤岛',
|
||||
'云原生迁移：云原生架构设计与迁移服务',
|
||||
'研发效能提升：DevOps 体系建设与流程优化',
|
||||
'运维支持：7x24小时运维保障与技术支持',
|
||||
],
|
||||
benefits: [
|
||||
'发现隐藏的业务机会和风险',
|
||||
'提高决策的科学性和准确性',
|
||||
'优化业务流程，提升运营效率',
|
||||
'增强市场洞察力，把握市场趋势',
|
||||
],
|
||||
process: [
|
||||
'数据评估：评估数据质量和可用性',
|
||||
'平台搭建：构建数据中台与分析平台',
|
||||
'模型开发：开发数据分析模型与算法',
|
||||
'可视化展示：创建可视化仪表板与报表',
|
||||
'洞察挖掘：深入挖掘数据洞察与业务价值',
|
||||
'持续优化：持续优化分析模型与流程',
|
||||
],
|
||||
heroThemeId: 'service',
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某三甲医院',
|
||||
industry: '医疗健康',
|
||||
challenge: '医院各业务系统独立建设，数据分散，难以形成统一视图',
|
||||
solution: '构建医院数据中台，打通 20+ 业务系统数据',
|
||||
result: '决策效率提升10倍，数据准确率达99.9%',
|
||||
},
|
||||
],
|
||||
dataProofs: [
|
||||
{ metric: '数据源对接', value: '20+种', description: '数据库/文件/API等' },
|
||||
{ metric: '技术方案交付', value: '100+', description: '累计交付的技术方案' },
|
||||
{ metric: '系统可用率', value: '99.9%', description: '生产环境稳定性' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'solutions',
|
||||
title: 'AI 赋能',
|
||||
description: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
|
||||
icon: 'Puzzle',
|
||||
overview: 'AI 战略规划、大模型应用开发、智能流程自动化，帮助企业快速落地 AI 应用，释放智能化生产力。',
|
||||
features: [
|
||||
'AI 战略规划：AI 成熟度评估与落地路线图设计',
|
||||
'大模型应用开发：基于大模型的业务应用开发',
|
||||
'智能流程自动化：RPA + AI 智能自动化解决方案',
|
||||
'数据治理：AI 时代的数据治理与质量管理',
|
||||
'AI 模型训练：定制化 AI 模型训练与优化',
|
||||
],
|
||||
benefits: [
|
||||
'快速落地 AI 应用，释放智能化生产力',
|
||||
'降低 AI 落地门槛与试错成本',
|
||||
'获得端到端的 AI 解决方案',
|
||||
'持续获得 AI 技术前沿能力与支持',
|
||||
],
|
||||
process: [
|
||||
'AI 成熟度评估：全面评估企业 AI 应用现状与机会',
|
||||
'场景筛选：识别高价值 AI 应用场景',
|
||||
'原型验证：快速构建 AI 原型，验证可行性',
|
||||
'实施部署：分阶段实施，确保平稳落地',
|
||||
'效果评估：量化评估 AI 应用效果',
|
||||
'持续迭代：根据反馈持续优化 AI 能力',
|
||||
],
|
||||
heroThemeId: 'service',
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某教育科技集团',
|
||||
industry: '教育培训',
|
||||
challenge: '招生线索管理分散，营销活动效果难以追踪',
|
||||
solution: '建设集团统一 CRM 系统，引入 AI 营销自动化',
|
||||
result: '线索转化率提升45%，营销ROI提升2倍',
|
||||
},
|
||||
],
|
||||
dataProofs: [
|
||||
{ metric: 'AI 场景落地', value: '30+', description: '累计交付的AI场景方案' },
|
||||
{ metric: '效率提升', value: '85%', description: '平均流程效率提升' },
|
||||
{ metric: '客户满意度', value: '98%', description: 'AI项目客户满意度' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -59,9 +59,9 @@ export interface Solution {
|
||||
rationale: string;
|
||||
};
|
||||
// TODO: 初创企业暂无案例数据，待积累后填充
|
||||
caseStudies?: import('@/lib/constants/products').CaseStudy[];
|
||||
dataProofs?: import('@/lib/constants/products').DataProof[];
|
||||
certifications?: import('@/lib/constants/products').Certification[];
|
||||
caseStudies?: import('./cases').CaseStudy[];
|
||||
dataProofs?: import('./products').DataProof[];
|
||||
certifications?: import('./products').Certification[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -105,7 +105,7 @@ export const SOLUTIONS: Solution[] = [
|
||||
},
|
||||
{
|
||||
id: 'retail',
|
||||
industry: '零售业',
|
||||
industry: '贸易零售',
|
||||
title: '新零售数字化解决方案',
|
||||
subtitle: '线上线下融合，数据驱动增长',
|
||||
description: '帮助零售企业打通线上线下渠道，构建全渠道会员体系和精准营销能力，实现从经验驱动到数据驱动的经营模式升级。',
|
||||
@@ -139,7 +139,7 @@ export const SOLUTIONS: Solution[] = [
|
||||
},
|
||||
{
|
||||
id: 'education',
|
||||
industry: '教育行业',
|
||||
industry: '教育培训',
|
||||
title: '智慧教育解决方案',
|
||||
subtitle: '科技赋能教育，数据驱动教学',
|
||||
description: '为教育机构提供从招生管理到教学评估的全场景数字化解决方案，提升教学质量和运营效率。',
|
||||
@@ -205,4 +205,72 @@ export const SOLUTIONS: Solution[] = [
|
||||
rationale: 'ERP管理医院运营核心（财务/采购/库存），SDS优化药品和耗材供应链，配合软件开发定制医疗特色模块。',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'finance',
|
||||
industry: '金融服务',
|
||||
title: '金融数字化解决方案',
|
||||
subtitle: '合规驱动，数据赋能',
|
||||
description: '为银行、保险、证券等金融机构提供全链路数字化解决方案，助力业务创新与风控能力提升，在合规前提下实现数字化转型。',
|
||||
challenges: [
|
||||
'监管要求持续升级，合规管理成本高、效率低',
|
||||
'客户期望全渠道服务体验，传统渠道难以满足',
|
||||
'风险管控依赖人工经验，时效性和准确性不足',
|
||||
'数据孤岛严重，客户画像和精准营销难以落地',
|
||||
],
|
||||
solutions: [
|
||||
'建设合规管理系统，实现监管报表自动化和合规流程线上化',
|
||||
'搭建全渠道客户服务平台，统一客户视图和服务体验',
|
||||
'引入智能风控系统，基于机器学习提升风险识别准确率',
|
||||
'构建金融数据中台，支撑客户画像、精准营销和经营决策',
|
||||
],
|
||||
relatedProducts: ['bi', 'sds'],
|
||||
heroThemeId: 'solution',
|
||||
valueProposition: {
|
||||
headline: '合规与创新并重，数字化驱动金融升级',
|
||||
points: [
|
||||
{ icon: 'Shield', title: '合规提效', description: '监管报表自动化，合规流程线上化，降低合规成本' },
|
||||
{ icon: 'Users', title: '客户体验', description: '全渠道统一服务，提升客户满意度和留存率' },
|
||||
{ icon: 'TrendingUp', title: '智能风控', description: 'AI驱动风险识别，提升风控效率和准确性' },
|
||||
],
|
||||
},
|
||||
suiteCombination: {
|
||||
primaryProducts: ['bi', 'sds'],
|
||||
complementaryServices: ['data', 'software'],
|
||||
rationale: 'BI构建经营分析和监管报表体系，SDS支撑供应链金融和资产管理，数据服务助力风控模型和客户画像建设。',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'logistics',
|
||||
industry: '物流运输',
|
||||
title: '智慧物流解决方案',
|
||||
subtitle: '全链路可视，智能调度优化',
|
||||
description: '为物流运输企业提供从订单管理到运输调度的全流程数字化解决方案，实现运输全链路可视可控，降本增效。',
|
||||
challenges: [
|
||||
'运输过程不透明，货物追踪困难，客户体验差',
|
||||
'调度依赖人工经验，车辆空驶率高，运营成本居高不下',
|
||||
'仓储与运输协同不足，库存周转效率低',
|
||||
'数据分散在多个系统，经营决策缺乏数据支撑',
|
||||
],
|
||||
solutions: [
|
||||
'搭建运输管理系统（TMS），实现订单、调度、追踪全流程数字化',
|
||||
'引入智能调度算法，优化车辆配载和路径规划，降低空驶率',
|
||||
'建设仓储管理系统（WMS），打通仓储运输链路，提升库存周转率',
|
||||
'部署物流数据分析平台，实时监控运营指标，支撑精细化管理',
|
||||
],
|
||||
relatedProducts: ['erp', 'bi'],
|
||||
heroThemeId: 'solution',
|
||||
valueProposition: {
|
||||
headline: '全链路数字化，让物流更高效更透明',
|
||||
points: [
|
||||
{ icon: 'Truck', title: '全程可视', description: '订单-运输-签收全链路追踪，提升客户体验' },
|
||||
{ icon: 'Route', title: '智能调度', description: '算法优化配载和路径，降低运输成本' },
|
||||
{ icon: 'BarChart3', title: '数据驱动', description: '多维度运营分析，支撑精细化管理决策' },
|
||||
],
|
||||
},
|
||||
suiteCombination: {
|
||||
primaryProducts: ['erp', 'bi'],
|
||||
complementaryServices: ['software', 'data'],
|
||||
rationale: 'ERP管理财务和核心业务，BI提供运营分析和成本核算，配合软件开发定制TMS/WMS等物流特色模块。',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -4,8 +4,8 @@ export interface StatItem {
|
||||
}
|
||||
|
||||
export const STATS: StatItem[] = [
|
||||
{ value: '6', label: '研发产品' },
|
||||
{ value: '5+', label: '行业覆盖' },
|
||||
{ value: '10+', label: '团队成员' },
|
||||
{ value: '500+', label: '服务企业' },
|
||||
{ value: '6', label: '行业覆盖' },
|
||||
{ value: '200+', label: '专业顾问' },
|
||||
{ value: '12+', label: '年核心团队经验' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user