fix:pen-image-animate

src/views/components/PenAnimates.vue

@@ -213,7 +213,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, ref } from 'vue';
+import { onBeforeMount, ref, watch, onUnmounted } from 'vue';
 
 import { getPenTree } from '@/services/common';
 import { deepClone } from '@meta2d/core';
@@ -370,6 +370,19 @@ onBeforeMount(() => {
   penTree.value = getPenTree();
 });
 
+const watcher = watch(
+  () => props.pen.id,
+  () => {
+    const p = meta2d.findOne(props.pen.id);
+    if (p?.calculative?.start) {
+      // @ts-ignore
+      isPlaying.value = p?.currentAnimation;
+    } else {
+      isPlaying.value = -1;
+    }
+  }
+);
+
 const addAnimate = () => {
   openedCollapses.value.push(props.pen.animations.length);
   props.pen.animations.push({
@@ -398,6 +411,10 @@ const stop = () => {
   meta2d.stopAnimate(props.pen.id);
   isPlaying.value = -1;
 };
+
+onUnmounted(() => {
+  watcher();
+});
 </script>
 <style lang="postcss" scoped>
 .animations {

src/views/components/PenProps.vue

@@ -464,7 +464,7 @@
                       placeholder="0"
                       v-model.number="data.pen.shadowOffsetX"
                       style="width: 60px"
-                      @change="changeValue('x')"
+                      @change="changeValue('shadowOffsetX')"
                       title="X偏移"
                     />
                     <t-input
@@ -765,8 +765,10 @@
                     @remove="fileRemoved"
                   >
                     <template #fileListDisplay>
-                      <a class="mr-4" @click="upload"> 点击上传 </a>
-                      / 拖拽图片到此区域
+                      <div style="z-index: 20">
+                        <a class="mr-4" @click="upload"> 点击上传 </a>
+                        / 拖拽图片到此区域
+                      </div>
                     </template>
                   </t-upload>
                 </div>
@@ -1217,17 +1219,21 @@ const onFontFamily = (fontFamily: string) => {
 };
 
 const fileSuccessed = async (content: any) => {
-  meta2d.store.patchFlagsBackground = true;
-  meta2d.setBackgroundImage(content.response.url);
-  meta2d.store.patchFlagsBackground = true;
+  // meta2d.store.patchFlagsBackground = true;
+  // meta2d.setBackgroundImage(content.response.url);
+  // meta2d.store.patchFlagsBackground = true;
+  data.pen.image = content.response.url;
+  updatePen(data.pen, 'image');
   meta2d.render();
 };
 
 const fileRemoved = () => {
-  meta2d.setBackgroundImage('');
-  meta2d.store.patchFlagsBackground = true;
+  // meta2d.setBackgroundImage('');
+  // meta2d.store.patchFlagsBackground = true;
+  data.pen.image = '';
+  updatePen(data.pen, 'image');
   meta2d.render();
-  data.background = [];
+  // data.background = [];
 };
 
 const upload = () => {

src/views/components/View.vue

@@ -730,7 +730,7 @@ import ChargeCloudPublish from './ChargeCloudPublish.vue';
 
 const router = useRouter();
 const route = useRoute();
-const { user } = useUser();
+const { user, getUser } = useUser();
 const { dot, setDot } = useDot();
 const { select } = useSelection();
 
@@ -799,6 +799,7 @@ const open = async (flag: boolean = false) => {
   if (route.query.token) {
     localStorage.setItem('token', route.query.token + '');
     setCookie('token', route.query.token + '');
+    getUser();
     const newQuery = { ...route.query };
     delete newQuery.token;
     router.replace({