From 5dacdfe1ebcb7ca9218b77c2e78015ac3518a293 Mon Sep 17 00:00:00 2001
From: streakingman <z_max_y@163.com>
Date: Tue, 30 Jan 2024 19:45:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20usePaper=E5=92=8CuseMaterial?=
 =?UTF-8?q?=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 19 ++++----
 src/PrintPage.vue                             |  3 +-
 src/classes/Material.ts                       |  4 --
 src/classes/Paper.ts                          | 10 +---
 src/components/core/MaterialConfigPopover.vue |  3 +-
 src/components/core/MaterialInstance.vue      | 48 ++++++++-----------
 src/components/core/MaterialPrototype.vue     |  2 +-
 src/components/core/Paper.vue                 |  4 +-
 src/components/core/Sketch.vue                |  2 +-
 src/components/materials/MDivider.vue         |  3 +-
 src/components/materials/MIcon.vue            |  2 +-
 src/components/materials/MImage.vue           |  2 +-
 src/components/materials/MList.vue            |  4 +-
 src/components/materials/MPie.vue             |  5 +-
 src/components/materials/MRating.vue          |  2 +-
 src/components/materials/MRect.vue            |  2 +-
 src/components/materials/MText.vue            |  3 +-
 src/components/materials/MTimeline.vue        |  2 +-
 src/components/other/AddPageBtn.vue           |  2 +-
 src/components/other/DevPanel.vue             |  2 +-
 src/components/other/PreviewNavigator.vue     |  4 +-
 src/components/other/PreviewNavigatorPage.vue |  3 +-
 .../templates/TemplatePreviewCard.vue         | 14 +++---
 src/components/tools/Align.vue                |  2 +-
 src/components/tools/Group.vue                |  2 +-
 src/components/tools/ImportExport.vue         |  3 +-
 src/components/tools/Print.vue                |  2 +-
 src/components/tools/Save.vue                 |  2 +-
 src/components/tools/ViewOpt.vue              |  2 +-
 src/composables/useApp.ts                     | 32 -------------
 src/composables/useMaterial.ts                | 45 +++++++++++++++++
 src/composables/usePaper.ts                   | 26 ++++++++++
 src/composables/useRuntime.ts                 |  4 ++
 33 files changed, 149 insertions(+), 116 deletions(-)
 delete mode 100644 src/composables/useApp.ts
 create mode 100644 src/composables/useMaterial.ts
 create mode 100644 src/composables/usePaper.ts

diff --git a/src/App.vue b/src/App.vue
index 0f4cc45..793ac2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,6 @@
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, provide, reactive, toRefs, watch } from 'vue';
-import {
-    Paper as PaperClass,
-    paperInjectionKey,
-    PaperMode,
-    paperModeInjectionKey,
-} from './classes/Paper';
+import { defineAsyncComponent, onMounted, provide, toRefs, watch } from 'vue';
+import { PaperMode } from './classes/Paper';
 import Sketch from './components/core/Sketch.vue';
 import sketch from './components/core/Sketch.vue';
 import MaterialPrototype from './components/core/MaterialPrototype.vue';
@@ -18,15 +13,16 @@ import WebsiteInfo from '@/components/other/WebsiteInfo.vue';
 import Paper from '@/components/core/Paper.vue';
 import PreviewNavigator from '@/components/other/PreviewNavigator.vue';
 import { createAndInjectReactiveRuntime } from '@/composables/useRuntime';
+import { createAndInjectReactivePaper, paperModeInjectionKey } from '@/composables/usePaper';
 
 // 运行时
 const runtime = createAndInjectReactiveRuntime();
 const { copyMaterialSet, activeMaterialSet } = toRefs(runtime);
 
 // Paper实例
