@ibiz-template/vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.131

package/src/util/screen-shot-util/screen-shot/icon/icon.tsx

@@ -0,0 +1,142 @@
+export const BrushIcon = (
+  <svg
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='72848'
+  >
+    <path
+      d='M1.704 971.096l77.824-281.16L746.568 23.12c30.992-30.992 70.944-30.64 101.76 0l152.56 152.544c30.64 30.648 30.992 70.592 0 101.76L334.192 944.4l-281.52 77.824c-38.744 8.096-58.888-12.048-50.968-51.136z m668.76-769.952l152.56 152.368 101.76-101.752c26.336-26.168 24.616-26 0-50.792l-101.76-101.584c-24.112-26-26.352-26-50.8 0l-101.76 101.76z m-483.488 483.28l152.552 152.552L772.056 404.48 619.496 251.92 186.976 684.432zM78.672 945.28l210.064-57.504-152.56-152.544-57.504 210.048z'
+      p-id='72849'
+    ></path>
+  </svg>
+);
+
+export const RectIcon = (
+  <svg
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='64858'
+  >
+    <path
+      d='M26.962385 997.037615v-970.07523h970.07523v970.07523h-970.07523z m913.011981-913.011981h-855.948732v855.948732h855.948732v-855.948732z'
+      p-id='64859'
+    ></path>
+  </svg>
+);
+
+export const CircleIcon = (
+  <svg
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='65871'
+  >
+    <path
+      d='M510.633 120.298c52.92 0 104.269 10.302 152.555 30.725 46.625 19.729 88.611 47.922 124.562 83.795 36.041 35.963 64.295 77.773 83.977 124.293 20.468 48.182 30.791 99.42 30.791 152.231 0 52.806-10.323 104.044-30.791 152.225-19.767 46.524-48.022 88.419-83.977 124.293-36.041 35.963-77.937 64.156-124.562 83.795-48.286 20.424-99.635 30.725-152.555 30.725-52.926 0-104.274-10.301-152.561-30.725-46.621-19.724-88.611-47.918-124.562-83.795-36.041-35.963-64.295-77.768-83.977-124.293-20.467-48.182-30.791-99.42-30.791-152.225 0-52.811 10.324-104.049 30.791-152.231 19.771-46.52 48.026-88.419 83.977-124.293 35.951-35.873 77.941-64.156 124.562-83.795 48.287-20.423 99.636-30.725 152.561-30.725m0-55.862c-247.382 0-447.873 200.058-447.873 446.905 0 246.842 200.491 446.9 447.873 446.9 247.377 0 447.868-200.058 447.868-446.9 0-246.847-200.491-446.905-447.868-446.905z m0 0'
+      p-id='65872'
+    ></path>
+  </svg>
+);
+
+export const MarkerIcon = (
+  <svg
+    preserveAspectRatio='none'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='55036'
+  >
+    <path
+      d='M512.01893 1.779421c-282.28432 0-511.110289 228.82597-511.110289 511.110289s228.82597 511.110289 511.110289 511.110289c282.26539 0 511.091359-228.82597 511.091359-511.110289S794.28432 1.779421 512.01893 1.779421zM512 986.139979c-261.366658 0-473.250268-211.88361-473.250268-473.250268 0-261.385588 211.88361-473.250268 473.250268-473.250268 261.385588 0 473.269198 211.88361 473.269198 473.250268C985.269198 774.237439 773.385588 986.139979 512 986.139979zM406.90058 399.309646l0 56.790032c40.207343-16.544829 71.574371-33.108589 94.063223-49.691278l0 269.752653 58.550523 0L559.514327 301.706511l-44.353015 0C502.118534 341.932784 466.037934 374.454542 406.90058 399.309646z'
+      p-id='55037'
+    ></path>
+  </svg>
+);
+
+export const TextIcon = (
+  <svg
+    preserveAspectRatio='none'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='17173'
+  >
+    <path
+      d='M832 896H730.56l-72.576-210.24H361.856L293.44 896H192l270.848-768h98.24L832 896zM629.504 598.976L522.112 279.68c-3.392-10.176-7.04-28.096-11.008-53.504H508.8c-3.392 23.168-7.232 40.96-11.456 53.504l-106.56 319.296h238.72z'
+      p-id='17174'
+    ></path>
+  </svg>
+);
+
+export const ArrowIcon = (
+  <svg
+    preserveAspectRatio='none'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='23296'
+  >
+    <path
+      d='M738.133333 256L230.4 763.733333l29.866667 29.866667L768 285.866667V554.666667h42.666667V213.333333h-341.333334v42.666667h268.8z'
+      p-id='23297'
+    ></path>
+  </svg>
+);
+
+export const AIIcon = (
+  <svg
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    preserveAspectRatio='none'
+    viewBox='0 0 1024 1024'
+  >
+    <path d='M274.344554 173.673875c16.429399 0 30.950568 8.00526 39.956484 20.338945a34.906655 34.906655 0 0 1 14.660796 15.754537l1.117013 2.815803 210.138065 597.927736c6.795162 19.268474-5.329083 40.817516-27.041022 48.147913-20.641469 6.95806-42.493035-1.419537-50.451753-18.803052l-1.117013-2.815803-54.477653-154.939008H134.997185L80.566074 837.039954c-6.771891 19.268474-29.856826 28.949253-51.568765 21.618855-20.641469-6.981331-32.602816-26.761769-27.925325-45.239025l0.861031-2.908888L212.047809 212.58316c4.025901-11.426112 13.799764-19.477914 25.598214-22.619512 9.029188-10.006575 22.107548-16.289773 36.67526-16.289773z m386.416675 169.460176c21.828295 0 39.723774 10.890876 41.469106 24.713912l0.116356 2.210755v461.652153c0 14.893506-18.616883 26.947938-41.585462 26.947938-21.805024 0-39.700503-10.890876-41.422565-24.737183l-0.162897-2.210755V370.081989c0-14.870235 18.616883-26.924667 41.585462-26.924667z m-389.697901-48.171184L163.620643 600.628812h214.88537l-107.442685-305.665945z m602.163076-206.181978a12.566396 12.566396 0 0 1 8.144887 8.051802l32.509731 99.041817 101.694723 36.07021a12.566396 12.566396 0 0 1-0.791218 23.922695l-99.53051 27.995137-30.857483 97.552467a12.566396 12.566396 0 0 1-23.899423 0.116355l-32.509732-99.018546-98.669479-31.322905a12.566396 12.566396 0 0 1-0.186169-23.876152l97.505924-32.812256 30.834212-97.529195a12.566396 12.566396 0 0 1 15.754537-8.191429zM649.544557 0.513593c2.676177 0.884302 4.770576 3.025243 5.608336 5.724692l18.523798 59.294772 60.970292 20.66474a8.796477 8.796477 0 0 1-0.325796 16.755194l-60.73758 18.058377-19.780438 59.550754a8.796477 8.796477 0 0 1-16.731924-0.162898l-18.523798-59.271501-59.062061-17.825665a8.796477 8.796477 0 0 1-0.395609-16.708653l59.574025-20.943993 19.780438-59.574025a8.796477 8.796477 0 0 1 11.100317-5.561794z'></path>
+  </svg>
+);
+
+export const MosaicIcon = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='73852'
+  >
+    <path
+      d='M512 64h448v896H64V64h448z m192 64h-192v384h384V128h-192zM320 512H128v384h384V512h-192z'
+      p-id='73853'
+    ></path>
+  </svg>
+);
+
+export const DrawdownIcon = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='80469'
+  >
+    <path
+      d='M341.333333 298.666667v170.666666L85.333333 256l256-213.333333v170.666666h213.333334a341.333333 341.333333 0 1 1 0 682.666667H170.666667v-85.333333h384a256 256 0 0 0 0-512H341.333333z'
+      p-id='80470'
+    ></path>
+  </svg>
+);
+
+export const CloseIcon = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='5023'
+  >
+    <path
+      d='M801.645714 170.666667l51.833905 51.590095L565.150476 511.951238l288.353524 289.670095-51.833905 51.614477-288.109714-289.450667L225.426286 853.23581 173.592381 801.621333l288.329143-289.670095L173.592381 222.256762 225.426286 170.666667l288.109714 289.426285L801.645714 170.666667z'
+      p-id='5024'
+    ></path>
+  </svg>
+);

