feat:monaco代码编辑器新增代码替换功能

src/views/components/PenAnimates.vue

@@ -419,6 +419,30 @@ function codeHints() {
     trigger:'.'
   })
 
+  userHints.value.push({
+    obj:"c",
+    trigger:'/',
+    replace:true,
+    properties:[{
+      label: '补全代码模板', // 显示的文本
+      kind: 9, // 图标类型
+      insertText: `const scale = pen.calculative.canvas.store.data.scale;
+ctx.save();
+
+const width = 10  // 此处定义图形宽度
+const height = 10 // 此处定义图形高度
+ctx.translate(state.x + (width/2 * scale), state.y + (height/2 * scale));  // 平移到中心点
+ctx.rotate((state.rotate * Math.PI) / 180); // 配置旋转角度
+ctx.scale(scale, scale); // 配置缩放
+ctx.translate(-(width/2 * scale), -(he1/22 * scale));  // 平移回左上角
+
+//在此处编写你的图形定义代码...
+
+ctx.restore()`, // 插入的文本
+      detail: "补全代码模板"
+    }],
+  })
+
   userHints.value.push({
     obj:"index",
     type:'number', // js DOM 内置类型

src/views/components/common/CodeEditor.vue

@@ -180,7 +180,18 @@ watch(() => hints, (newValue) => {
               kind: prop.kind,
               insertText: prop.insertText,
               detail: prop.detail,
-            }))
+            })),
+          dispose() {
+            if(!hint.replace)return
+             const line = position.lineNumber
+             const column = position.column
+             editor.executeEdits("", [
+               {
+                 range: new monaco.Range(line, column - hint.obj.length - 1, line, column),
+                 text: null
+               }
+             ])
+          }
           };
         }
       }