feat: benchmark detail page

src/pages/benchmark/components/compare-conditions.tsx

@@ -0,0 +1,49 @@
+import { useHover } from 'ahooks';
+import { Popover } from 'antd';
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--ant-color-border);
+  border-radius: 4px;
+  padding: 8.5px 11px;
+  height: 40px;
+  width: 240px;
+  cursor: pointer;
+  &:hover {
+    border-color: var(--ant-color-primary-hover);
+  }
+  &:active {
+    box-shadow: var(--ant-input-active-shadow);
+  }
+  .holder {
+    color: var(--ant-color-text-placeholder);
+  }
+`;
+const CompareConditions: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isHovering = useHover(containerRef);
+
+  return (
+    <Popover
+      trigger={'click'}
+      content="Compare Conditions Content"
+      arrow={false}
+      placement="bottom"
+      styles={{
+        root: {
+          width: '240px'
+        }
+      }}
+    >
+      <Container>
+        <span className="holder">Compare Filter</span>
+      </Container>
+    </Popover>
+  );
+};
+
+export default CompareConditions;

src/pages/benchmark/components/configure/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useDetailContext } from '../../config/detail-context';
+
+const Configure: React.FC = () => {
+  const { detailData } = useDetailContext();
+  return <div>Configure Content</div>;
+};
+
+export default Configure;

src/pages/benchmark/components/environment/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useDetailContext } from '../../config/detail-context';
+
+const Environment: React.FC = () => {
+  const { detailData } = useDetailContext();
+  return <div>Environment Content</div>;
+};
+
+export default Environment;

src/pages/benchmark/components/left-actions.tsx

@@ -0,0 +1,44 @@
+import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Input, Space } from 'antd';
+import React from 'react';
+import CompareConditions from './compare-conditions';
+
+export interface RightActionsProps {
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSearch: () => void;
+}
+
+const RightActions: React.FC<RightActionsProps> = ({
+  handleInputChange,
+  handleSearch
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Space>
+      <Input
+        prefix={
+          <SearchOutlined
+            style={{ color: 'var(--ant-color-text-placeholder)' }}
+          ></SearchOutlined>
+        }
+        placeholder={intl.formatMessage({
+          id: 'common.filter.name'
+        })}
+        style={{ width: 230 }}
+        allowClear
+        onChange={handleInputChange}
+      ></Input>
+      <CompareConditions></CompareConditions>
+      <Button
+        type="text"
+        style={{ color: 'var(--ant-color-text-tertiary)' }}
+        onClick={handleSearch}
+        icon={<SyncOutlined></SyncOutlined>}
+      ></Button>
+    </Space>
+  );
+};
+
+export default RightActions;

src/pages/benchmark/components/logs/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useDetailContext } from '../../config/detail-context';
+
+const Logs: React.FC = () => {
+  const { id } = useDetailContext();
+  return <div>Logs Content</div>;
+};
+
+export default Logs;

src/pages/benchmark/components/right-actions.tsx

@@ -11,7 +11,6 @@ export interface RightActionsProps {
   handleDeleteByBatch: () => void;
   handleClickPrimary?: () => void;
   handleSettingFields?: () => void;
-  handleCompare?: () => void;
   buttonText?: string;
   rowSelection: {
     selectedRowKeys: React.Key[];
@@ -21,7 +20,6 @@ export interface RightActionsProps {
 const RightActions: React.FC<RightActionsProps> = ({
   handleDeleteByBatch,
   handleClickPrimary,
-  handleCompare,
   handleSettingFields,
   buttonText,
   rowSelection
@@ -31,9 +29,6 @@ const RightActions: React.FC<RightActionsProps> = ({
   return (
     <Space size={16}>
       <Button onClick={handleSettingFields} icon={<SettingOutlined />}></Button>
-      <Button variant="solid" color="orange" onClick={handleCompare}>
-        Compare
-      </Button>
       <Button
         icon={<PlusOutlined></PlusOutlined>}
         type="primary"

src/pages/benchmark/components/summary/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useDetailContext } from '../../config/detail-context';
+
+const Summary: React.FC = () => {
+  const { detailData } = useDetailContext();
+  return <div>Summary Content</div>;
+};
+
+export default Summary;