package/src/util/screen-shot-util/screen-shot/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon';

package/src/util/screen-shot-util/screen-shot/index.ts

@@ -0,0 +1 @@
+export { ScreenShot } from './components';

package/src/util/screen-shot-util/screen-shot/module/draw-arrow.ts

@@ -0,0 +1,137 @@
+export class DrawArrow {
+  // 起始点与结束点
+  private beginPoint = { x: 0, y: 0 };
+
+  private stopPoint = { x: 0, y: 0 };
+
+  // 多边形的尺寸信息
+  private polygonVertex: Array<number> = [];
+
+  // 起点与X轴之间的夹角角度值
+  private angle = 0;
+
+  // 箭头信息
+  private arrowInfo = {
+    edgeLen: 50, // 箭头的头部长度
+    angle: 30, // 箭头的头部角度
+  };
+
+  /**
+   * 绘制箭头
+   * @param ctx 需要进行绘制的画布
+   * @param originX 鼠标按下时的x轴坐标
+   * @param originY 鼠标按下式的y轴坐标
+   * @param x 当前鼠标x轴坐标
+   * @param y 当前鼠标y轴坐标
+   * @param color 箭头颜色
+   */
+  public draw(
+    ctx: CanvasRenderingContext2D,
+    originX: number,
+    originY: number,
+    x: number,
+    y: number,
+    color: string,
+  ): void {
+    this.beginPoint.x = originX;
+    this.beginPoint.y = originY;
+    this.stopPoint.x = x;
+    this.stopPoint.y = y;
+    this.arrowCord(this.beginPoint, this.stopPoint);
+    this.sideCord();
+    this.drawArrow(ctx, color);
+  }
+
+  // 在画布上画出递增变粗的箭头
+  private drawArrow(ctx: CanvasRenderingContext2D, color: string): void {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(this.polygonVertex[0], this.polygonVertex[1]);
+    ctx.lineTo(this.polygonVertex[2], this.polygonVertex[3]);
+    ctx.lineTo(this.polygonVertex[4], this.polygonVertex[5]);
+    ctx.lineTo(this.polygonVertex[6], this.polygonVertex[7]);
+    ctx.lineTo(this.polygonVertex[8], this.polygonVertex[9]);
+    ctx.lineTo(this.polygonVertex[10], this.polygonVertex[11]);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  /**
+   * 设置箭头的相关绘制信息
+   * @param edgeLen 长度
+   * @param angle 角度
+   * @private
+   */
+  private setArrowInfo(edgeLen: number, angle: number): void {
+    this.arrowInfo.edgeLen = edgeLen;
+    this.arrowInfo.angle = angle;
+  }
+
+  // 计算箭头尺寸
+  private dynArrowSize(): void {
+    const x = this.stopPoint.x - this.beginPoint.x;
+    const y = this.stopPoint.y - this.beginPoint.y;
+    const length = Math.sqrt(x ** 2 + y ** 2);
+
+    if (length < 50) {
+      this.arrowInfo.edgeLen = length / 2;
+    } else if (length < 250) {
+      this.arrowInfo.edgeLen /= 2;
+    } else if (length < 500) {
+      this.arrowInfo.edgeLen = (this.arrowInfo.edgeLen * length) / 500;
+    }
+  }
+
+  // 计算起点与X轴之间的夹角角度值
+  private getRadian(
+    beginPoint: { x: number; y: number },
+    stopPoint: { x: number; y: number },
+  ): void {
+    this.angle =
+      (Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) /
+        Math.PI) *
+      180;
+
+    this.setArrowInfo(50, 30);
+    this.dynArrowSize();
+  }
+
+  // 计算箭头底边两个点位置信息
+  private arrowCord(
+    beginPoint: { x: number; y: number },
+    stopPoint: { x: number; y: number },
+  ): void {
+    this.polygonVertex[0] = beginPoint.x;
+    this.polygonVertex[1] = beginPoint.y;
+    this.polygonVertex[6] = stopPoint.x;
+    this.polygonVertex[7] = stopPoint.y;
+    this.getRadian(beginPoint, stopPoint);
+    this.polygonVertex[8] =
+      stopPoint.x -
+      this.arrowInfo.edgeLen *
+        Math.cos((Math.PI / 180) * (this.angle + this.arrowInfo.angle));
+    this.polygonVertex[9] =
+      stopPoint.y -
+      this.arrowInfo.edgeLen *
+        Math.sin((Math.PI / 180) * (this.angle + this.arrowInfo.angle));
+    this.polygonVertex[4] =
+      stopPoint.x -
+      this.arrowInfo.edgeLen *
+        Math.cos((Math.PI / 180) * (this.angle - this.arrowInfo.angle));
+    this.polygonVertex[5] =
+      stopPoint.y -
+      this.arrowInfo.edgeLen *
+        Math.sin((Math.PI / 180) * (this.angle - this.arrowInfo.angle));
+  }
+
+  // 计算另两个底边侧面点
+  private sideCord(): void {
+    const midpoint: { x: number; y: number } = { x: 0, y: 0 };
+    midpoint.x = (this.polygonVertex[4] + this.polygonVertex[8]) / 2;
+    midpoint.y = (this.polygonVertex[5] + this.polygonVertex[9]) / 2;
+    this.polygonVertex[2] = (this.polygonVertex[4] + midpoint.x) / 2;
+    this.polygonVertex[3] = (this.polygonVertex[5] + midpoint.y) / 2;
+    this.polygonVertex[10] = (this.polygonVertex[8] + midpoint.x) / 2;
+    this.polygonVertex[11] = (this.polygonVertex[9] + midpoint.y) / 2;
+  }
+}

