Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

112 linhas
3.1 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 { SideSheet, Typography, Button } from '@douyinfe/semi-ui';
  17. import { IconClose } from '@douyinfe/semi-icons';
  18. import { useIsMobile } from '../../../../hooks/common/useIsMobile';
  19. import ModelHeader from './components/ModelHeader';
  20. import ModelBasicInfo from './components/ModelBasicInfo';
  21. import ModelEndpoints from './components/ModelEndpoints';
  22. import ModelPricingTable from './components/ModelPricingTable';
  23. import ModelCodeSnippet from './components/ModelCodeSnippet';
  24. const { Text } = Typography;
  25. const ModelDetailSideSheet = ({
  26. visible,
  27. onClose,
  28. modelData,
  29. groupRatio,
  30. currency,
  31. tokenUnit,
  32. displayPrice,
  33. showRatio,
  34. usableGroup,
  35. vendorsMap,
  36. endpointMap,
  37. autoGroups,
  38. t,
  39. }) => {
  40. const isMobile = useIsMobile();
  41. return (
  42. <SideSheet
  43. placement='right'
  44. title={
  45. <ModelHeader modelData={modelData} vendorsMap={vendorsMap} t={t} />
  46. }
  47. bodyStyle={{
  48. padding: '0',
  49. display: 'flex',
  50. flexDirection: 'column',
  51. borderBottom: '1px solid var(--semi-color-border)',
  52. }}
  53. visible={visible}
  54. width={isMobile ? '100%' : 600}
  55. closeIcon={
  56. <Button
  57. className='semi-button-tertiary semi-button-size-small semi-button-borderless'
  58. type='button'
  59. icon={<IconClose />}
  60. onClick={onClose}
  61. />
  62. }
  63. onCancel={onClose}
  64. >
  65. <div className='p-2'>
  66. {!modelData && (
  67. <div className='flex justify-center items-center py-10'>
  68. <Text type='secondary'>{t('加载中...')}</Text>
  69. </div>
  70. )}
  71. {modelData && (
  72. <>
  73. <ModelBasicInfo
  74. modelData={modelData}
  75. vendorsMap={vendorsMap}
  76. t={t}
  77. />
  78. <ModelEndpoints
  79. modelData={modelData}
  80. endpointMap={endpointMap}
  81. t={t}
  82. />
  83. <ModelPricingTable
  84. modelData={modelData}
  85. groupRatio={groupRatio}
  86. currency={currency}
  87. tokenUnit={tokenUnit}
  88. displayPrice={displayPrice}
  89. showRatio={showRatio}
  90. usableGroup={usableGroup}
  91. autoGroups={autoGroups}
  92. t={t}
  93. />
  94. <ModelCodeSnippet modelData={modelData} t={t} />
  95. </>
  96. )}
  97. </div>
  98. </SideSheet>
  99. );
  100. };
  101. export default ModelDetailSideSheet;