Skip to content

Commit e934e88

Browse files
1ssqq1lxr1ssqq1lxr
committed
问题修复
1 parent eeeab03 commit e934e88

3 files changed

Lines changed: 209 additions & 38 deletions

File tree

‎src/components/IndustrySolutions.tsx‎

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Card, CardContent } from "@/components/ui/card";
2+
import { ArrowRight, CheckCircle2 } from "lucide-react";
23
import { useTranslation } from "react-i18next";
34
import { getHomepageLocale, homepageContent } from "@/lib/homepageContent";
45

@@ -13,26 +14,97 @@ const IndustrySolutions = () => {
1314
<p className="mb-3 text-sm font-semibold uppercase tracking-normal text-primary">
1415
{content.solutions.eyebrow}
1516
</p>
16-
<h2 className="text-3xl font-bold leading-tight [overflow-wrap:anywhere] md:text-5xl">
17+
<h2 className="mx-auto max-w-full text-3xl font-bold leading-tight [overflow-wrap:anywhere] [word-break:break-word] md:text-5xl">
1718
{content.solutions.title}
1819
</h2>
1920
<p className="mx-auto mt-5 max-w-[29ch] text-base leading-8 text-muted-foreground [overflow-wrap:anywhere] sm:max-w-none md:text-lg">
2021
{content.solutions.subtitle}
2122
</p>
2223
</div>
2324

24-
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
25+
<div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
2526
{content.solutions.items.map((solution) => {
2627
const SolutionIcon = solution.icon;
2728

2829
return (
29-
<Card key={solution.title} className="border-border/70 bg-card/80 shadow-card">
30-
<CardContent className="p-6">
31-
<SolutionIcon className="h-8 w-8 text-primary" />
32-
<h3 className="mt-6 text-xl font-semibold">{solution.title}</h3>
33-
<p className="mt-4 text-sm leading-7 text-muted-foreground">
30+
<Card
31+
key={solution.title}
32+
className="group overflow-hidden border-border/70 bg-card/80 shadow-card transition-colors hover:border-primary/60"
33+
>
34+
<div className="aspect-[16/9] border-b border-border/60 bg-background/45">
35+
<img
36+
src={solution.visual}
37+
alt={solution.title}
38+
className="h-full w-full object-cover"
39+
loading="lazy"
40+
/>
41+
</div>
42+
<CardContent className="p-6 md:p-7">
43+
<div className="flex flex-wrap items-start justify-between gap-4">
44+
<div className="min-w-0">
45+
<p className="text-sm font-semibold uppercase tracking-normal text-primary">
46+
{solution.caseLabel}
47+
</p>
48+
<h3 className="mt-3 text-2xl font-bold leading-tight [overflow-wrap:anywhere]">
49+
{solution.title}
50+
</h3>
51+
</div>
52+
<div className="flex h-12 w-12 shrink-0 items-center justify-center bg-gradient-primary text-primary-foreground shadow-primary">
53+
<SolutionIcon className="h-6 w-6" />
54+
</div>
55+
</div>
56+
57+
<p className="mt-5 text-sm leading-7 text-muted-foreground">
58+
{solution.scenario}
59+
</p>
60+
<p className="mt-3 text-sm leading-7 text-foreground/88">
3461
{solution.description}
3562
</p>
63+
64+
<div className="mt-6 flex flex-wrap items-center gap-2">
65+
{solution.flow.map((step, index) => (
66+
<div key={step} className="flex items-center gap-2">
67+
<span className="border border-border/70 bg-background/50 px-3 py-2 text-xs text-muted-foreground">
68+
{step}
69+
</span>
70+
{index < solution.flow.length - 1 && (
71+
<ArrowRight className="h-4 w-4 text-primary/75" />
72+
)}
73+
</div>
74+
))}
75+
</div>
76+
77+
<div className="mt-6 grid grid-cols-1 gap-2 sm:grid-cols-3">
78+
{solution.metrics.map((metric) => (
79+
<div
80+
key={metric}
81+
className="border border-border/70 bg-secondary/35 p-3 text-sm font-semibold leading-6 text-foreground"
82+
>
83+
{metric}
84+
</div>
85+
))}
86+
</div>
87+
88+
<div className="mt-6 grid grid-cols-1 gap-3 md:grid-cols-[1fr_auto] md:items-end">
89+
<div className="space-y-3">
90+
{solution.outcomes.map((outcome) => (
91+
<div key={outcome} className="flex gap-3 text-sm leading-6 text-muted-foreground">
92+
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
93+
<span>{outcome}</span>
94+
</div>
95+
))}
96+
</div>
97+
<div className="flex flex-wrap gap-2 md:justify-end">
98+
{solution.products.map((product) => (
99+
<span
100+
key={product}
101+
className="border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary"
102+
>
103+
{product}
104+
</span>
105+
))}
106+
</div>
107+
</div>
36108
</CardContent>
37109
</Card>
38110
);

‎src/lib/homepageContent.ts‎

Lines changed: 128 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
Activity,
33
BarChart3,
44
Boxes,
5-
Building2,
65
CheckCircle2,
76
CloudCog,
87
Cpu,
@@ -196,34 +195,82 @@ export const homepageContent = {
196195
],
197196
},
198197
solutions: {
199-
eyebrow: "Solutions",
200-
title: "Show the suite by business scenario, not only by technology",
198+
eyebrow: "Industry cases",
199+
title: "Real IoT industry cases",
201200
subtitle:
202-
"The homepage now speaks to the buying contexts seen on industrial IoT, infrastructure, and enterprise SaaS websites.",
201+
"Reference cases from connected vehicles, renewable energy, robot fleets, and factory edge collection show how Halia, FluxMQ, and FCP fit into production systems.",
203202
items: [
204203
{
205-
title: "Smart manufacturing",
204+
title: "Connected vehicle data platform",
205+
caseLabel: "Large automotive group · vehicle telemetry and control",
206+
scenario:
207+
"Vehicle terminals continuously report periodic, event, and statistical data. Regional and national data centers need stable access, validation, routing, and service integration.",
206208
description:
207-
"Collect PLC and equipment data, publish events, and monitor factory-side message flows.",
208-
icon: Factory,
209+
"FluxMQ acts as the vehicle access gateway, carrying GB/T32960, JT/T808, MQTT, HTTP, and private TCP/UDP traffic into TSP services, data platforms, and control APIs.",
210+
flow: ["T-BOX / IVI", "FluxMQ cluster", "Rule engine", "Kafka / API", "TSP services"],
211+
metrics: ["100K-class vehicle concurrency", "Million-level message architecture", "Offline message + API command delivery"],
212+
outcomes: [
213+
"Unified vehicle admission and data forwarding",
214+
"Low-latency two-way communication for app control",
215+
"Safer integration with certification, ACL, and service APIs",
216+
],
217+
products: ["FluxMQ", "FCP"],
218+
visual: "/solution-animations/vehicle-data.svg",
219+
icon: Gauge,
209220
},
210221
{
211-
title: "Energy and utilities",
222+
title: "Renewable energy operations",
223+
caseLabel: "Distributed photovoltaic and energy assets",
224+
scenario:
225+
"Remote stations are widely distributed, operating conditions are harsh, and generation, device status, alarms, and forecasts need to be visible without increasing field work.",
212226
description:
213-
"Connect remote stations, keep device telemetry flowing, and centralize cluster operations.",
227+
"FluxMQ uses clustered access, TLS authentication, per-device topics, and Kafka bridging to keep telemetry flowing into monitoring, diagnosis, and forecasting systems.",
228+
flow: ["PV devices", "TLS access", "FluxMQ cluster", "Kafka bridge", "Monitoring / forecast"],
229+
metrics: ["2M+ connected devices", "7-node production cluster", "Per-device topic model"],
230+
outcomes: [
231+
"Remote monitoring and diagnosis across stations",
232+
"High-throughput persistence without data backlog",
233+
"Lower on-site inspection and operating cost",
234+
],
235+
products: ["FluxMQ", "FCP"],
236+
visual: "/solution-animations/energy-station.svg",
214237
icon: Zap,
215238
},
216239
{
217-
title: "Connected equipment",
240+
title: "Robot and smart equipment fleets",
241+
caseLabel: "Garden robots and export-oriented equipment",
242+
scenario:
243+
"Robot products combine sensors, cameras, voice, text, and private protocols. Edge rules and cloud analytics must work together across markets and networks.",
218244
description:
219-
"Bridge device fleets into applications with MQTT, HTTP, Kafka, and time-series storage.",
220-
icon: Gauge,
245+
"Halia normalizes edge inputs, NodeMQ handles local messaging, and FluxMQ carries fleet data to Kafka, big data, and business systems for real-time and offline analysis.",
246+
flow: ["Sensors / camera", "Halia", "NodeMQ", "FluxMQ", "Kafka / big data"],
247+
metrics: ["Edge stream processing", "Private protocol access", "Real-time + offline data paths"],
248+
outcomes: [
249+
"Clear separation between edge collection and cloud services",
250+
"Flexible data rules for robot scenarios",
251+
"A reusable cloud-edge pattern for smart hardware fleets",
252+
],
253+
products: ["Halia", "NodeMQ", "FluxMQ"],
254+
visual: "/solution-animations/robot-fleet.svg",
255+
icon: Cpu,
221256
},
222257
{
223-
title: "Multi-tenant platforms",
258+
title: "Digital factory edge collection",
259+
caseLabel: "Industrial equipment, PLC, CNC, and SCADA integration",
260+
scenario:
261+
"Factory systems need to collect equipment data, filter invalid payloads, transform point models, and deliver clean streams to platforms, storage, and applications.",
224262
description:
225-
"Use projects, applications, licenses, proxy access, and audit trails for customer isolation.",
226-
icon: Building2,
263+
"Halia connects industrial protocols and runs edge rules, FluxMQ delivers MQTT data streams, and FCP keeps clusters, access, alerts, and audit trails manageable.",
264+
flow: ["PLC / CNC", "Halia rules", "FluxMQ", "FCP", "SCADA / analytics"],
265+
metrics: ["Modbus / OPC UA / IEC104", "Edge filtering and calculation", "MQTT / HTTP / Kafka delivery"],
266+
outcomes: [
267+
"Reduced cloud bandwidth and storage pressure",
268+
"Faster protocol onboarding across sites",
269+
"Operational visibility for rules, connections, and alarms",
270+
],
271+
products: ["Halia", "FluxMQ", "FCP"],
272+
visual: "/solution-animations/factory-edge.svg",
273+
icon: Factory,
227274
},
228275
],
229276
},
@@ -401,30 +448,82 @@ export const homepageContent = {
401448
],
402449
},
403450
solutions: {
404-
eyebrow: "解决方案",
405-
title: "用业务场景讲清产品价值，而不只展示技术点",
451+
eyebrow: "行业案例",
452+
title: "真实物联网行业案例",
406453
subtitle:
407-
"新版首页参考工业物联网、基础设施与企业 SaaS 官网的表达方式，把产品放进真实采购与落地语境。",
454+
"结合车联网、新能源、智能机器人与数字化工厂案例，把 Halia、FluxMQ、FCP 放进真实的接入链路、运维模型和业务结果里。",
408455
items: [
409456
{
410-
title: "智能制造",
411-
description: "采集 PLC 与设备数据，发布事件，并监控工厂侧消息链路。",
412-
icon: Factory,
457+
title: "智能网联汽车数据平台",
458+
caseLabel: "华中大型车企 · 新能源数据采集与车控链路",
459+
scenario:
460+
"车端持续上报周期数据、事件数据与统计数据，平台需要同时对接企业、属地和国家数据中心，并保障车辆准入、监管和业务应用的稳定接入。",
461+
description:
462+
"FluxMQ 承担车辆接入网关，承载 GB/T32960、JT/T808、MQTT、HTTP 与私有 TCP/UDP 流量，将车端数据送入 TSP、数据平台与车控 API。",
463+
flow: ["T-BOX / 车机", "FluxMQ 集群", "规则引擎", "Kafka / API", "TSP 业务"],
464+
metrics: ["10 万级车辆并发接入", "百万级消息吞吐架构", "离线消息 + API 指令下发"],
465+
outcomes: [
466+
"统一车辆准入、监管数据转发与业务数据分发",
467+
"支持 App 远程控车的低时延双向通信",
468+
"通过认证、ACL 与服务 API 降低系统集成风险",
469+
],
470+
products: ["FluxMQ", "FCP"],
471+
visual: "/solution-animations/vehicle-data.svg",
472+
icon: Gauge,
413473
},
414474
{
415-
title: "能源与公用事业",
416-
description: "接入远程站点，保持设备遥测持续流转，并集中管理集群。",
475+
title: "新能源场站远程运营",
476+
caseLabel: "分布式光伏与新能源资产监控",
477+
scenario:
478+
"新能源设备分布离散、位置偏远、环境复杂，企业需要实时掌握发电、状态、告警、诊断与预测信息，减少现场巡检压力。",
479+
description:
480+
"FluxMQ 通过集群接入、TLS 安全认证、一设备一 Topic 与 Kafka 桥接，把设备遥测稳定送入监控、诊断、预测和存储系统。",
481+
flow: ["光伏 / 逆变器", "TLS 接入", "FluxMQ 集群", "Kafka 桥接", "监控 / 预测"],
482+
metrics: ["200 万+设备连接", "7 节点生产集群", "一设备一 Topic 模型"],
483+
outcomes: [
484+
"实现跨场站远程监控与远程诊断",
485+
"高吞吐持久化，桥接数据不积压",
486+
"降低现场运营、排障和巡检成本",
487+
],
488+
products: ["FluxMQ", "FCP"],
489+
visual: "/solution-animations/energy-station.svg",
417490
icon: Zap,
418491
},
419492
{
420-
title: "联网设备平台",
421-
description: "通过 MQTT、HTTP、Kafka 与时序存储，把设备群接入业务应用。",
422-
icon: Gauge,
493+
title: "智能机器人与出海设备",
494+
caseLabel: "园林机器人、智能硬件与海外业务链路",
495+
scenario:
496+
"机器人设备同时包含传感器、摄像头、语音、文本和私有协议数据，需要边缘规则、云端消息和离线分析协同工作。",
497+
description:
498+
"Halia 负责边缘输入规范化，NodeMQ 承载本地消息，FluxMQ 将设备数据送入 Kafka、大数据和业务系统，形成实时与离线并行的数据链路。",
499+
flow: ["传感器 / 摄像头", "Halia", "NodeMQ", "FluxMQ", "Kafka / 大数据"],
500+
metrics: ["边缘流式处理", "私有协议接入", "实时 + 离线数据通路"],
501+
outcomes: [
502+
"边端采集与云端业务解耦",
503+
"按机器人场景灵活下发和调整数据规则",
504+
"形成可复用的智能硬件云边一体架构",
505+
],
506+
products: ["Halia", "NodeMQ", "FluxMQ"],
507+
visual: "/solution-animations/robot-fleet.svg",
508+
icon: Cpu,
423509
},
424510
{
425-
title: "多租户 IoT 平台",
426-
description: "用项目、应用、License、代理访问与审计能力实现客户隔离。",
427-
icon: Building2,
511+
title: "数字化工厂边缘采集",
512+
caseLabel: "PLC、CNC、SCADA 与工业现场数据接入",
513+
scenario:
514+
"工厂需要接入多类设备协议，过滤无效数据，转换点位模型，并把干净的数据流交付给平台、存储、可视化和分析应用。",
515+
description:
516+
"Halia 接入工业协议并执行边缘规则，FluxMQ 承载 MQTT 数据流转，FCP 统一管理集群、访问、告警与审计。",
517+
flow: ["PLC / CNC", "Halia 规则", "FluxMQ", "FCP", "SCADA / 分析"],
518+
metrics: ["Modbus / OPC UA / IEC104", "边缘过滤与计算", "MQTT / HTTP / Kafka 输出"],
519+
outcomes: [
520+
"降低云端带宽、存储和计算压力",
521+
"让多站点协议接入更快复用",
522+
"统一观察规则、连接、告警和审计事件",
523+
],
524+
products: ["Halia", "FluxMQ", "FCP"],
525+
visual: "/solution-animations/factory-edge.svg",
526+
icon: Factory,
428527
},
429528
],
430529
},

‎src/pages/Solutions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const Solutions = () => {
1818
eyebrow={content.solutions.eyebrow}
1919
title={
2020
locale === "zh"
21-
? "典型落地场景"
22-
: "Deployment scenarios"
21+
? "行业案例"
22+
: "Industry cases"
2323
}
2424
subtitle={content.solutions.subtitle}
2525
image="/site-assets/solutions-command-center.webp"

0 commit comments

Comments
 (0)