package/src/util/screen-shot-util/screen-shot/module/draw-circle.ts

@@ -0,0 +1,48 @@
+/**
+ * @description 绘制圆形
+ * @export
+ * @param {CanvasRenderingContext2D} context 需要进行绘制的画布
+ * @param {number} mouseX 当前鼠标x轴坐标
+ * @param {number} mouseY 当前鼠标y轴坐标
+ * @param {number} mouseStartX 鼠标按下时的x轴坐标
+ * @param {number} mouseStartY 鼠标按下时的y轴坐标
+ * @param {number} borderWidth 边框宽度
+ * @param {string} color 边框颜色
+ */
+export function drawCircle(
+  context: CanvasRenderingContext2D,
+  mouseX: number,
+  mouseY: number,
+  mouseStartX: number,
+  mouseStartY: number,
+  borderWidth: number,
+  color: string,
+): void {
+  // 坐标边界处理，解决反向绘制椭圆时的报错问题
+  const startX = mouseX < mouseStartX ? mouseX : mouseStartX;
+  const startY = mouseY < mouseStartY ? mouseY : mouseStartY;
+  const endX = mouseX >= mouseStartX ? mouseX : mouseStartX;
+  const endY = mouseY >= mouseStartY ? mouseY : mouseStartY;
+  // 计算圆的半径
+  const radiusX = (endX - startX) * 0.5;
+  const radiusY = (endY - startY) * 0.5;
+  // 计算圆心的x、y坐标
+  const centerX = startX + radiusX;
+  const centerY = startY + radiusY;
+  // 开始绘制
+  context.save();
+  context.beginPath();
+  context.lineWidth = borderWidth;
+  context.strokeStyle = color;
+
+  if (typeof context.ellipse === 'function') {
+    // 绘制圆，旋转角度与起始角度都为0，结束角度为2*PI
+    context.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+  } else {
+    throw new Error('你的浏览器不支持ellipse，无法绘制椭圆');
+  }
+  context.stroke();
+  context.closePath();
+  // 结束绘制
+  context.restore();
+}

