dros/src/pages/view/components/MeasurementPanel.tsx

import React from 'react';
import { Layout, Button, Typography, Divider, Flex } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { switchToOperationPanel } from '../../../states/panelSwitchSliceForView';
import Icon from '@/components/Icon';
import '@/themes/truncateText.css';

const { Header, Content } = Layout;
const { Title, Text } = Typography;

const FunctionButton = ({
  title,
  action,
  iconName,
  productId,
}: {
  title: string;
  action: string;
  iconName: string;
  productId?: string;
}) => {
  const handleMeasurementAction = (action: string) => {
    console.log(`执行测量操作: ${action}`);
    // 这里可以添加具体的测量逻辑
  };

  return (
    <Button
      onClick={() => handleMeasurementAction(action)}
      icon={
        iconName ? (
          <Icon
            productId={productId}
            module="module-process"
            name={iconName}
            userId="base"
            theme="default"
            size="2x"
            state="normal"
          />
        ) : undefined
      }
      style={{
        width: '1.5rem',
        height: '1.5rem',
        padding: 0,
      }}
      title={title}
      className="truncate-text"
    >
      {/* {title} */}
    </Button>
  );
};

const MeasurementPanel = () => {
  const dispatch = useDispatch();

  const handleReturn = () => {
    dispatch(switchToOperationPanel());
  };

  return (
    <Layout className="h-full">
      {/* 顶部导航栏 */}
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '0 16px',
        }}
      >
        <Button
          type="text"
          icon={<ArrowLeftOutlined />}
          onClick={handleReturn}
        />
        <Title level={5} style={{ margin: 0, lineHeight: '48px' }}>
          图像测量
        </Title>
      </Header>

      {/* 主体内容 */}
      <Content
        style={{ padding: '16px', maxHeight: '100%', overflowY: 'auto' }}
      >
        {/* 基础测量组 */}
        <div style={{ marginBottom: '24px' }}>
          <Text
            strong
            style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
          >
            基础测量
          </Text>
          <Flex wrap gap="small" align="center" justify="start" className="p-1">
            <FunctionButton
              title="线段测量"
              action="线段测量"
              iconName="btn_LineMeasurement"
            />
            <FunctionButton
              title="角度测量"
              action="角度测量"
              iconName="btn_AngleMeasurement"
            />
            <FunctionButton
              title="清除测量"
              action="清除测量"
              iconName="btn_ClearMeasurement"
            />
            <FunctionButton
              title="测量校正"
              action="测量校正"
              iconName="MeasurementCalibration"
            />
          </Flex>
          <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
            说明：要选择测量标记，即线段测量标记
          </div>
        </div>

        <Divider />

        {/* 专业测量组 */}
        <div style={{ marginBottom: '24px' }}>
          <Text
            strong
            style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
          >
            专业测量
          </Text>
          <Flex wrap gap="small" align="center" justify="start" className="p-1">
            <FunctionButton
              title="Cobb角"
              action="Cobb角"
              iconName="CobbAngle"
            />
          </Flex>
        </div>

        <Divider />

        {/* 宠物专用测量组 */}
        <div style={{ marginBottom: '24px' }}>
          <Text
            strong
            style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
          >
            宠物专用测量
          </Text>
          <Flex wrap gap="small" align="center" justify="start" className="p-1">
            <FunctionButton
              title="髋臼水平角"
              action="髋臼水平角"
              iconName="btn_DAR"
              productId="animal"
            />
            <FunctionButton
              title="胫骨平台夹角"
              action="胫骨平台夹角"
              iconName=""
            />
            <FunctionButton
              title="髋关节牵引指数"
              action="髋关节牵引指数"
              iconName=""
            />
            <FunctionButton
              title="髋关节水平角"
              action="髋关节水平角"
              iconName=""
            />
            <FunctionButton title="心锥比" action="心锥比" iconName="" />
            <FunctionButton
              title="胫骨平台骨切开术"
              action="胫骨平台骨切开术"
              iconName=""
            />
            <FunctionButton
              title="胫骨结节前移术"
              action="胫骨结节前移术"
              iconName=""
            />
            <FunctionButton
              title="胫骨结节前移术5点测量法"
              action="胫骨结节前移术5点测量法"
              iconName=""
            />
            <FunctionButton
              title="水平截骨术"
              action="水平截骨术"
              iconName=""
            />
            <FunctionButton
              title="股骨头覆盖率"
              action="股骨头覆盖率"
              iconName=""
            />
            <FunctionButton
              title="髋臼背覆盖"
              action="髋臼背覆盖"
              iconName=""
            />
            <FunctionButton
              title="拆线长度测量"
              action="拆线长度测量"
              iconName=""
            />
            <FunctionButton
              title="多边形长度测量"
              action="多边形长度测量"
              iconName=""
            />
            <FunctionButton title="找圆心" action="找圆心" iconName="" />
            <FunctionButton title="找中线" action="找中线" iconName="" />
            <FunctionButton title="找中点" action="找中点" iconName="" />
            <FunctionButton
              title="直线垂直倾斜度"
              action="直线垂直倾斜度"
              iconName=""
            />
            <FunctionButton
              title="直线水平倾斜度"
              action="直线水平倾斜度"
              iconName=""
            />
            <FunctionButton
              title="矩形区域灰度"
              action="矩形区域灰度"
              iconName=""
            />
            <FunctionButton title="直线灰度" action="直线灰度" iconName="" />
          </Flex>
        </div>
      </Content>
    </Layout>
  );
};

export default MeasurementPanel;