From 30d908751e5d60fbfae45933e814cf45cca3c8bb Mon Sep 17 00:00:00 2001
From: zengqinglong <1107238436@qq.com>
Date: Fri, 8 Nov 2024 14:07:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20inject=20=E5=92=8C?=
 =?UTF-8?q?=20provide=20=E7=9A=84=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/clipImage.vue                 |  1 -
 src/components/myMaterial/uploadMaterial.vue |  4 +++-
 src/components/previewCurrent.vue            |  4 +++-
 src/components/replaceImg.vue                |  1 -
 src/hooks/select.ts                          |  8 +++++---
 src/hooks/useAdmin.js                        |  4 ++--
 src/hooks/useCalculate.js                    |  4 +++-
 src/hooks/useMaterial.js                     |  3 ++-
 src/utils/helper.ts                          | 11 +++++++++++
 src/views/home/index.vue                     | 17 +++++++++--------
 10 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/helper.ts

diff --git a/src/components/clipImage.vue b/src/components/clipImage.vue
index c40abeed..8d8c8d09 100644
--- a/src/components/clipImage.vue
+++ b/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('');
diff --git a/src/components/myMaterial/uploadMaterial.vue b/src/components/myMaterial/uploadMaterial.vue
index aacdca9b..0f8e5c2d 100644
--- a/src/components/myMaterial/uploadMaterial.vue
+++ b/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);
diff --git a/src/components/previewCurrent.vue b/src/components/previewCurrent.vue
index d38b3402..53dc404d 100644
--- a/src/components/previewCurrent.vue
+++ b/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();
diff --git a/src/components/replaceImg.vue b/src/components/replaceImg.vue
index 2575dac0..8ec16890 100644
--- a/src/components/replaceImg.vue
+++ b/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('');
 
diff --git a/src/hooks/select.ts b/src/hooks/select.ts
index d69c12ae..12fabf8c 100644
--- a/src/hooks/select.ts
+++ b/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,
diff --git a/src/hooks/useAdmin.js b/src/hooks/useAdmin.js
index fa34332c..735b1f4f 100644
--- a/src/hooks/useAdmin.js
+++ b/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 () => {
diff --git a/src/hooks/useCalculate.js b/src/hooks/useCalculate.js
index 10e7952b..d8445742 100644
--- a/src/hooks/useCalculate.js
+++ b/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();
diff --git a/src/hooks/useMaterial.js b/src/hooks/useMaterial.js
index bb4261f3..6d0ee7e9 100644
--- a/src/hooks/useMaterial.js
+++ b/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 = '') => {
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
new file mode 100644
index 00000000..bfa462a5
--- /dev/null
+++ b/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');
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b53039c2..27c3b8de 100644
--- a/src/views/home/index.vue
+++ b/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,14 +409,14 @@ 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?.();
 };
 
 // 隐藏工具条
@@ -423,7 +424,7 @@ 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>