eli-video-interview 1.2.42-alpha.67 → 1.2.42-alpha.68

package/esm/modules/ai-report-v2/components/AIEvaluate/Graph.js

@@ -1,3 +1,14 @@
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -87,8 +98,10 @@ function isInPath(x, y, rect, ctx) {
 }
 var drawTop = function (layout, ctx) {
     // 设置全局样式
-    var leftLableWidth = layout.leftLableWidth, height = layout.height, topLableHeight = layout.topLableHeight;
+    var leftLableWidth = layout.leftLableWidth, height = layout.height;
     var offset = leftLableWidth;
+    var lineEndY = height - 40; // 虚线结束位置，距离底部40px
+    var scoreTextY = height - 25; // 分数文字的Y位置，距离底部25px
     levelOrder.forEach(function (level, i) {
         var _a = levelConf[level], width = _a.width, gradient = _a.gradient, label = _a.label, fontColor = _a.fontColor;
         // 绘制渐变背景
@@ -102,15 +115,15 @@ var drawTop = function (layout, ctx) {
         ctx.fillStyle = fontColor;
         ctx.fillText(label, offset + width / 2 - labelWidth / 2, 18);
         // 绘制垂直虚线
-        drawVerticalDashedLine(ctx, offset - 1, 0, height + topLableHeight - 54, 2, 2);
+        drawVerticalDashedLine(ctx, offset - 1, 0, lineEndY, 2, 2);
         // 绘制分数文本
         ctx.fillStyle = '#4CAF50';
-        ctx.fillText("".concat(levelOrderScore[i]), offset - (i === 0 ? 5 : 9), height + topLableHeight - 40);
+        ctx.fillText("".concat(levelOrderScore[i]), offset - (i === 0 ? 5 : 9), scoreTextY);
         offset += width + 1;
         // 绘制结束的虚线和文本 '100'
         if (i === levelOrder.length - 1) {
-            drawVerticalDashedLine(ctx, offset - 2, 0, height + topLableHeight - 54, 2, 2);
-            ctx.fillText('100', offset - 2 - 24, height + topLableHeight - 40);
+            drawVerticalDashedLine(ctx, offset - 2, 0, lineEndY, 2, 2);
+            ctx.fillText('100', offset - 2 - 24, scoreTextY);
         }
     });
 };
@@ -183,11 +196,11 @@ var draw = function (layout, dimensions, pathRef, ctx) {
         // 绘制圆角矩形
         var borderRadius = 12;
         var x = layout.leftLableWidth;
-        var y = 50 + 40 * i;
+        var y = 50 + layout.itemSpacing * i;
         // 设置背景颜色
         ctx.fillStyle = config.backgroundColor;
         drawRoundedRect(x, y, MAX_WIDTH, MAX_HEIGHT, borderRadius, true, false, ctx);
-        var endPointY = 65 + layout.itemSpacing * i;
+        var endPointY = 50 + 15 + layout.itemSpacing * i; // 50是顶部偏移，15是文字相对矩形的偏移
         drawLable(v.name, 0, endPointY, ctx);
         pathRef.push({ x: 0, y: y, width: layout.leftLableWidth, height: 22, tips: "".concat(v.name, ": ").concat(v.score) });
         var score = v.score === 0 ? 0 : Math.max(v.score, 4);
@@ -200,16 +213,54 @@ var draw = function (layout, dimensions, pathRef, ctx) {
     });
     drawTop(layout, ctx);
 };
