fuse-code/src/views/animation/right/index.vue

<template>
  <RightFillPano class="animation-right" v-if="activeAttrib?.key !== 'frames'">
    <AM
      v-if="!activeAttrib || !~activeAttrib.ndx"
      :am="am"
      @add-frame="emit('addFrame')"
      @add-path="emit('addPath')"
      @add-subtitle="emit('addSubtitle')"
      @apply-global="(k) => emit('applyGlobal', k)"
    />
    <template v-else>
      <ui-icon
        style="font-size: 16px"
        type="close"
        class="close"
        ctrl
        @click="emit('update:activeAttrib', undefined)"
      />
      <component
        @updateDuration="setDuration"
        :is="(comps[activeAttrib.key] as any)"
        :data="am[activeAttrib.key][activeAttrib.ndx]"
      />
    </template>
  </RightFillPano>
  <Frame
    :data="am[activeAttrib.key][activeAttrib.ndx]"
    :frame-action="frameAction"
    @change-frame-action="(d) => emit('changeFrameAction', d)"
    v-else
  />
</template>

<script lang="ts" setup>
import { RightFillPano } from "@/layout";
import { Active } from "../type";
import AM from "./am.vue";
import Action from "./action.vue";
import Frame from "./frame.vue";
import Path from "./path.vue";
import Subtitle from "./subtitle.vue";
import { checkTLItem } from "@/components/drawing-time-line/check";
import { Message } from "bill/expose-common";
import { AnimationModel, AnimationModelFrame } from "@/store/animation";

const props = defineProps<{
  am: AnimationModel;
  activeAttrib?: Active;
  frameAction?: string;
}>();
const emit = defineEmits<{
  (e: "update:activeAttrib", d: undefined): void;
  (e: "addFrame" | "addPath" | "addSubtitle"): void;
  (e: "applyGlobal", d: keyof AnimationModel): void;
  (e: "changeFrameAction", d: { action?: string; frame: AnimationModelFrame }): void;
}>();

const comps = {
  actions: Action,
  paths: Path,
  subtitles: Subtitle,
};
const title = {
  actions: "动作",
  paths: "路径",
  subtitles: "字幕",
  frames: "",
};
const setDuration = (dur: number) => {
  const ndx = props.activeAttrib!.ndx;
  const items = props.am[props.activeAttrib!.key];
  const cur = items[ndx];

  if (!checkTLItem(items, { ...cur, duration: dur }, ndx)) {
    Message.error("当前时间已存在其他" + title[props.activeAttrib!.key]);
  } else {
    cur.duration = dur;
  }
};
</script>

<style lang="scss">
.close {
  position: absolute;
  right: 21px;
  top: 26px;
  z-index: 9;
}
.animation-right .ui-editor-toolbox {
  padding-top: 0;
  .ant-tabs-tab {
    font-size: 16px;
    padding: 16px 10px;
  }
}
</style>