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', 'visibilityRange')"
          >
            <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="keys_a" ctrl />
          </span>
        </ui-group-option>
        <ui-group-option class="item">
          <span class="label">路径</span>
          <span class="oper">
            <ui-icon @click="visibleSelectPath = true" type="add_a" ctrl />
          </span>
        </ui-group-option>
        <ui-group-option class="item">
          <span class="label">字幕</span>
          <span class="oper">
            <ui-icon
              @click="$emit('addSubtitle', { background: '#000' })"
              type="add_a"
              ctrl
            />
          </span>
        </ui-group-option>
      </ui-group>
      <ui-group borderBottom v-if="amActions.length">
        <ui-group-option class="item">
          <span class="label">动作库</span>
        </ui-group-option>
        <ui-group-option class="item action-item" v-for="action in amActions">
          <span class="label">{{ action.title }}</span>
          <span class="oper">
            <ui-icon
              type="add_a"
              ctrl
              @click="
                $emit('addAction', {
                  amplitude: 1,
                  speed: 1,
                  key: action.action,
                  name: action.title,
                  duration: getActionDur(action.action),
                })
              "
            />
          </span>
        </ui-group-option>
        <!-- <ui-group-option class="actions">
          <div
            v-for="action in amActions"
            @click="$emit('addAction', { key: action.action, name: action.title })"
          >
            <img :src="action.url" />
            <span>{{ action.title }}</span>
          </div>
        </ui-group-option> -->
      </ui-group>
    </TabPane>
  </Tabs>

  <Modal
    width="400px"
    title="选择路径"
    :open="visibleSelectPath"
    @ok="selectPathHandler"
    @cancel="visibleSelectPath = false"
    okText="确定"
    cancelText="取消"
    class="model-table"
  >
    <div style="margin: 20px 0">
      <ui-input
        width="100%"
        type="select"
        :options="options"
        placeholder="请选择路径"
        v-model="pathId"
      />
    </div>
  </Modal>
</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 { computed, ref } from "vue";
import { round } from "@/utils";
import { paths } from "@/store/path";
import Message from "bill/components/message/message.vue";
import { Modal } from "ant-design-vue";
import { amMap, getAMKey } from "@/sdk/association/animation";

const props = defineProps<{ am: AnimationModel }>();
const emit = defineEmits<{
  (e: "addFrame" | "addPath" | "addSubtitle" | "addAction", preset?: any): void;
  (e: "applyGlobal", d: keyof AnimationModel): void;
}>();
const activeKey = ref("setting");

const actionsMap: Record<string, string> = {
  sit_to_stand: "坐：站起",
  fist_pump: "坐下",
  end_bicycle_sit_up: "躺：起来",
  hit_on_legs: "向后倒下",
  crawling: "爬",
  medium_hit_to_head: "挨打",
  illegal_knee: "左膝盖",
  death_from_back_headshot: "向前倒地",
  dying: "向前倒地死掉",
  standard_walk: "标准走",
  start_walking: "起步走",
  left_turn_wbriefcase: "向左转",
  running: "标准跑",
  drunk_walk: "醉汉走",
  mma_kick: "右前踢",
  standing_jump: "标准向上跳",
  sitting: "标准坐",
  a_idel: "站立",
  peone_forward: "匍匐前行",
  wall_crash: "松手摔倒",
  head_hit: "头被击中",
  Fireman_Bash: "砸门",
  Fireman_Climb: "翻越",
  Fireman_Crouching: "蹲下",
  Women_Bash: "砸门",
  Women_Climb: "翻越",
  Women_Crouching: "蹲下",
  Women_Kicking: "踢门",
  "Women_Opening-Door-Inwards": "开门",
  "Fireman_Death-Form-Back-Headshot": "向前倒地",
  "Fireman_Illeagal-Knee-Left": "左膝盖",
  "Fireman_Illeagal-Knee-Right": "右膝盖",
  "Fireman_Opening-Door-Inwards": "开门",
  Fireman_Kicking: "踢门",
  "Fireman_Left-Turn-Wbirefcase": "左转弯",
};
Object.keys(actionsMap).forEach((action) => {
  const val = actionsMap[action];
  let key = action.toLowerCase().replaceAll(/( |-)/gi, "_");
  actionsMap[key] = val;
});
const keys = Object.keys(actionsMap);
const amActions = computed(() => {
  const actions = amMap[getAMKey(props.am)]?.am?.getSupportActions() || [];
  return actions.map(({ name: action, duration }) => {
    let key = action.toLowerCase().replaceAll(/( |-)/gi, "_");
    !keys.find((k) => key.includes(k)) && console.log(key);
    key = keys.find((k) => key.includes(k)) || key;

    return { action, title: actionsMap[key] || action, duration };
  });
});

const options = computed(() =>
  paths.value.map((item) => ({ label: item.name, value: item.id }))
);
const pathId = ref<string>();
const visibleSelectPath = ref(false);
const selectPathHandler = () => {
  if (!pathId.value) {
    Message.error("请选择路径");
    return;
  }
  const name = options.value.find(({ value }) => value === pathId.value)!.label;
  console.log(pathId.value);
  emit("addPath", { name, pathId: pathId.value });
  visibleSelectPath.value = false;
};

const getActionDur = (key: string) => {
  const actions = amMap[getAMKey(props.am)]?.am?.getSupportActions() || [];
  const action = actions.find((item) => item.name === key);
  if (action?.duration) {
    return Math.floor(action?.duration * 100) / 100;
  }
};
</script>

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

  &.action-item {
    height: 38px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 10px;
    padding: 0 10px;
  }
}
.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;

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

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.5);
    }
    span {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: #fff;
      width: 100%;
      text-align: center;
    }

    &: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>