feat: add backend pages

2025-10-13 14:40:26 +08:00
parent 1a693f70ac
commit e863b84016
18 changed files with 500 additions and 10 deletions
@@ -0,0 +1,86 @@
+import DropDownActions from '@/components/drop-down-actions';
+import IconFont from '@/components/icon-font';
+import Card from '@/components/templates/card';
+import { Button } from 'antd';
+import styled from 'styled-components';
+import { backendActions } from '../config';
+import { ListItem } from '../config/types';
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 12x;
+  gap: 16px;
+  .title {
+    color: var(--ant-color-text);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+`;
+
+interface BackendCardProps {
+  onClick: (data: any) => void;
+  onSelect?: (item: any) => void;
+  data: ListItem;
+}
+
+const BackendCard: React.FC<BackendCardProps> = ({
+  onClick,
+  data,
+  onSelect
+}) => {
+  return (
+    <Card
+      onClick={() => onClick(data)}
+      clickable={true}
+      disabled={false}
+      height={205}
+      ghost
+      header={
+        <Header>
+          <div className="title">
+            <img src={data.icon} alt={data.backend_name} height={20} />
+          </div>
+          <span>
+            <DropDownActions
+              menu={{
+                items: backendActions,
+                onClick: onSelect
+              }}
+            >
+              <Button
+                icon={<IconFont type="icon-more"></IconFont>}
+                size="small"
+                type="text"
+              ></Button>
+            </DropDownActions>
+          </span>
+        </Header>
+      }
+    >
+      <Content>
+        <div className="title">{data.backend_name}</div>
+        <div>This is a description</div>
+        <div>默认版本：{data.default_version}</div>
+        <div>
+          镜像：{data.version_configs?.[data.default_version]?.image_name}
+        </div>
+      </Content>
+    </Card>
+  );
+};
+
+export default BackendCard;
@@ -0,0 +1,108 @@
+import CardSkeleton from '@/components/templates/card-skelton';
+import breakpoints from '@/config/breakpoints';
+import { Col, FloatButton, Row, Spin } from 'antd';
+import _ from 'lodash';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import BackendCard from './backend-card';
+
+const SpinWrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  max-height: 400px;
+  right: 0;
+  .skelton-wrapper {
+    width: 100%;
+  }
+`;
+
+interface BackendListProps {
+  defaultSpan?: number;
+  resizable?: boolean;
+  dataList: any[];
+  loading: boolean;
+  activeId: Global.WithFalse<number>;
+  isFirst: boolean;
+}
+
+const InnerSkeleton: React.FC<{
+  span: number;
+}> = (props) => {
+  return <CardSkeleton {...props} />;
+};
+
+const ListSkeleton: React.FC<{
+  span: number;
+  loading: boolean;
+  isFirst: boolean;
+}> = ({ span, loading, isFirst }) => {
+  return (
+    <div>
+      {loading && (
+        <SpinWrapper>
+          <Spin
+            spinning={loading}
+            style={{
+              width: '100%'
+            }}
+            wrapperClassName="skelton-wrapper"
+          >
+            {isFirst && <InnerSkeleton span={span}></InnerSkeleton>}
+          </Spin>
+        </SpinWrapper>
+      )}
+    </div>
+  );
+};
+
+const CardList: React.FC<BackendListProps> = (props) => {
+  const {
+    dataList,
+    loading,
+    isFirst,
+    defaultSpan = 6,
+    resizable = true
+  } = props;
+  const [span, setSpan] = React.useState(defaultSpan);
+
+  const getSpanByWidth = (width: number) => {
+    if (width < breakpoints.md) return 24;
+    if (width < breakpoints.lg) return 12;
+    return 6;
+  };
+
+  const handleResize = useCallback(
+    _.throttle((size: { width: number; height: number }) => {
+      setSpan(getSpanByWidth(size.width));
+    }, 100),
+    []
+  );
+
+  return (
+    <div className="relative" style={{ width: '100%' }}>
+      <ResizeObserver onResize={handleResize} disabled={!resizable}>
+        <div style={{ width: '100%' }}>
+          <Row gutter={[16, 16]}>
+            {dataList.map((item: any) => {
+              return (
+                <Col span={span} key={item.id}>
+                  <BackendCard onClick={() => {}} data={item} />
+                </Col>
+              );
+            })}
+          </Row>
+          <ListSkeleton span={span} loading={loading} isFirst={isFirst} />
+        </div>
+      </ResizeObserver>
+      <FloatButton.BackTop visibilityHeight={1000} />
+    </div>
+  );
+};
+
+export default CardList;