feat: 优化 inject 和 provide 的类型

src/components/clipImage.vue

@@ -23,7 +23,6 @@ import useSelect from '@/hooks/select';
 import { useI18n } from 'vue-i18n';
 
 const update = getCurrentInstance();
-// const canvasEditor = inject('canvasEditor');
 const { canvasEditor, isOne } = useSelect();
 const { t } = useI18n();
 const type = ref('');

src/components/myMaterial/uploadMaterial.vue

@@ -44,8 +44,10 @@
 const APP_APIHOST = import.meta.env.APP_APIHOST;
 import { getFileList, uploadImg, createdMaterial, removeMaterial } from '@/api/user';
 import { Utils } from '@kuaitu/core';
+import { INJECT_CANVAS_EDITOR_KEY } from '@/utils/helper';
+
 const { selectFiles } = Utils;
-const canvasEditor = inject('canvasEditor');
+const canvasEditor = inject(INJECT_CANVAS_EDITOR_KEY);
 
 const fileList = ref([]);
 const isLogin = ref(false);

src/components/previewCurrent.vue

@@ -13,9 +13,11 @@
 </template>
 
 <script lang="ts" setup>
+import { INJECT_CANVAS_EDITOR_KEY } from '@/utils/helper';
 import { ImagePreview } from 'view-ui-plus';
 