+function hookCanvasContext(ctx) {
+    var e_1, _a;
+    var methods = Object.getOwnPropertyNames(Object.getPrototypeOf(ctx)).filter(function (k) { return typeof ctx[k] === 'function'; });
+    var _loop_1 = function (method) {
+        var original = ctx[method];
+        ctx[method] = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            console.log("[Canvas2D] ".concat(method, "(").concat(args.map(function (a) { return JSON.stringify(a); }).join(', '), ")"));
+            return original.apply(this, args);
+        };
+    };
+    try {
+        for (var methods_1 = __values(methods), methods_1_1 = methods_1.next(); !methods_1_1.done; methods_1_1 = methods_1.next()) {
+            var method = methods_1_1.value;
+            _loop_1(method);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (methods_1_1 && !methods_1_1.done && (_a = methods_1.return)) _a.call(methods_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
 var Graph = function (_a) {
     var _b = _a.items, items = _b === void 0 ? [] : _b;
     var ref = useRef(null);
     var pathRef = useRef([]);
     var _c = __read(useState(), 2), ctx = _c[0], setCtx = _c[1];
-    var height = useMemo(function () { return 36 * items.length + 50 + 35; }, [items]);
+    // 统一间距配置
+    var ITEM_SPACING = 40;
+    var TOP_OFFSET = 50;
+    var BOTTOM_SPACING = 20; // 最后一个item与虚线之间的间距
+    var SCORE_AREA_HEIGHT = 40; // 分数区域的高度
+    var height = useMemo(function () {
+        if (items.length === 0)
+            return 0;
+        return TOP_OFFSET + (items.length - 1) * ITEM_SPACING + MAX_HEIGHT + BOTTOM_SPACING + SCORE_AREA_HEIGHT;
+    }, [items]);
     useEffect(function () {
         if (items.length === 0)
             return;
         var currentCtx = setupCanvas(ref.current);
+        hookCanvasContext(currentCtx);
         setCtx(currentCtx);
         tipEl.style.background = 'rgba(0,0,0,.7)';
         tipEl.style.color = '#fff';
@@ -232,13 +283,13 @@ var Graph = function (_a) {
             var layout = {
                 leftLableWidth: 140,
                 topLableHeight: 40,
-                itemSpacing: 40,
+                itemSpacing: ITEM_SPACING,
                 height: height,
             };
             pathRef.current = [];
             draw(layout, items, pathRef.current, ctx);
         }
-    }, [ctx, items, height]);
+    }, [ctx, items, height, ITEM_SPACING]);
     // useEffect(() => {
     //   console.log(pathRef);
     // }, [pathRef]);

package/lib/modules/ai-report-v2/components/AIEvaluate/Graph.js

@@ -1,4 +1,15 @@
 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -90,8 +101,10 @@ function isInPath(x, y, rect, ctx) {
 }
 var drawTop = function (layout, ctx) {
     // 设置全局样式
-    var leftLableWidth = layout.leftLableWidth, height = layout.height, topLableHeight = layout.topLableHeight;
+    var leftLableWidth = layout.leftLableWidth, height = layout.height;
     var offset = leftLableWidth;
+    var lineEndY = height - 40; // 虚线结束位置，距离底部40px
+    var scoreTextY = height - 25; // 分数文字的Y位置，距离底部25px
     levelOrder.forEach(function (level, i) {
         var _a = levelConf[level], width = _a.width, gradient = _a.gradient, label = _a.label, fontColor = _a.fontColor;
         // 绘制渐变背景
@@ -105,15 +118,15 @@ var drawTop = function (layout, ctx) {
         ctx.fillStyle = fontColor;
         ctx.fillText(label, offset + width / 2 - labelWidth / 2, 18);
         // 绘制垂直虚线
-        drawVerticalDashedLine(ctx, offset - 1, 0, height + topLableHeight - 54, 2, 2);
+        drawVerticalDashedLine(ctx, offset - 1, 0, lineEndY, 2, 2);
         // 绘制分数文本
         ctx.fillStyle = '#4CAF50';
-        ctx.fillText("".concat(levelOrderScore[i]), offset - (i === 0 ? 5 : 9), height + topLableHeight - 40);
+        ctx.fillText("".concat(levelOrderScore[i]), offset - (i === 0 ? 5 : 9), scoreTextY);
         offset += width + 1;
         // 绘制结束的虚线和文本 '100'
         if (i === levelOrder.length - 1) {
-            drawVerticalDashedLine(ctx, offset - 2, 0, height + topLableHeight - 54, 2, 2);
-            ctx.fillText('100', offset - 2 - 24, height + topLableHeight - 40);
+            drawVerticalDashedLine(ctx, offset - 2, 0, lineEndY, 2, 2);
+            ctx.fillText('100', offset - 2 - 24, scoreTextY);
         }
     });
 };
@@ -187,11 +200,11 @@ var draw = function (layout, dimensions, pathRef, ctx) {
         // 绘制圆角矩形
         var borderRadius = 12;
         var x = layout.leftLableWidth;
-        var y = 50 + 40 * i;
+        var y = 50 + layout.itemSpacing * i;
         // 设置背景颜色
         ctx.fillStyle = config.backgroundColor;
         drawRoundedRect(x, y, MAX_WIDTH, MAX_HEIGHT, borderRadius, true, false, ctx);
-        var endPointY = 65 + layout.itemSpacing * i;
+        var endPointY = 50 + 15 + layout.itemSpacing * i; // 50是顶部偏移，15是文字相对矩形的偏移
         drawLable(v.name, 0, endPointY, ctx);
         pathRef.push({ x: 0, y: y, width: layout.leftLableWidth, height: 22, tips: "".concat(v.name, ": ").concat(v.score) });
         var score = v.score === 0 ? 0 : Math.max(v.score, 4);
@@ -204,16 +217,54 @@ var draw = function (layout, dimensions, pathRef, ctx) {
     });
     drawTop(layout, ctx);
 };
+function hookCanvasContext(ctx) {
+    var e_1, _a;
+    var methods = Object.getOwnPropertyNames(Object.getPrototypeOf(ctx)).filter(function (k) { return typeof ctx[k] === 'function'; });
+    var _loop_1 = function (method) {
+        var original = ctx[method];
+        ctx[method] = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            console.log("[Canvas2D] ".concat(method, "(").concat(args.map(function (a) { return JSON.stringify(a); }).join(', '), ")"));
+            return original.apply(this, args);
+        };
+    };
+    try {
+        for (var methods_1 = __values(methods), methods_1_1 = methods_1.next(); !methods_1_1.done; methods_1_1 = methods_1.next()) {
+            var method = methods_1_1.value;
+            _loop_1(method);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (methods_1_1 && !methods_1_1.done && (_a = methods_1.return)) _a.call(methods_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
 var Graph = function (_a) {
     var _b = _a.items, items = _b === void 0 ? [] : _b;
     var ref = (0, react_1.useRef)(null);
     var pathRef = (0, react_1.useRef)([]);
     var _c = __read((0, react_1.useState)(), 2), ctx = _c[0], setCtx = _c[1];
-    var height = (0, react_1.useMemo)(function () { return 36 * items.length + 50 + 35; }, [items]);
+    // 统一间距配置
+    var ITEM_SPACING = 40;
+    var TOP_OFFSET = 50;
+    var BOTTOM_SPACING = 20; // 最后一个item与虚线之间的间距
+    var SCORE_AREA_HEIGHT = 40; // 分数区域的高度
+    var height = (0, react_1.useMemo)(function () {
+        if (items.length === 0)
+            return 0;
+        return TOP_OFFSET + (items.length - 1) * ITEM_SPACING + MAX_HEIGHT + BOTTOM_SPACING + SCORE_AREA_HEIGHT;
+    }, [items]);
     (0, react_1.useEffect)(function () {
         if (items.length === 0)
             return;
         var currentCtx = setupCanvas(ref.current);
+        hookCanvasContext(currentCtx);
         setCtx(currentCtx);
         tipEl.style.background = 'rgba(0,0,0,.7)';
         tipEl.style.color = '#fff';
@@ -236,13 +287,13 @@ var Graph = function (_a) {
             var layout = {
                 leftLableWidth: 140,
                 topLableHeight: 40,
-                itemSpacing: 40,
+                itemSpacing: ITEM_SPACING,
                 height: height,
             };
             pathRef.current = [];
             draw(layout, items, pathRef.current, ctx);
         }
-    }, [ctx, items, height]);
+    }, [ctx, items, height, ITEM_SPACING]);
     // useEffect(() => {
     //   console.log(pathRef);
     // }, [pathRef]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eli-video-interview",
-  "version": "1.2.42-alpha.67",
+  "version": "1.2.42-alpha.68",
   "description": "鳄梨科技 AI视频面试 React SDK",
   "author": "鳄梨科技",
   "license": "MIT",