package/src/util/screen-shot-util/screen-shot/module/draw-mosaic.ts

@@ -0,0 +1,97 @@
+/**
+ * 获取图像指定坐标位置的颜色
+ * @param imgData 需要进行操作的图片
+ * @param x x点坐标
+ * @param y y点坐标
+ */
+const getAxisColor = (imgData: ImageData, x: number, y: number): number[] => {
+  const w = imgData.width;
+  const d = imgData.data;
+  const color = [];
+  color[0] = d[4 * (y * w + x)];
+  color[1] = d[4 * (y * w + x) + 1];
+  color[2] = d[4 * (y * w + x) + 2];
+  color[3] = d[4 * (y * w + x) + 3];
+  return color;
+};
+
+/**
+ * 设置图像指定坐标位置的颜色
+ * @param imgData 需要进行操作的图片
+ * @param x x点坐标
+ * @param y y点坐标
+ * @param color 颜色数组
+ */
+const setAxisColor = (
+  imgData: ImageData,
+  x: number,
+  y: number,
+  color: Array<number>,
+): void => {
+  const w = imgData.width;
+  const d = imgData.data;
+  d[4 * (y * w + x)] = color[0];
+  d[4 * (y * w + x) + 1] = color[1];
+  d[4 * (y * w + x) + 2] = color[2];
+  d[4 * (y * w + x) + 3] = color[3];
+};
+
+/**
+ * 绘制马赛克
+ *    实现思路：
+ *      1. 获取鼠标划过路径区域的图像信息
+ *      2. 将区域内的像素点绘制成周围相近的颜色
+ * @param mouseX 当前鼠标X轴坐标
+ * @param mouseY 当前鼠标Y轴坐标
+ * @param size 马赛克画笔大小
+ * @param degreeOfBlur 马赛克模糊度
+ * @param context 需要进行绘制的画布
+ */
+export function drawMosaic(
+  mouseX: number,
+  mouseY: number,
+  size: number,
+  degreeOfBlur: number,
+  context: CanvasRenderingContext2D,
+): void {
+  // 获取设备像素比
+  const dpr = window.devicePixelRatio || 1;
+  // 获取鼠标经过区域的图片像素信息
+  const imgData = context.getImageData(
+    mouseX * dpr,
+    mouseY * dpr,
+    size * dpr,
+    size * dpr,
+  );
+  // 获取图像宽高
+  const w = imgData.width;
+  const h = imgData.height;
+  // 等分图像宽高
+  const stepW = w / degreeOfBlur;
+  const stepH = h / degreeOfBlur;
+  // 循环画布像素点
+  for (let i = 0; i < stepH; i++) {
+    for (let j = 0; j < stepW; j++) {
+      // 随机获取一个小方格的随机颜色
+      const color = getAxisColor(
+        imgData,
+        j * degreeOfBlur + Math.floor(Math.random() * degreeOfBlur),
+        i * degreeOfBlur + Math.floor(Math.random() * degreeOfBlur),
+      );
+      // 循环小方格的像素点
+      for (let k = 0; k < degreeOfBlur; k++) {
+        for (let l = 0; l < degreeOfBlur; l++) {
+          // 设置小方格的颜色
+          setAxisColor(
+            imgData,
+            j * degreeOfBlur + l,
+            i * degreeOfBlur + k,
+            color,
+          );
+        }
+      }
+    }
+  }
+  // 渲染打上马赛克后的图像信息
+  context.putImageData(imgData, mouseX * dpr, mouseY * dpr);
+}

