|
- /*
- Copyright (C) 2025 QuantumNous
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-
- For commercial licensing, please contact support@quantumnous.com
- */
-
- import React from 'react';
- import { Typography } from '@douyinfe/semi-ui';
- import {
- IconLayers,
- IconActivity,
- IconHistogram,
- } from '@douyinfe/semi-icons';
- import { useTranslation } from 'react-i18next';
-
- const { Title, Text } = Typography;
-
- const WorkflowSection = () => {
- const { t } = useTranslation();
-
- const steps = [
- {
- number: '01',
- icon: <IconLayers style={{ fontSize: 20 }} />,
- title: t('接入配置'),
- description: t('在控制台创建渠道、设置密钥与限额,导入模型列表。'),
- },
- {
- number: '02',
- icon: <IconActivity style={{ fontSize: 20 }} />,
- title: t('智能调度'),
- description: t('根据健康度、延迟与价格自动选择最优模型通道,内置故障切换。'),
- },
- {
- number: '03',
- icon: <IconHistogram style={{ fontSize: 20 }} />,
- title: t('持续洞察'),
- description: t('通过仪表盘追踪调用趋势、消耗与失败率,实时告警确保 SLO。'),
- },
- ];
-
- return (
- <section className="home-snap-section bg-[var(--semi-color-bg-0)]">
- <div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
- {/* 标题区域 */}
- <div>
- <Text className="text-sm uppercase tracking-widest text-semi-color-text-2">
- {t('工作流')}
- </Text>
- <Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">
- {t('用 3 个步骤构建你的 AI 控制平面')}
- </Title>
- </div>
-
- {/* 步骤卡片 */}
- <div className="mt-10 grid gap-6 md:grid-cols-3">
- {steps.map((step, index) => (
- <div key={index} className="workflow-card">
- {/* 图标 */}
- <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[rgba(99,102,241,0.12)] text-semi-color-primary transition-transform duration-300">
- {step.icon}
- </div>
-
- {/* 步骤编号 */}
- <span className="workflow-step-number">{step.number}</span>
-
- {/* 标题 */}
- <Title heading={3} className="text-lg font-semibold">
- {step.title}
- </Title>
-
- {/* 描述 */}
- <p className="text-sm leading-relaxed text-semi-color-text-1">
- {step.description}
- </p>
- </div>
- ))}
- </div>
- </div>
- </section>
- );
- };
-
- export default WorkflowSection;
|