-const paperInstance = reactive(new PaperClass({}));
-provide(paperInjectionKey, paperInstance);
+const paperInstance = createAndInjectReactivePaper();
 onMounted(() => {
+    // 尝试从localStorage加载数据
     if (!paperInstance.loadFromStorage()) {
         paperInstance.loadData(template1);
     }
@@ -58,10 +54,11 @@ whenever(ctrl_a, () => {
 
 // 激活元素集合控制
 watch(
-    // TODO: 为什么直接监听 runtime.activeMaterialSet，nv和ov是一样的？
+    // 热知识：直接watch reactive对象的话，新旧值是一样的
+    // 所以这里使用表达式
     () => [...activeMaterialSet.value],
     (nv, ov) => {
-        if (!nv.size) {
+        if (!nv.length) {
             copyMaterialSet.value.clear();
         }
 
diff --git a/src/PrintPage.vue b/src/PrintPage.vue
index c755cf9..7ea874c 100644
--- a/src/PrintPage.vue
+++ b/src/PrintPage.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import Paper from '@/components/core/Paper.vue';
 import { onMounted, provide, reactive } from 'vue';
-import { Paper as PaperClass, paperInjectionKey } from '@/classes/Paper';
+import { Paper as PaperClass } from '@/classes/Paper';
 
 import { useWindowScroll, useWindowSize } from '@vueuse/core';
 import { linear } from '@/utils/timeFunction';
+import { paperInjectionKey } from '@/composables/usePaper';
 
 // Paper实例
 const paperInstance = reactive(new PaperClass({}));
diff --git a/src/classes/Material.ts b/src/classes/Material.ts
index 559a89d..df62a31 100644
--- a/src/classes/Material.ts
+++ b/src/classes/Material.ts
@@ -1,5 +1,4 @@
 import { uniqueString } from '@/utils/uniqueString';
-import type { InjectionKey, UnwrapNestedRefs } from 'vue';
 import { calcCellingValue } from '@/utils/calcCellingValue';
 import { MaterialNames } from '@/components/materials/config';
 
@@ -10,9 +9,6 @@ export interface MaterialInjection {
     clicked: boolean;
 }
 
-export const materialInjectionKey: InjectionKey<UnwrapNestedRefs<MaterialInjection>> =
-    Symbol('Material');
-
 export interface MaterialBaseConfig {
     padding?: number;
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
diff --git a/src/classes/Paper.ts b/src/classes/Paper.ts
index 1a9e65b..70ba65a 100644
--- a/src/classes/Paper.ts
+++ b/src/classes/Paper.ts
@@ -1,23 +1,17 @@
 import { Material, type MaterialOptions } from './Material';
 import { uniqueString } from '@/utils/uniqueString';
-import type { InjectionKey, UnwrapNestedRefs } from 'vue';
 import { easeInOut } from '@/utils/timeFunction';
 
 const LOCAL_STORAGE_KEY = 'paper_cache';
-
-const a4Ratio = 210 / 297;
+const A4_RATIO = 210 / 297;
 
 export const paperSizeMap = {
     a4: {
         w: 793,
-        h: Math.ceil(793 / a4Ratio),
+        h: Math.ceil(793 / A4_RATIO),
     },
 };
 
-export const paperInjectionKey: InjectionKey<UnwrapNestedRefs<Paper>> = Symbol('Paper');
-export const paperShowPageNumInjectionKey: InjectionKey<number | null | undefined> =
-    Symbol('PaperShowPageNum');
-export const paperModeInjectionKey: InjectionKey<PaperMode> = Symbol('PaperMode');
 export enum PaperMode {
     Preview = 'preview',
     Edit = 'edit',
diff --git a/src/components/core/MaterialConfigPopover.vue b/src/components/core/MaterialConfigPopover.vue
index aaf45f4..2787f02 100644
--- a/src/components/core/MaterialConfigPopover.vue
+++ b/src/components/core/MaterialConfigPopover.vue
@@ -89,13 +89,14 @@
 
 <script lang="ts">
 import { defineComponent, nextTick, ref, toRef } from 'vue';
-import { useMaterial, usePaper } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import BorderStyle from '../config-widgets/BorderStyle.vue';
 import Color from '../config-widgets/Color.vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '../../composables/useMouseDragDynamic';
 import { useMagicKeys } from '@vueuse/core';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 export default defineComponent({
     name: 'MaterialConfigPopover',
diff --git a/src/components/core/MaterialInstance.vue b/src/components/core/MaterialInstance.vue
index f7565bf..232b747 100644
--- a/src/components/core/MaterialInstance.vue
+++ b/src/components/core/MaterialInstance.vue
@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { computed, inject, provide, reactive, ref, toRef, watch } from 'vue';
+import { computed, inject, ref, toRefs, watch } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '../../composables/useMouseDragDynamic';
 import { CTRL_DOT_SIZE, UNIT_SIZE } from './config';
-import { Material, materialInjectionKey } from '@/classes/Material';
-import { usePaper } from '@/composables/useApp';
+import { Material } from '@/classes/Material';
 import { componentMap, prototypeMap } from '../materials/prototypes';
 import { type CtrlDotType } from '../materials/config';
 import { useMagicKeys } from '@vueuse/core';
-import { PaperMode, paperModeInjectionKey, paperShowPageNumInjectionKey } from '@/classes/Paper';
+import { PaperMode } from '@/classes/Paper';
 import { useRuntime } from '@/composables/useRuntime';
+import { paperShowPageNumInjectionKey, usePaper, usePaperMode } from '@/composables/usePaper';
+import { createAndInjectReactiveMaterial } from '@/composables/useMaterial';
 
 const styleMap: Record<CtrlDotType, string> = {
     tl: `top: 0px;left: 0px;cursor: nw-resize;transform-origin: top left;`,
@@ -35,42 +36,38 @@ const props = defineProps<{
 
 const runtime = useRuntime();
 const paper = usePaper();
+const material = createAndInjectReactiveMaterial(props.item);
+const { hover, active, clicked, instance } = toRefs(material);
+const { scale, activeMaterialSet } = toRefs(runtime);
+
 const { space, shift } = useMagicKeys();
 
-const material = reactive({
-    instance: props.item,
-    hover: false,
-    active: computed(() => runtime.activeMaterialSet.has(props.item.id)),
-    clicked: false,
+watch(active, (v) => {
+    if (v) clicked.value = false;
 });
-provide(materialInjectionKey, material);
-
 watch(
-    () => material.active,
+    () => [...activeMaterialSet.value],
     () => {
-        if (!material.active) material.clicked = false;
+        active.value = activeMaterialSet.value.has(material.instance.id);
     },
 );
 
 const focus = (e: MouseEvent) => {
-    material.clicked = true;
+    clicked.value = true;
     // 没按空格时阻止冒泡
     if (!space.value) e.stopPropagation();
 
     if (shift.value) {
         // 按住shift点击元素则切换选中状态
-        if (!runtime.activeMaterialSet.delete(material.instance.id)) {
-            runtime.activeMaterialSet.add(material.instance.id);
+        if (!activeMaterialSet.value.delete(material.instance.id)) {
+            activeMaterialSet.value.add(material.instance.id);
         }
     } else {
         // 否则重置为该元素
-        runtime.activeMaterialSet.clear();
-        runtime.activeMaterialSet.add(material.instance.id);
+        activeMaterialSet.value.clear();
+        activeMaterialSet.value.add(material.instance.id);
     }
 };
-const blur = () => {
-    runtime.activeMaterialSet.clear();
-};
 
 // 位置信息缓存
 const posInfoCache = {
@@ -152,12 +149,7 @@ const removeMaterialInstance = () => {
     paper.removeMaterial(material.instance.id);
 };
 
-const hover = toRef(material, 'hover');
-const active = toRef(material, 'active');
-const instance = toRef(material, 'instance');
-const scale = toRef(runtime.scale, 'value');
-
-const isEdit = inject(paperModeInjectionKey, PaperMode.Edit) === PaperMode.Edit;
+const isEdit = usePaperMode() === PaperMode.Edit;
 
 const showPageNum = inject(paperShowPageNumInjectionKey, undefined);
 const realY = computed(() => {
@@ -263,7 +255,7 @@ const realY = computed(() => {
                 v-for="dot in ableCtrlDots"
                 :key="dot"
                 :style="[
-                    `transform: scale(${1 / scale});${styleMap[dot]}`,
+                    `transform: scale(${1 / scale.value});${styleMap[dot]}`,
                     {
                         opacity: (clickingDot && clickingDot !== dot) || !(active || hover) ? 0 : 1,
                         width: CTRL_DOT_SIZE + 'px',
diff --git a/src/components/core/MaterialPrototype.vue b/src/components/core/MaterialPrototype.vue
index 839b1a3..a03da68 100644
--- a/src/components/core/MaterialPrototype.vue
+++ b/src/components/core/MaterialPrototype.vue
@@ -3,8 +3,8 @@ import { reactive, ref } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '../../composables/useMouseDragDynamic';
 import { prototypeMap } from '../materials/prototypes';
 import { MaterialNames } from '../materials/config';
-import { usePaper } from '@/composables/useApp';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const runtime = useRuntime();
 const paper = usePaper();
diff --git a/src/components/core/Paper.vue b/src/components/core/Paper.vue
index 65fedf0..5ae7769 100644
--- a/src/components/core/Paper.vue
+++ b/src/components/core/Paper.vue
@@ -2,13 +2,13 @@
 import { computed, inject, ref, watch, watchEffect } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '@/composables/useMouseDragDynamic';
 import MaterialInstance from './MaterialInstance.vue';
-import { usePaper } from '@/composables/useApp';
 import { useElementBounding, useMagicKeys, useUrlSearchParams } from '@vueuse/core';
 import type { Material } from '@/classes/Material';
 import { vElementHover } from '@vueuse/components';
-import { PaperMode, paperModeInjectionKey } from '@/classes/Paper';
+import { PaperMode } from '@/classes/Paper';
 import AddPageBtn from '@/components/other/AddPageBtn.vue';
 import { useRuntime } from '@/composables/useRuntime';
+import { paperModeInjectionKey, usePaper } from '@/composables/usePaper';
 
 const runtime = useRuntime();
 const paper = usePaper();
diff --git a/src/components/core/Sketch.vue b/src/components/core/Sketch.vue
index 4e9cdfe..30c07e7 100644
--- a/src/components/core/Sketch.vue
+++ b/src/components/core/Sketch.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '@/composables/useMouseDragDynamic';
-import { usePaper } from '@/composables/useApp';
 import { useActiveElement, useDebounceFn, useMagicKeys, useWindowSize } from '@vueuse/core';
 import { paperSizeMap } from '@/classes/Paper';
 import useWindowMouseWheel from '@/composables/useWindowMouseWheel';
 import { SCALE_RANGE } from '@/components/core/config';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const { height: windowHeight, width: windowWidth } = useWindowSize();
 
diff --git a/src/components/materials/MDivider.vue b/src/components/materials/MDivider.vue
index bdab37a..f9587f9 100644
--- a/src/components/materials/MDivider.vue
+++ b/src/components/materials/MDivider.vue
@@ -53,7 +53,7 @@
 import { defineComponent, toRef, watch } from 'vue';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import BorderStyle from '../config-widgets/BorderStyle.vue';
 import ConfigToggle from '../config-widgets/ConfigToggle.vue';
@@ -130,6 +130,7 @@ export default defineComponent({
             border-left: none;
             border-right: none;
         }
+
         &.vertical {
             width: 0;
             border-top: none;
diff --git a/src/components/materials/MIcon.vue b/src/components/materials/MIcon.vue
index 574f71f..97ca992 100644
--- a/src/components/materials/MIcon.vue
+++ b/src/components/materials/MIcon.vue
@@ -64,7 +64,7 @@ import { defineComponent, toRef, watch } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import Color from '../config-widgets/Color.vue';
 import { iconInfo } from './iconInfo';
diff --git a/src/components/materials/MImage.vue b/src/components/materials/MImage.vue
index 5897214..85e9f4a 100644
--- a/src/components/materials/MImage.vue
+++ b/src/components/materials/MImage.vue
@@ -64,7 +64,7 @@
 import { defineComponent, nextTick, toRef, watch } from 'vue';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import ConfigToggle from '../config-widgets/ConfigToggle.vue';
 import ConfigToggleOption from '../config-widgets/ConfigToggleOption.vue';
diff --git a/src/components/materials/MList.vue b/src/components/materials/MList.vue
index d5ce7b2..d43728a 100644
--- a/src/components/materials/MList.vue
+++ b/src/components/materials/MList.vue
@@ -148,7 +148,7 @@ import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import { fontWeightClass, MaterialNames, typographyClass } from './config';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import Color from '../config-widgets/Color.vue';
 
@@ -288,6 +288,7 @@ export default defineComponent({
         position: absolute;
         width: 100%;
         z-index: 2;
+
         textarea {
             resize: none;
             word-break: break-word;
@@ -296,6 +297,7 @@ export default defineComponent({
             color: inherit;
         }
     }
+
     &.placeholder {
         white-space: pre-wrap;
         word-break: break-word;
diff --git a/src/components/materials/MPie.vue b/src/components/materials/MPie.vue
index d6c2955..fdf83a6 100644
--- a/src/components/materials/MPie.vue
+++ b/src/components/materials/MPie.vue
@@ -3,7 +3,7 @@ import { computed, defineComponent, nextTick, toRef, watch } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from '@/components/materials/prototypes';
 import { fontWeightClass, MaterialNames, typographyClass } from '@/components/materials/config';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import MaterialConfigPopover from '@/components/core/MaterialConfigPopover.vue';
 import ConfigItem from '@/components/config-widgets/ConfigItem.vue';
 import BorderStyle from '@/components/config-widgets/BorderStyle.vue';
@@ -262,18 +262,21 @@ export default defineComponent({
     border-radius: 50%;
     position: relative;
 }
+
 .labels {
     width: 40%;
     position: absolute;
     right: 0;
     top: 0;
     padding-left: 0.5em;
+
     .label-item {
         display: flex;
         align-items: center;
         gap: 0.5em;
         word-break: break-all;
     }
+
     .color-block {
         width: 1em;
         min-width: 1em;
diff --git a/src/components/materials/MRating.vue b/src/components/materials/MRating.vue
index fd16168..fca8032 100644
--- a/src/components/materials/MRating.vue
+++ b/src/components/materials/MRating.vue
@@ -54,7 +54,7 @@ import { defineComponent, nextTick, ref, toRef, watch } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import Color from '../config-widgets/Color.vue';
 import { MaterialNames } from '@/components/materials/config';
diff --git a/src/components/materials/MRect.vue b/src/components/materials/MRect.vue
index c005c77..809c8a3 100644
--- a/src/components/materials/MRect.vue
+++ b/src/components/materials/MRect.vue
@@ -12,7 +12,7 @@ import { defineComponent, toRef } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import { MaterialNames } from '@/components/materials/config';
 
 const protoInfo: ProtoInfo<MaterialBaseConfig> = {
diff --git a/src/components/materials/MText.vue b/src/components/materials/MText.vue
index 841ca65..4c03671 100644
--- a/src/components/materials/MText.vue
+++ b/src/components/materials/MText.vue
@@ -76,7 +76,7 @@ import { computed, defineComponent, nextTick, ref, toRef, watch } from 'vue';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
 import { fontWeightClass, MaterialNames, textAlignOptions, typographyClass } from './config';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import ConfigToggle from '../config-widgets/ConfigToggle.vue';
 import ConfigToggleOption from '../config-widgets/ConfigToggleOption.vue';
@@ -177,6 +177,7 @@ export default defineComponent({
     white-space: pre-wrap;
     word-break: break-word;
     color: transparent;
+
     textarea {
         width: 100%;
         height: calc(100% + 12px);
diff --git a/src/components/materials/MTimeline.vue b/src/components/materials/MTimeline.vue
index a2826cf..3823a3b 100644
--- a/src/components/materials/MTimeline.vue
+++ b/src/components/materials/MTimeline.vue
@@ -40,7 +40,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, toRef, watch } from 'vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import MaterialConfigPopover from '@/components/core/MaterialConfigPopover.vue';
 import ConfigToggle from '@/components/config-widgets/ConfigToggle.vue';
 import ConfigItem from '@/components/config-widgets/ConfigItem.vue';
diff --git a/src/components/other/AddPageBtn.vue b/src/components/other/AddPageBtn.vue
index 0df4597..d65ce80 100644
--- a/src/components/other/AddPageBtn.vue
+++ b/src/components/other/AddPageBtn.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { usePaper } from '@/composables/useApp';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const paper = usePaper();
 const runtime = useRuntime();
diff --git a/src/components/other/DevPanel.vue b/src/components/other/DevPanel.vue
index 48f344e..bc710d5 100644
--- a/src/components/other/DevPanel.vue
+++ b/src/components/other/DevPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { usePaper } from '@/composables/useApp';
 import { UseDraggable } from '@vueuse/components';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 console.log('Mode:', import.meta.env.MODE, ' DevPanel loaded.');
 
diff --git a/src/components/other/PreviewNavigator.vue b/src/components/other/PreviewNavigator.vue
index 6f7bff0..03d9918 100644
--- a/src/components/other/PreviewNavigator.vue
+++ b/src/components/other/PreviewNavigator.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { usePaper } from '@/composables/useApp';
 import PreviewNavigatorPage from '@/components/other/PreviewNavigatorPage.vue';
 import { computed, provide, ref, watch } from 'vue';
-import { PaperMode, paperModeInjectionKey } from '@/classes/Paper';
+import { PaperMode } from '@/classes/Paper';
 import { vElementHover } from '@vueuse/components';
 import { useRuntime } from '@/composables/useRuntime';
+import { paperModeInjectionKey, usePaper } from '@/composables/usePaper';
 
 const runtime = useRuntime();
 const paperInstance = usePaper();
diff --git a/src/components/other/PreviewNavigatorPage.vue b/src/components/other/PreviewNavigatorPage.vue
index da54d7f..fb800c1 100644
--- a/src/components/other/PreviewNavigatorPage.vue
+++ b/src/components/other/PreviewNavigatorPage.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import Paper from '@/components/core/Paper.vue';
 import { provide } from 'vue';
-import { paperShowPageNumInjectionKey } from '@/classes/Paper';
+
+import { paperShowPageNumInjectionKey } from '@/composables/usePaper';
 
 const props = defineProps<{
     pageNum: number;
diff --git a/src/components/templates/TemplatePreviewCard.vue b/src/components/templates/TemplatePreviewCard.vue
index d6f0b48..3a58791 100644
--- a/src/components/templates/TemplatePreviewCard.vue
+++ b/src/components/templates/TemplatePreviewCard.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, provide, ref } from 'vue';
+import { PaperMode } from '@/classes/Paper';
+import Paper from '@/components/core/Paper.vue';
+import { useRuntime } from '@/composables/useRuntime';
 import {
-    Paper as PaperClass,
+    createAndInjectReactivePaper,
     paperInjectionKey,
-    PaperMode,
     paperModeInjectionKey,
-} from '@/classes/Paper';
-import { usePaper } from '@/composables/useApp';
-import Paper from '@/components/core/Paper.vue';
-import { useRuntime } from '@/composables/useRuntime';
+    usePaper,
+} from '@/composables/usePaper';
 
 const props = defineProps<{
     template: any;
@@ -39,7 +39,7 @@ const transform = computed(() => {
     return `matrix3d(${matrix.value.toString()})`;
 });
 
-const paperInstance = new PaperClass({});
+const paperInstance = createAndInjectReactivePaper(props.template);
 paperInstance.loadData(props.template);
 provide(paperModeInjectionKey, PaperMode.Preview);
 provide(paperInjectionKey, paperInstance);
diff --git a/src/components/tools/Align.vue b/src/components/tools/Align.vue
index 17f5b65..fba153c 100644
--- a/src/components/tools/Align.vue
+++ b/src/components/tools/Align.vue
@@ -16,8 +16,8 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { usePaper } from '@/composables/useApp';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 type AlignCommandType =
     | 'alignHorizontalLeft'
diff --git a/src/components/tools/Group.vue b/src/components/tools/Group.vue
index 1ea35b4..ecc5cff 100644
--- a/src/components/tools/Group.vue
+++ b/src/components/tools/Group.vue
@@ -9,8 +9,8 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { usePaper } from '@/composables/useApp';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 export default defineComponent({
     name: 'Group',
diff --git a/src/components/tools/ImportExport.vue b/src/components/tools/ImportExport.vue
index 7bf0027..18f7652 100644
--- a/src/components/tools/ImportExport.vue
+++ b/src/components/tools/ImportExport.vue
@@ -37,7 +37,8 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { downloadJSON } from '../../utils/download';
-import { usePaper } from '../../composables/useApp';
+
+import { usePaper } from '@/composables/usePaper';
 
 export default defineComponent({
     name: 'ImportExport',
diff --git a/src/components/tools/Print.vue b/src/components/tools/Print.vue
index 6e535ed..6078c12 100644
--- a/src/components/tools/Print.vue
+++ b/src/components/tools/Print.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { usePaper } from '@/composables/useApp';
+import { usePaper } from '@/composables/usePaper';
 
 const paper = usePaper();
 const onPrintClick = async () => {
diff --git a/src/components/tools/Save.vue b/src/components/tools/Save.vue
index 7026258..069972d 100644
--- a/src/components/tools/Save.vue
+++ b/src/components/tools/Save.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { usePaper } from '@/composables/useApp';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const runtime = useRuntime();
 const paper = usePaper();
diff --git a/src/components/tools/ViewOpt.vue b/src/components/tools/ViewOpt.vue
index 23b3fee..fb3de05 100644
--- a/src/components/tools/ViewOpt.vue
+++ b/src/components/tools/ViewOpt.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { toRef } from 'vue';
-import { usePaper } from '@/composables/useApp';
 import { SCALE_RANGE } from '@/components/core/config';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const runtime = useRuntime();
 const paper = usePaper();
diff --git a/src/composables/useApp.ts b/src/composables/useApp.ts
deleted file mode 100644
index a1c911e..0000000
--- a/src/composables/useApp.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { inject, reactive, type UnwrapNestedRefs } from 'vue';
-import { Paper, paperInjectionKey } from '@/classes/Paper';
-import { Material, type MaterialBaseConfig, materialInjectionKey } from '@/classes/Material';
-import { MaterialNames } from '@/components/materials/config';
-
-export function usePaper(): UnwrapNestedRefs<Paper> {
-    return inject(paperInjectionKey, reactive(new Paper({})));
-}
-
-export function useMaterial<T extends MaterialBaseConfig>(): UnwrapNestedRefs<{
-    instance: Material<T>;
-    active: boolean;
-    hover: boolean;
-    clicked: boolean;
-}> {
-    return inject(
-        materialInjectionKey,
-        reactive({
-            instance: new Material<T>({
-                x: 0,
-                y: 0,
-                w: 0,
-                h: 0,
-                config: {} as T,
-                componentName: MaterialNames.MText,
-            }),
-            active: false,
-            hover: false,
-            clicked: false,
-        }),
-    );
-}
diff --git a/src/composables/useMaterial.ts b/src/composables/useMaterial.ts
new file mode 100644
index 0000000..5b646f2
--- /dev/null
+++ b/src/composables/useMaterial.ts
@@ -0,0 +1,45 @@
+import { inject, type InjectionKey, provide, reactive, type UnwrapNestedRefs } from 'vue';
+import type { MaterialBaseConfig, MaterialInjection } from '@/classes/Material';
+import { Material } from '@/classes/Material';
+import { MaterialNames } from '@/components/materials/config';
+
+const materialInjectionKey: InjectionKey<UnwrapNestedRefs<MaterialInjection>> = Symbol('Material');
+
+const wrapMaterialWithState = (material: Material<any>) => {
+    return {
+        instance: material,
+        active: false,
+        hover: false,
+        clicked: false,
+    };
+};
+
+// 与runtime, paper类似，这里也是将Material类包装成响应式对象注入和使用
+export const createAndInjectReactiveMaterial = (material: Material<any>) => {
+    const reactiveMaterial = reactive(wrapMaterialWithState(material));
+    provide(materialInjectionKey, reactiveMaterial);
+    return reactiveMaterial;
+};
+
+export function useMaterial<T extends MaterialBaseConfig>(): UnwrapNestedRefs<{
+    instance: Material<T>;
+    active: boolean;
+    hover: boolean;
+    clicked: boolean;
+}> {
+    return inject(
+        materialInjectionKey,
+        reactive(
+            wrapMaterialWithState(
+                new Material<T>({
+                    x: 0,
+                    y: 0,
+                    w: 0,
+                    h: 0,
+                    config: {} as T,
+                    componentName: MaterialNames.MText,
+                }),
+            ),
+        ),
+    );
+}
diff --git a/src/composables/usePaper.ts b/src/composables/usePaper.ts
new file mode 100644
index 0000000..138114d
--- /dev/null
+++ b/src/composables/usePaper.ts
@@ -0,0 +1,26 @@
+import type { InjectionKey, UnwrapNestedRefs } from 'vue';
+import { inject, provide, reactive } from 'vue';
+import { Paper, PaperMode } from '@/classes/Paper';
+
+export const paperInjectionKey: InjectionKey<UnwrapNestedRefs<Paper>> = Symbol('Paper');
+export const paperShowPageNumInjectionKey: InjectionKey<number | null | undefined> =
+    Symbol('PaperShowPageNum');
+export const paperModeInjectionKey: InjectionKey<PaperMode> = Symbol('PaperMode');
+
+// 与useRuntime类似，这里也是将Paper类包装成响应式对象注入和使用
+// 需要修改的地方，主动使用toRef将属性转换为ref
+export const createAndInjectReactivePaper = (options?: { initData?: any }) => {
+    const paperInstance = reactive(new Paper({}));
+    const { initData } = options || {};
+    if (initData) paperInstance.loadData(initData);
+    provide(paperInjectionKey, paperInstance);
+    return paperInstance;
+};
+
+export function usePaper(): UnwrapNestedRefs<Paper> {
+    return inject(paperInjectionKey, reactive(new Paper({})));
+}
+
+export const usePaperMode = () => {
+    return inject(paperModeInjectionKey, PaperMode.Edit);
+};
diff --git a/src/composables/useRuntime.ts b/src/composables/useRuntime.ts
index 07a6b87..3dd51ee 100644
--- a/src/composables/useRuntime.ts
+++ b/src/composables/useRuntime.ts
@@ -2,6 +2,10 @@ import { inject, type InjectionKey, provide, reactive } from 'vue';
 import { Runtime } from '@/classes/Runtime';
 
 const runtimeInjectionKey: InjectionKey<Runtime> = Symbol('Runtime');
+
+// 设计思路：
+// 因为应用中的大多数地方都是对runtime进行读取，所以直接包装成响应式对象注入和使用
+// 需要修改的地方，主动使用toRef将属性转换为ref
 export const createAndInjectReactiveRuntime = () => {
     const runtime = reactive(new Runtime());
     provide(runtimeInjectionKey, runtime);