使用react 组件或库实现这个需求；绘制横向条状显示整个磁盘，并显示分区大小；支持鼠标拖动控制分区容量大小，同时支持输入大小精准控制分区大小；最终效果类似diskgenius 磁盘分区大小调整组件 效果

React 组件或库可以使用 React-vis 或者 Recharts 来实现这个需求。以下是一个使用 React-vis 实现的例子：
import React, { useState } from 'react';
import { XYPlot, VerticalBarSeries, Hint, HorizontalGridLines, XAxis, YAxis } from 'react-vis';
import 'react-vis/dist/style.css';

const data = [
{ x: 0, y: 20, label: 'Partition 1' },
{ x: 20, y: 30, label: 'Partition 2' },
{ x: 50, y: 10, label: 'Partition 3' },
];

const DiskPartition = () => {
const [hintValue, setHintValue] = useState(null);
const [dragging, setDragging] = useState(false);
const [draggedPartition, setDraggedPartition] = useState(null);

const handleValueMouseOver = (value) => {
setHintValue(value);
};

const handleValueMouseOut = () => {
setHintValue(null);
};

const handlePartitionMouseDown = (partition) => {
setDragging(true);
setDraggedPartition(partition);
};

const handlePartitionMouseMove = (event) => {
if (dragging && draggedPartition) {
const { pageX } = event;
const newWidth = pageX - event.target.getBoundingClientRect().x;
const newPartition = { ...draggedPartition, y: newWidth };
const newData = data.map((partition) =>
partition.label === draggedPartition.label ? newPartition : partition
);
setDraggedPartition(newPartition);
data = newData;
}
};

const handlePartitionMouseUp = () => {
setDragging(false);
setDraggedPartition(null);
};

const handlePartitionTouchStart = (partition) => {
setDragging(true);
setDraggedPartition(partition);
};

const handlePartitionTouchMove = (event) => {
if (dragging && draggedPartition) {
const { touches } = event;
const { target } = event;
const newWidth = touches[0].pageX - target.getBoundingClientRect().x;
const newPartition = { ...draggedPartition, y: newWidth };
const newData = data.map((partition) =>
partition.label === draggedPartition.label ? newPartition : partition
);
setDraggedPartition(newPartition);
data = newData;
}
};

const handlePartitionTouchEnd = () => {
setDragging(false);
setDraggedPartition(null);
};

return (
<div
onMouseUp={handlePartitionMouseUp}
onTouchEnd={handlePartitionTouchEnd}
className="disk-partition"
>
<XYPlot height={200} width={400} margin={{ left: 50, right: 20, top: 10, bottom: 40 }}>
<HorizontalGridLines />
<XAxis title="Disk space (GB)" />
<YAxis title="Partition" tickFormat={(d) => `Partition ${d + 1}`} />
<VerticalBarSeries
data={data}
onValueMouseOver={handleValueMouseOver}
onValueMouseOut={handleValueMouseOut}
onValueMouseDown={handlePartitionMouseDown}
onValueMouseMove={handlePartitionMouseMove}
onValueTouchStart={handlePartitionTouchStart}
onValueTouchMove={handlePartitionTouchMove}
/>
{hintValue &amp;&amp; (
<Hint value={hintValue}>
<div className="hint">
<div>{hintValue.label}</div>
<div>
{hintValue.y} GB ({Math.round((hintValue.y / 100) * 100)}%)
</div>
</div>
</Hint>
)}
</XYPlot>
</div>
);
};

export default DiskPartition;
登录后复制
这个组件使用了 React-vis 库来绘制横向条状图，同时支持鼠标拖动和输入大小精准控制分区大小。你可以根据自己的需求对这个组件进行修改和定制。