chore: compatibility api

2025-03-31 16:21:40 +08:00
parent f9469a1ea3
commit bd6c689d91
24 changed files with 848 additions and 374 deletions
@@ -0,0 +1,80 @@
+import OverlayScroller from '@/components/overlay-scroller';
+import { WarningOutlined } from '@ant-design/icons';
+import { Tag, Tooltip } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import { EvaluateResult } from '../config/types';
+
+interface IncompatiableInfoProps {
+  data?: EvaluateResult;
+}
+
+const CompatibleTag = styled(Tag)`
+  border-radius: 4px;
+  margin-right: 0;
+`;
+
+const IncompatibleInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  ul {
+    margin: 0;
+    font-size: var(--font-size-small);
+    padding: 0;
+    padding-left: 16px;
+    color: var(--color-white-secondary);
+    list-style: none;
+    li {
+      position: relative;
+    }
+    li::before {
+      position: absolute;
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      left: -14px;
+      top: 8px;
+      border-radius: 50%;
+      background-color: var(--color-white-secondary);
+    }
+  }
+`;
+
+const SMTitle = styled.div<{ $isTitle?: boolean }>`
+  font-weight: ${(props) => (props.$isTitle ? 'bold' : 'normal')};
+  font-size: var(--font-size-small);
+`;
+const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
+  const { data } = props;
+  if (data?.compatible) {
+    return null;
+  }
+  return (
+    <Tooltip
+      overlayInnerStyle={{ paddingInline: 0 }}
+      title={
+        <OverlayScroller maxHeight={200}>
+          <IncompatibleInfo>
+            <SMTitle $isTitle={!!data?.scheduling_messages?.length}>
+              {data?.compatibility_messages}
+            </SMTitle>
+            {!!data?.scheduling_messages?.length && (
+              <ul>
+                {data?.scheduling_messages.map((item, index) => (
+                  <li key={index}>{item}</li>
+                ))}
+              </ul>
+            )}
+          </IncompatibleInfo>
+        </OverlayScroller>
+      }
+    >
+      <CompatibleTag icon={<WarningOutlined />} color="warning">
+        Incompatible
+      </CompatibleTag>
+    </Tooltip>
+  );
+};
+
+export default IncompatiableInfo;