51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { createReactBlockSpec } from "@blocknote/react";
|
|||
|
|
|
|||
|
|
export const progressBlock = createReactBlockSpec(
|
|||
|
|
{
|
|||
|
|
type: "progressMeter",
|
|||
|
|
propSchema: {
|
|||
|
|
percent: { default: 0, type: "number" },
|
|||
|
|
auto: { default: true, type: "boolean" },
|
|||
|
|
summary: { default: "", type: "string" },
|
|||
|
|
},
|
|||
|
|
content: "inline",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
render: ({ block, editor }) => {
|
|||
|
|
const percent = block.props.percent ?? 0;
|
|||
|
|
const handleToggle = () => {
|
|||
|
|
editor.updateBlock(block, { props: { auto: !block.props.auto } });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleBarClick = () => {
|
|||
|
|
if (block.props.auto) return;
|
|||
|
|
const input = window.prompt("设置进度（0-100）", percent.toString());
|
|||
|
|
if (!input) return;
|
|||
|
|
const value = Number.parseInt(input, 10);
|
|||
|
|
if (Number.isNaN(value)) return;
|
|||
|
|
editor.updateBlock(block, {
|
|||
|
|
props: { percent: Math.min(100, Math.max(0, value)) },
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="wolai-progress">
|
|||
|
|
<div className="wolai-progress__header">
|
|||
|
|
<span className="wolai-progress__summary">{block.props.summary || "暂无条目"}</span>
|
|||
|
|
<button type="button" className="wolai-progress__mode" onClick={handleToggle}>
|
|||
|
|
{block.props.auto ? "自动" : "手动"}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="wolai-progress__bar" onClick={handleBarClick}>
|
|||
|
|
<div className="wolai-progress__fill" style={{ width: `${percent}%` }} />
|
|||
|
|
</div>
|
|||
|
|
<span className="wolai-progress__percent">{percent}%</span>
|
|||
|
|
<div className="wolai-progress__description" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
)();
|