package/src/util/screen-shot-util/screen-shot/module/draw-pencil.ts

@@ -0,0 +1,45 @@
+/**
+ * @description 初始化画笔
+ * @export
+ * @param {CanvasRenderingContext2D} context
+ * @param {number} mouseX
+ * @param {number} mouseY
+ */
+export function initPencil(
+  context: CanvasRenderingContext2D,
+  mouseX: number,
+  mouseY: number,
+): void {
+  // 开始||清空一条路径
+  context.beginPath();
+  // 移动画笔位置
+  context.moveTo(mouseX, mouseY);
+}
+
+/**
+ * @description 绘制画笔
+ * @export
+ * @param {CanvasRenderingContext2D} context
+ * @param {number} mouseX
+ * @param {number} mouseY
+ * @param {number} size
+ * @param {string} color
+ */
+export function drawPencil(
+  context: CanvasRenderingContext2D,
+  mouseX: number,
+  mouseY: number,
+  size: number,
+  color: string,
+): void {
+  // 开始绘制
+  context.save();
+  // 设置边框大小
+  context.lineWidth = size;
+  // 设置边框颜色
+  context.strokeStyle = color;
+  context.lineTo(mouseX, mouseY);
+  context.stroke();
+  // 绘制结束
+  context.restore();
+}

package/src/util/screen-shot-util/screen-shot/module/draw-rectangle.ts

@@ -0,0 +1,32 @@
+/**
+ * @description 绘制矩形
+ * @export
+ * @param {number} mouseX
+ * @param {number} mouseY
+ * @param {number} width
+ * @param {number} height
+ * @param {string} color 边框颜色
+ * @param {number} borderWidth 边框大小
+ * @param {CanvasRenderingContext2D} context 需要进行绘制的canvas画布
+ */
+export function drawRectangle(
+  mouseX: number,
+  mouseY: number,
+  width: number,
+  height: number,
+  color: string,
+  borderWidth: number,
+  context: CanvasRenderingContext2D,
+): void {
+  context.save();
+  // 设置边框颜色
+  context.strokeStyle = color;
+  // 设置边框大小
+  context.lineWidth = borderWidth;
+  context.beginPath();
+  // 绘制矩形
+  context.rect(mouseX, mouseY, width, height);
+  context.stroke();
+  // 绘制结束
+  context.restore();
+}

package/src/util/screen-shot-util/screen-shot/module/draw-text.ts

