Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 

98 строки
3.2 KiB

  1. /*
  2. Copyright (C) 2025 QuantumNous
  3. This program is free software: you can redistribute it and/or modify
  4. it under the terms of the GNU Affero General Public License as
  5. published by the Free Software Foundation, either version 3 of the
  6. License, or (at your option) any later version.
  7. This program is distributed in the hope that it will be useful,
  8. but WITHOUT ANY WARRANTY; without even the implied warranty of
  9. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  10. GNU Affero General Public License for more details.
  11. You should have received a copy of the GNU Affero General Public License
  12. along with this program. If not, see <https://www.gnu.org/licenses/>.
  13. For commercial licensing, please contact support@quantumnous.com
  14. */
  15. import React from 'react';
  16. import { Typography } from '@douyinfe/semi-ui';
  17. import {
  18. IconLayers,
  19. IconActivity,
  20. IconHistogram,
  21. } from '@douyinfe/semi-icons';
  22. import { useTranslation } from 'react-i18next';
  23. const { Title, Text } = Typography;
  24. const WorkflowSection = () => {
  25. const { t } = useTranslation();
  26. const steps = [
  27. {
  28. number: '01',
  29. icon: <IconLayers style={{ fontSize: 20 }} />,
  30. title: t('接入配置'),
  31. description: t('在控制台创建渠道、设置密钥与限额,导入模型列表。'),
  32. },
  33. {
  34. number: '02',
  35. icon: <IconActivity style={{ fontSize: 20 }} />,
  36. title: t('智能调度'),
  37. description: t('根据健康度、延迟与价格自动选择最优模型通道,内置故障切换。'),
  38. },
  39. {
  40. number: '03',
  41. icon: <IconHistogram style={{ fontSize: 20 }} />,
  42. title: t('持续洞察'),
  43. description: t('通过仪表盘追踪调用趋势、消耗与失败率,实时告警确保 SLO。'),
  44. },
  45. ];
  46. return (
  47. <section className="home-snap-section bg-[var(--semi-color-bg-0)]">
  48. <div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
  49. {/* 标题区域 */}
  50. <div>
  51. <Text className="text-sm uppercase tracking-widest text-semi-color-text-2">
  52. {t('工作流')}
  53. </Text>
  54. <Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">
  55. {t('用 3 个步骤构建你的 AI 控制平面')}
  56. </Title>
  57. </div>
  58. {/* 步骤卡片 */}
  59. <div className="mt-10 grid gap-6 md:grid-cols-3">
  60. {steps.map((step, index) => (
  61. <div key={index} className="workflow-card">
  62. {/* 图标 */}
  63. <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">
  64. {step.icon}
  65. </div>
  66. {/* 步骤编号 */}
  67. <span className="workflow-step-number">{step.number}</span>
  68. {/* 标题 */}
  69. <Title heading={3} className="text-lg font-semibold">
  70. {step.title}
  71. </Title>
  72. {/* 描述 */}
  73. <p className="text-sm leading-relaxed text-semi-color-text-1">
  74. {step.description}
  75. </p>
  76. </div>
  77. ))}
  78. </div>
  79. </div>
  80. </section>
  81. );
  82. };
  83. export default WorkflowSection;