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

<template>
  <Tabs activeKey="t" width="100%">
    <TabPane key="t" tab="设置动画">
      <ui-group>
        <ui-group-option>
          <SignItem label="名称" not-apply>
            <ui-input
              width="100%"
              type="text"
              ref="nameInput"
              class="nameInput"
              placeholder="请输入名称"
              v-model="data.name"
              :maxlength="100"
            />
          </SignItem>
        </ui-group-option>
        <ui-group-option>
          <SignItem label="幅度" not-apply>
            <Slider v-model:value="data.amplitude" :min="0.1" :max="1" :step="0.1" />
          </SignItem>
        </ui-group-option>
        <ui-group-option>
          <SignItem label="速度" not-apply>
            <template v-slot:append>
              <span v-if="dur">时长: {{ round(dur, 2) }}S</span>
            </template>
            <Slider v-model:value="data.speed" :min="0.1" :max="10" :step="0.1" />
          </SignItem>
        </ui-group-option>

        <ui-group-option class="item">
          <span class="label">持续时间</span>
          <span class="oper">
            <ui-input
              width="75px"
              type="number"
              ref="nameInput"
              placeholder="请输入"
              :modelValue="data.duration"
              :min="0.1"
              @change="(ev: any) => $emit('updateDuration', Math.max(0.1, Number(ev.target.value)))"
            />
            &nbsp;S
          </span>
        </ui-group-option>
      </ui-group>
    </TabPane>
  </Tabs>
</template>

<script lang="ts" setup>
import { Slider, TabPane, Tabs } from "ant-design-vue";
import { AnimationModel, AnimationModelAction } from "@/api";
import SignItem from "@/views/tagging-position/sign-item.vue";
import { amMap } from "@/sdk/association/animation";
import { computed, ref } from "vue";
import { round } from "@/utils";

const props = defineProps<{ data: AnimationModelAction; am: AnimationModel }>();
defineEmits<{ (e: "updateDuration", dur: number): void }>();

const dur = computed(() => {
  const actions = amMap[props.am.id].am?.getSupportActions() || [];
  const action = actions.find((item) => item.name === props.data.key);
  if (action?.duration) {
    return action?.duration / props.data.speed;
  }
});
</script>

<style scoped lang="scss">
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>