@@ -0,0 +1,29 @@
+/**
+ * @description 绘制文本
+ * @export
+ * @param {string} text
+ * @param {number} mouseX
+ * @param {number} mouseY
+ * @param {string} color
+ * @param {number} fontSize
+ * @param {CanvasRenderingContext2D} context
+ */
+export function drawText(
+  text: string,
+  mouseX: number,
+  mouseY: number,
+  color: string,
+  fontSize: number,
+  context: CanvasRenderingContext2D,
+): void {
+  // 开始绘制
+  context.save();
+  context.lineWidth = 1;
+  // 设置字体颜色
+  context.fillStyle = color;
+  context.textBaseline = 'middle';
+  context.font = `bold ${fontSize}px none`;
+  context.fillText(text, mouseX, mouseY);
+  // 结束绘制
+  context.restore();
+}

package/src/util/screen-shot-util/screen-shot/module/index.ts

@@ -0,0 +1,6 @@
+export { drawPencil, initPencil } from './draw-pencil';
+export { drawText } from './draw-text';
+export { DrawArrow } from './draw-arrow';
+export { drawCircle } from './draw-circle';
+export { drawMosaic } from './draw-mosaic';
+export { drawRectangle } from './draw-rectangle';

package/src/util/screen-shot-util/screen-shot/type/index.ts

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-shadow */
+export enum ToolbarItemType {
+  BRUSH = 'brush', // 画笔工具
+  RECT = 'rect', // 矩形工具
+  CIRCLE = 'circle', // 圆形工具
+  MARKER = 'marker', // 标记类工具
+  TEXT = 'text', // 文本工具
+  ARROW = 'arrow', // 箭头工具
+  DIVIDER = 'divider', // 分割线
+  AI = 'ai', // AI功能
+  MOSAIC = 'mosaic', // 马赛克
+  DRAWDOWN = 'drawdown', // 回撤
+  CLOSE = 'close', // 关闭
+}
+
+/**
+ * @description 画笔配置信息
+ * @export
+ * @interface IBrushOption
+ */
+export interface IBrushOption {
+  /**
+   * @description 画笔大小
+   * @type {number}
+   * @memberof IBrushOption
+   */
+  size: number;
+  /**
+   * @description 画笔颜色
+   * @type {string}
+   * @memberof IBrushOption
+   */
+  color: string;
+}
+
+/**
+ * @description 工具项
+ * @export
+ * @interface IToolbarItem
+ */
+export interface IToolbarItem {
+  /**
+   * @description 项类型
+   * @type {ToolbarItemType}
+   * @memberof IToolbarItem
+   */
+  type: ToolbarItemType;
+
+  /**
+   * @description 图标组件（部分项可选，如分割线）
+   * @memberof IToolbarItem
+   */
+  icon?: any;
+
+  /**
+   * @description 显示文本
+   * @type {string}
+   * @memberof IToolbarItem
+   */
+  text?: string;
+
+  /**
+   * @description 大小配置
+   * @type {IData}
+   * @memberof IToolbarItem
+   */
+  sizeOpts?: IData[];
+
+  /**
+   * @description 大小
+   * @type {number}
+   * @memberof IToolbarItem
+   */
+  size?: number;
+
+  /**
+   * @description 颜色
+   * @type {string}
+   * @memberof IToolbarItem
+   */
+  color?: string;
+}
+
+/**
+ * @description 大小配置
+ * @export
+ * @interface ISizeOpt
+ */
+export interface ISizeOpt {
+  /**
+   * @description 值
+   * @type {number}
+   * @memberof ISizeOpt
+   */
+  value: number;
+  /**
+   * @description 类型
+   * @type {('small' | 'medium' | 'big')}
+   * @memberof ISizeOpt
+   */
+  type: 'small' | 'medium' | 'big';
+  /**
+   * @description 显示文本
+   * @type {string}
+   * @memberof ISizeOpt
+   */
+  text: string;
+}
+
+/**
+ * @description 鼠标位置（相对于画布）
+ * @export
+ * @interface IMousePosition
+ */
+export interface IMousePosition {
+  mouseX: number;
+  mouseY: number;
+}

package/src/util/screen-shot-util/screen-shot/util/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @description 获取鼠标位置
+ * @export
+ * @param {MouseEvent} event
+ * @returns {*}  {{
+ *   mouseX: number;
+ *   mouseY: number;
+ * }}
+ */
+export function getMousePosition(event: MouseEvent): {
+  mouseX: number;
+  mouseY: number;
+} {
+  const mouseX = event.offsetX > 0 ? event.offsetX : 0;
+  const mouseY = event.offsetY > 0 ? event.offsetY : 0;
+  return { mouseX, mouseY };
+}