fuse-code/src/views/animation/right/path.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>
            <ui-input
              width="100%"
              type="select"
              :options="options"
              placeholder="请选择路径"
              v-model="data.pathId"
            />
          </SignItem>
        </ui-group-option>
        <ui-group-option class="item">
          <span class="label">终点反向</span>
          <span class="oper"> <Switch v-model:checked="data.reverse" /> </span>
        </ui-group-option>
        <ui-group-option class="item">
          <span class="label">持续时间</span>
          <span class="oper">
            <ui-input
              width="75px"
              type="number"
              placeholder="请输入"
              :modelValue="data.duration"
              @update:modelValue="(dur: number) => $emit('updateDuration', dur)"
            />
            S
          </span>
        </ui-group-option>
      </ui-group>
    </TabPane>
  </Tabs>
</template>

<script lang="ts" setup>
import { TabPane, Tabs, Switch } from "ant-design-vue";
import { AnimationModelPath } from "@/api";
import { paths } from "@/store";
import { computed } from "vue";
import SignItem from "@/views/tagging-position/sign-item.vue";

const options = computed(() =>
  paths.value.map((item) => ({ label: item.name, value: item.id }))
);

defineProps<{ data: AnimationModelPath }>();
defineEmits<{ (e: "updateDuration", dur: number): void }>();
</script>

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