fix: 1

src/components/subtitle/index.vue

@@ -1 +1,64 @@
-<template></template>
+<template>
+  <div
+    :style="{
+      left: pixel.x + 'px',
+      top: pixel.y + 'px',
+      visibility: show ? 'visible' : 'hidden',
+    }"
+    class="subtitle"
+    ref="dom"
+  >
+    <div :style="{ background: data.background }" v-html="data.content" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { AnimationModelSubtitle } from "@/api";
+import { Pos, Size } from "../drawing/dec";
+import { ref, watch, watchEffect } from "vue";
+
+const props = defineProps<{
+  data: AnimationModelSubtitle;
+  pixel: Pos;
+  show: boolean;
+  sizeChang: (csize: Size) => void;
+}>();
+
+const dom = ref<HTMLDivElement>();
+watch(
+  () => props.data.content,
+  () => {
+    watch(
+      dom,
+      (dom, _, onCleanup) => {
+        if (!dom) return;
+
+        const timeout = setTimeout(() => {
+          props.sizeChang({ width: dom.offsetWidth, height: dom.offsetHeight });
+        });
+        onCleanup(() => clearTimeout(timeout));
+      },
+      { immediate: true }
+    );
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.subtitle {
+  position: absolute;
+  z-index: 99;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+
+  > div {
+    max-width: 280px;
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 10px 20px;
+    color: #ffffff;
+    line-height: 16px;
+    word-break: break-all;
+  }
+}
+</style>

src/sdk/association/animation.ts

@@ -318,12 +318,11 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
 
   const stopAttrib = mergeFuns(
     watch([currentTime, () => amMap[am.id].am, size], () => {
-      console.log(data.time , currentTime.value, data.time + data.duration)
       if (
         currentTime.value >= data.time &&
         currentTime.value <= (data.time + data.duration) 
       ) {
-        amMap[am.id].am?.getCurrentSubtitlePixel(size.value);
+        pixel.value = amMap[am.id].am?.getCurrentSubtitlePixel(size.value);
         show.value = true;
       } else {
         show.value = false;

src/views/animation/index.vue

@@ -16,7 +16,7 @@
       v-model:activeAttrib="activeAttrib"
       @add-frame="add('frames', { duration: 0 })"
       @add-path="(preset) => add('paths', { reverse: false, ...preset })"
-      @add-subtitle="add('subtitles', { content: '', background: '#fff' })"
+      @add-subtitle="add('subtitles', { content: '', background: '#000000' })"
       @add-action="(preset) => add('actions', preset)"
       @apply-global="k => ams.forEach((am: any) => (am[k] = focusAM![k]))"
     />

src/views/animation/right/am.vue

@@ -65,7 +65,7 @@
         <ui-group-option class="item">
           <span class="label">字幕</span>
           <span class="oper">
-            <ui-icon @click="$emit('addSubtitle')" type="add_a" ctrl />
+            <ui-icon @click="$emit('addSubtitle', {background: '#000'})" type="add_a" ctrl />
           </span>
         </ui-group-option>
       </ui-group>