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

<template>
  <Tabs v-model:activeKey="activeKey" width="100%">
    <TabPane key="setting" tab="设置">
      <ui-group borderBottom>
        <ui-group-option>
          <SignItem label="名称" not-apply>
            <ui-input
              width="100%"
              type="text"
              ref="nameInput"
              class="nameInput"
              placeholder="请输入名称"
              v-model="am.title"
              :maxlength="100"
            />
          </SignItem>
        </ui-group-option>
        <ui-group-option class="item">
          <span class="label">显示名称</span>
          <span class="oper"> <Switch v-model:checked="am.showTitle" /> </span>
        </ui-group-option>
      </ui-group>

      <ui-group borderBottom>
        <ui-group-option>
          <SignItem label="文字大小" @apply-global="$emit('applyGlobal', 'fontSize')">
            <Slider v-model:value="am.fontSize" :min="12" :max="60" :step="0.1" />
          </SignItem>
        </ui-group-option>
      </ui-group>
      <ui-group borderBottom>
        <ui-group-option>
          <SignItem
            label="可见范围"
            v-if="!am.globalVisibility"
            @apply-global="$emit('applyGlobal', 'globalVisibility')"
          >
            <Slider v-model:value="am.visibilityRange" :min="1" :max="1000" :step="0.1" />
          </SignItem>
        </ui-group-option>
        <ui-group-option>
          <ui-input
            type="checkbox"
            label="全部范围可视"
            :modelValue="!!am.globalVisibility"
            @update:modelValue="(v: boolean) => am.globalVisibility = v"
          />
        </ui-group-option>
      </ui-group>
    </TabPane>
    <TabPane key="animation" tab="动画">
      <ui-group borderBottom>
        <ui-group-option class="item">
          <span class="label">加帧</span>
          <span class="oper" @click="$emit('addFrame')">
            <ui-icon type="add" ctrl />
          </span>
        </ui-group-option>
        <ui-group-option class="item">
          <span class="label">路径</span>
          <span class="oper">
            <ui-icon @click="$emit('addPath')" type="add" ctrl />
          </span>
        </ui-group-option>
        <ui-group-option class="item">
          <span class="label">字幕</span>
          <span class="oper">
            <ui-icon @click="$emit('addSubtitle')" type="add" ctrl />
          </span>
        </ui-group-option>
      </ui-group>
      <ui-group borderBottom>
        <ui-group-option class="item">
          <span class="label">动作库</span>
        </ui-group-option>
        <ui-group-option class="actions">
          <span v-for="action in amActions">
            <img :src="action.url" />
          </span>
        </ui-group-option>
      </ui-group>
    </TabPane>
  </Tabs>
</template>

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

defineProps<{ am: AnimationModel }>();
defineEmits<{
  (e: "addFrame" | "addPath" | "addSubtitle"): void;
  (e: "applyGlobal", d: keyof AnimationModel): void;
}>();
const activeKey = ref("setting");
</script>

<style scoped lang="scss">
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pin-position {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 64px;
  height: 64px;
  background: rgba(27, 27, 28, 0.8);
  border-radius: 50%;
  bottom: 20px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;

  span {
    width: calc((100% - 28px) / 3);
    background: #fff;
    margin-top: 7px;
    margin-bottom: 7px;
    height: 80px;
    cursor: pointer;

    &:nth-child(3n - 1) {
      margin-left: 14px;
      margin-right: 14px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>

<style lang="scss">
.animation-right .ui-editor-toolbox {
  padding-top: 0;
  .ant-tabs-tab {
    font-size: 16px;
    padding: 16px 10px;
  }
}
</style>