-const canvasEditor: any = inject('canvasEditor');
+const canvasEditor = inject(INJECT_CANVAS_EDITOR_KEY)!;
+
 const preview = () => {
   canvasEditor.preview().then((dataUrl: string) => {
     // const dataUrl = getImgUrl();

src/components/replaceImg.vue

@@ -21,7 +21,6 @@ import { Utils } from '@kuaitu/core';
 const { getImgStr, selectFiles, insertImgFile } = Utils;
 
 const update = getCurrentInstance();
-// const canvasEditor = inject('canvasEditor');
 const { canvasEditor, isOne } = useSelect();
 const type = ref('');
 

src/hooks/select.ts

@@ -8,15 +8,17 @@
 
 import { inject, computed, reactive, onMounted, onBeforeMount } from 'vue';
 
-import Editor, { EventType } from '@kuaitu/core';
+import { EventType } from '@kuaitu/core';
 const { SelectMode, SelectEvent } = EventType;
 
 import { useI18n } from 'vue-i18n';
+import { INJECT_CANVAS_EDITOR_KEY, INJECT_FABRIC_KEY } from '@/utils/helper';
 
 export default function useSelect(matchType?: Array<string>) {
   const { t } = useI18n();
-  const fabric = inject('fabric');
-  const canvasEditor = inject('canvasEditor') as Editor;
+  const fabric = inject(INJECT_FABRIC_KEY)!;
+
+  const canvasEditor = inject(INJECT_CANVAS_EDITOR_KEY)!;
 
   const state = reactive({
     mSelectMode: SelectMode.EMPTY,

src/hooks/useAdmin.js

@@ -8,11 +8,11 @@
 
 import { updataTempl, uploadImg, deleteImg, getTempl, createdTempl } from '@/api/admin';
 import { Spin } from 'view-ui-plus';
-
 import { useRouter } from 'vue-router';
+import { INJECT_CANVAS_EDITOR_KEY } from '@/utils/helper';
 
 export default function useMaterial() {
-  const canvasEditor = inject('canvasEditor');
+  const canvasEditor = inject(INJECT_CANVAS_EDITOR_KEY);
   const router = useRouter();
   // 画布转图片
   const uploadFileToInfo = async () => {

src/hooks/useCalculate.js

@@ -7,8 +7,10 @@
  * @LastEditTime: 2024-05-18 17:28:34
  */
 
+import { INJECT_CANVAS_EDITOR_KEY } from '@/utils/helper';
+
 export default function useCalculate() {
-  const canvasEditor = inject('canvasEditor');
+  const canvasEditor = inject(INJECT_CANVAS_EDITOR_KEY);
 
   // 获取画布的DOMRect对象
   const getCanvasBound = () => canvasEditor.canvas.getSelectionElement().getBoundingClientRect();

src/hooks/useMaterial.js

@@ -11,13 +11,14 @@ import { useRouter, useRoute } from 'vue-router';
 import { uploadImg, createdTempl, getTmplInfo, updataTempl, removeTempl } from '@/api/user';
 import { Modal } from 'view-ui-plus';
 
+import { INJECT_CANVAS_EDITOR_KEY } from '@/utils/helper';
 import { useI18n } from 'vue-i18n';
 
 export default function useMaterial() {
   const { t } = useI18n();
   const router = useRouter();
   const route = useRoute();
-  const canvasEditor = inject('canvasEditor');
+  const canvasEditor = inject(INJECT_CANVAS_EDITOR_KEY);
 
   // 创建模板
   const createTmpl = async (width, height, parentId = '') => {

src/utils/helper.ts

@@ -0,0 +1,11 @@
+import type { IEditor } from '@kuaitu/core';
+import { type InjectionKey } from 'vue';
+import { fabric } from 'fabric';
+
+export function createInjectionKey<T>(key: string): InjectionKey<T> {
+  return key as any;
+}
+
+export const INJECT_CANVAS_EDITOR_KEY = createInjectionKey<IEditor>('canvasEditor');
+
+export const INJECT_FABRIC_KEY = createInjectionKey<typeof fabric>('fabric');

src/views/home/index.vue

@@ -188,7 +188,7 @@ import align from '@/components/align.vue';
 import myTemplName from '@/components/myTemplName.vue';
 import centerAlign from '@/components/centerAlign.vue';
 import flip from '@/components/flip.vue';
-import previewCurrent from '@/components/previewCurrent';
+import previewCurrent from '@/components/previewCurrent.vue';
 import save from '@/components/save.vue';
 import lang from '@/components/lang.vue';
 import clone from '@/components/clone.vue';
@@ -199,8 +199,8 @@ import dragMode from '@/components/dragMode.vue';
 import lock from '@/components/lock.vue';
 import dele from '@/components/del.vue';
 import waterMark from '@/components/waterMark.vue';
-import login from '@/components/login';
-import admin from '@/components/admin';
+import login from '@/components/login.vue';
+import admin from '@/components/admin.vue';
 // 左侧组件
 import importTmpl from '@/components/importTmpl.vue';
 import fontStyle from '@/components/fontStyle.vue';
@@ -278,6 +278,7 @@ import Editor, {
 import Edit from '@/components/edit.vue';
 import ClipImage from '@/components/clipImage.vue';
 import AttributeTextContent from '@/components/attributeTextContent.vue';
+import { INJECT_CANVAS_EDITOR_KEY, INJECT_FABRIC_KEY } from '@/utils/helper';
 
 // 创建编辑器
 const canvasEditor = new Editor() as IEditor;
@@ -408,22 +409,22 @@ onMounted(() => {
 });
 
 onUnmounted(() => canvasEditor.destory());
-const rulerSwitch = (val) => {
+const rulerSwitch = (val: any) => {
   if (val) {
     canvasEditor.rulerEnable();
   } else {
     canvasEditor.rulerDisable();
   }
   // 使标尺开关组件失焦，避免响应键盘的空格事件
-  document.activeElement.blur();
+  (document.activeElement as any)?.blur?.();
 };
 
 // 隐藏工具条
 const hideToolsBar = () => {
   state.toolsBarShow = !state.toolsBarShow;
 };
 // 展示工具条
-const showToolsBar = (val) => {
+const showToolsBar = (val: any) => {
   menuActive.value = val;
   state.toolsBarShow = true;
 };
@@ -434,8 +435,8 @@ const switchAttrBar = () => {
 
 const { mixinState } = useSelectListen(canvasEditor);
 
-provide('fabric', fabric);
-provide('canvasEditor', canvasEditor);
+provide(INJECT_FABRIC_KEY, fabric);
+provide(INJECT_CANVAS_EDITOR_KEY, canvasEditor);
 // provide('mixinState', mixinState);
 </script>
 <style lang="less" scoped>