feat(eslint): 组件语法修复

src/components/history.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
- * @LastEditors: June
- * @LastEditTime: 2024-01-31 12:29:07
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-02-06 17:00:13
  * @Description: 回退重做
 -->
 
@@ -31,7 +31,7 @@
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core';
 import useSelect from '@/hooks/select';
-const { canvasEditor } = useSelect();
+const { canvasEditor } = useSelect() as { canvasEditor: any };
 const { history, redoStack, undoStack } = reactive(canvasEditor.getHistory());
 
 // 后退

src/components/importSvgEl.vue

@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-08-05 17:47:35
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-02-06 16:43:23
+ * @LastEditTime: 2024-02-06 17:54:10
  * @Description: file content
 -->
 
@@ -48,9 +48,10 @@
 <script setup name="ImportSvg" lang="ts">
 import useSelect from '@/hooks/select';
 import { cloneDeep } from 'lodash-es';
+import { fabric } from 'fabric';
 import { v4 as uuid } from 'uuid';
 
-const { fabric, canvasEditor }: { canvasEditor: any; fabric: any } = useSelect();
+const { canvasEditor }: { canvasEditor: any } = useSelect();
 
 const defaultPosition = {
   left: 100,
@@ -93,7 +94,7 @@ canvasEditor.getMaterialType('svg').then((list: materialTypeI[]) => {
 });
 
 // 切换素材类型
-const handleChange = (e, item) => {
+const handleChange = (e: Event, item: [materialTypeI]) => {
   // 搜索框文字设置
   const { label, value } = item[0];
   state.placeholder = label;
@@ -131,8 +132,9 @@ const search = () => {
   filterTypeList(typeValue);
 };
 
-const dragItem = (event) => {
-  const url = event.target.src;
+const dragItem = (event: Event) => {
+  const target = event.target as HTMLImageElement;
+  const url = target.src;
   // 会有性能开销 dragAddItem复用更简洁
   fabric.loadSVGFromURL(url, (objects) => {
     const item = fabric.util.groupSVGElements(objects, {
@@ -146,8 +148,9 @@ const dragItem = (event) => {
 };
 
 // 按照类型渲染
-const addItem = (e) => {
-  const url = e.target.src;
+const addItem = (e: Event) => {
+  const target = e.target as HTMLImageElement;
+  const url = target.src;
   fabric.loadSVGFromURL(url, (objects, options) => {
     const item = fabric.util.groupSVGElements(objects, {
       ...options,

src/components/previewCurrent.vue

@@ -14,11 +14,10 @@
 
 <script lang="ts" setup>
 import { ImagePreview } from 'view-ui-plus';
-import vfe from 'vfe';
 
-const canvasEditor = inject('canvasEditor') as vfe.ICanvas;
+const canvasEditor: any = inject('canvasEditor');
 const preview = () => {
-  canvasEditor.preview().then((dataUrl) => {
+  canvasEditor.preview().then((dataUrl: string) => {
     // const dataUrl = getImgUrl();
     ImagePreview.show({
       previewList: [dataUrl],

src/hooks/select.ts

@@ -4,23 +4,25 @@
  * @Author: June
  * @Date: 2023-04-23 21:10:05
  * @LastEditors: 秦少卫
- * @LastEditTime: 2023-07-05 00:47:52
+ * @LastEditTime: 2024-02-06 17:53:05
  */
 import { inject, onBeforeMount, onMounted, reactive } from 'vue';
-import { SelectEvent, SelectMode, SelectOneType } from '@/utils/event/types';
+import { SelectEvent, SelectMode } from '@/utils/event/types';
+
+import EventEmitter from 'events';
 
 interface Selector {
   mSelectMode: SelectMode;
-  mSelectOneType: SelectOneType;
-  mSelectId: string[] | '';
-  mSelectIds: string[];
+  mSelectOneType: string | undefined;
+  mSelectId: string | undefined;
+  mSelectIds: (string | undefined)[];
   mSelectActive: unknown[];
 }
 
 export default function useSelect() {
   const state = reactive<Selector>({
     mSelectMode: SelectMode.EMPTY,
-    mSelectOneType: SelectOneType.EMPTY,
+    mSelectOneType: '',
     mSelectId: '', // 选择id
     mSelectIds: [], // 选择id
     mSelectActive: [],
@@ -29,16 +31,18 @@ export default function useSelect() {
   const fabric = inject('fabric');
   // const canvas = inject('canvas');
   const canvasEditor = inject('canvasEditor');
-  const event = inject('event');
+  const event = inject('event') as EventEmitter;
 
-  const selectOne = (e) => {
+  const selectOne = (e: [fabric.Object]) => {
     state.mSelectMode = SelectMode.ONE;
-    state.mSelectId = e[0].id;
-    state.mSelectOneType = e[0].type;
-    state.mSelectIds = e.map((item) => item.id);
+    if (e[0]) {
+      state.mSelectId = e[0].id;
+      state.mSelectOneType = e[0].type;
+      state.mSelectIds = e.map((item) => item.id);
+    }
   };
 
-  const selectMulti = (e) => {
+  const selectMulti = (e: fabric.Object[]) => {
     state.mSelectMode = SelectMode.MULTI;
     state.mSelectId = '';
     state.mSelectIds = e.map((item) => item.id);
@@ -48,7 +52,7 @@ export default function useSelect() {
     state.mSelectId = '';
     state.mSelectIds = [];
     state.mSelectMode = SelectMode.EMPTY;
-    state.mSelectOneType = SelectOneType.EMPTY;
+    state.mSelectOneType = '';
   };
 
   onMounted(() => {

src/utils/event/types.ts

@@ -9,12 +9,6 @@ export enum SelectMode {
   MULTI = 'multiple',
 }
 
-export enum SelectOneType {
-  EMPTY = '',
-  GROUP = 'group',
-  POLYGON = 'polygon',
-}
-
 // 选择事件（用于广播）
 export enum SelectEvent {
   ONE = 'selectOne',

typings/editor.d.ts

@@ -3,7 +3,7 @@
  * @Author: 秦少卫
  * @Date: 2023-05-13 18:53:44
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-02-06 16:44:37
+ * @LastEditTime: 2024-02-06 17:54:39
  * @Description: file content
  */
 
@@ -39,7 +39,3 @@ declare interface IPluginTempl {
   [propName: IEditorHooksType]: () => void;
   [propName: string]: any;
 }
-
-declare interface CanvasEditorI {
-  [propName: string]: any;
-}