chore: pluggable locale config

2025-10-13 14:40:26 +08:00
parent caabeb065a
commit b5fa40047a
30 changed files with 731 additions and 575 deletions
@@ -0,0 +1,185 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import BaseSelect from '@/components/seal-form/base/select';
+import ThemeTag from '@/components/tags-wrapper/theme-tag';
+import { useIntl } from '@umijs/max';
+import { Empty } from 'antd';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { frameworks, getGpuColor } from '../config';
+import { VersionListItem } from '../config/types';
+
+const ItemWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--ant-border-radius);
+  padding: 12px 16px;
+  &:hover {
+    background-color: var(--ant-color-fill-tertiary);
+  }
+  .title {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+  }
+`;
+
+const RowWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  .label {
+    color: var(--ant-color-text-tertiary);
+  }
+  .drivers {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+`;
+
+const InfoItem = styled.div`
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px;
+  .label {
+    color: var(--ant-color-text-tertiary);
+  }
+`;
+
+const ListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+`;
+
+const FilterBox = styled.div`
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  padding-bottom: 16px;
+  padding-top: 16px;
+  background-color: var(--ant-color-bg-container);
+`;
+
+interface VersionItemProps {
+  data: VersionListItem;
+}
+
+export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
+  const intl = useIntl();
+  return (
+    <ItemWrapper>
+      <div className="title">
+        <span>{data.version_no}</span>
+        {data.is_built_in && (
+          <ThemeTag
+            color="geekblue"
+            className="font-400"
+            style={{ marginRight: 0 }}
+          >
+            {intl.formatMessage({ id: 'backend.builtin' })}
+          </ThemeTag>
+        )}
+      </div>
+      <RowWrapper>
+        {data.image_name && (
+          <InfoItem>
+            <span className="label">
+              {intl.formatMessage({ id: 'backend.imageName' })}:
+            </span>
+            <AutoTooltip ghost minWidth={20}>
+              {data.is_built_in
+                ? 'Selected dynamically at runtime'
+                : data.image_name}
+            </AutoTooltip>
+          </InfoItem>
+        )}
+        {data.run_command && (
+          <InfoItem>
+            <span className="label">
+              {intl.formatMessage({ id: 'backend.runCommand' })}:
+            </span>
+            <AutoTooltip ghost minWidth={20}>
+              {data.run_command}
+            </AutoTooltip>
+          </InfoItem>
+        )}
+        <InfoItem>
+          <span className="label">
+            {intl.formatMessage({ id: 'backend.framework' })}:
+          </span>
+          <span className="text drivers">
+            {data.availableFrameworks?.map((item) => {
+              return (
+                <ThemeTag
+                  key={item}
+                  style={{ marginRight: 0 }}
+                  color={getGpuColor(item)}
+                >
+                  {item}
+                </ThemeTag>
+              );
+            })}
+          </span>
+        </InfoItem>
+      </RowWrapper>
+    </ItemWrapper>
+  );
+};
+
+const VersionList: React.FC<{ versionConfigs: VersionListItem[] }> = ({
+  versionConfigs
+}) => {
+  const intl = useIntl();
+  const [dataList, setDataList] = useState<VersionListItem[]>(versionConfigs);
+
+  const handleChange = (value: string) => {
+    if (value) {
+      const filtered = versionConfigs.filter((item) =>
+        item.availableFrameworks?.includes(value)
+      );
+      setDataList(filtered);
+    } else {
+      setDataList(versionConfigs);
+    }
+  };
+
+  return (
+    <div>
+      <FilterBox>
+        <BaseSelect
+          allowClear
+          placeholder={intl.formatMessage({ id: 'backend.filter.framework' })}
+          options={frameworks}
+          style={{ width: '100%' }}
+          onChange={handleChange}
+        />
+      </FilterBox>
+      <ListWrapper>
+        {dataList.length ? (
+          dataList.map((version: VersionListItem, index: number) => {
+            return <VersionItem key={index} data={version} />;
+          })
+        ) : (
+          <Empty
+            style={{ width: '100%' }}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description="Data not found"
+          />
+        )}
+      </ListWrapper>
+    </div>
+  );
+};
+
+export default VersionList;