会议预定记录钟表盘展示功能怎么实现？

用 svg，path 绘制圆弧：

import { Fragment } from "react";
import "./assets/app.scss";

const a = (n: number) => Array.from({ length: n });

export default function App() {
  const r = 190,
    d = new Date(),
    x = (rad: number) => 250 + Math.sin(2 * Math.PI * rad) * r,
    y = (rad: number) => 250 - Math.cos(2 * Math.PI * rad) * r,
    times: [[number, number?], [number, number?]][] = [
      [[8], [10]],
      [[10], [11, 10]],
      [[14], [15, 10]],
      [[17], [19]],
    ];

  return (
    <svg width="500" height="500">
      <circle id="main-circle" cx="250" cy="250" r={r} />

      {times.map((t, i) => {
        const w = 25,
          d = w / 2 / (2 * Math.PI * r);
        let [r1, r2] = t.map(
          ([a, b]: [number, number?]) => a / 24 + (b ?? 0) / (60 * 24)
        );
        r1 += d;
        r2 -= d;
        return (
          <path
            key={i}
            className="arc"
            stroke="orange"
            strokeWidth={w}
            fill="transparent"
            strokeLinecap="round"
            d={`M ${x(r1)} ${y(r1)} A ${r} ${r} 0 0 1 ${x(r2)} ${y(r2)}`}
          />
        );
      })}

      {a(8).map((_, i) => (
        <text key={i} className="num" x={x(i / 8)} y={y(i / 8)}>
          {i * 3}
        </text>
      ))}

      {a(24).map((_, i) =>
        i % 3 ? (
          <circle key={i} r="3" fill="white" cx={x(i / 24)} cy={y(i / 24)} />
        ) : (
          <Fragment key={i} />
        )
      )}

      <text id="t" x="250" y="300">
        {d.toLocaleTimeString(undefined, {
          hour: "2-digit",
          minute: "2-digit",
        })}
      </text>

      <text id="d" x="250" y="330">
        {d.toLocaleDateString()}
      </text>
    </svg>
  );
}

#root {
  svg {
    background: #6a6a6a;

    #main-circle {
      stroke: #888888;
      fill: transparent;
      stroke-width: 25px;
    }

    .num,
    #d,
    #t {
      fill: white;
      font-family: sans-serif;
      text-anchor: middle;
      alignment-baseline: middle;
      // translate: -50% -50%;
      // font-size: 10px;
    }

    #t {
      font-size: 40px;
    }
    #d {
      font-size: 30px;
    }
  }
}