fuse-code/src/views/tagging-position/sign.vue

<template>
  <CollapsePanel header="title" :key="position.id" class="tag-pos-content-item">
    <template v-slot:header>
      <p>{{ title }}</p>
    </template>

    <div class="sign-position">
      <SignItem
        :label="$t('tagging.posTabs.type')"
        class="item"
        @apply-global="$emit('applyGlobal', 'type')"
      >
        <RadioGroup style="width: 100%" v-model:value="position.type">
          <RadioButton
            style="width: 50%; text-align: center"
            :value="TaggingPositionType['2d']"
            size="middle"
          >
            {{ $t("tagging.posTabs.typeVal0") }}
          </RadioButton>
          <RadioButton
            style="width: 50%; text-align: center"
            :value="TaggingPositionType['3d']"
            size="middle"
          >
            {{ $t("tagging.posTabs.typeVal1") }}
          </RadioButton>
        </RadioGroup>
      </SignItem>
      <SignItem
        :label="$t('tagging.posTabs.scale')"
        class="item"
        @apply-global="$emit('applyGlobal', ['mat', 'scale'])"
      >
        <Slider v-model:value="position.mat.scale" :min="0.5" :max="5" :step="0.1" />
      </SignItem>
      <SignItem
        :label="$t('tagging.posTabs.rotation')"
        class="item"
        v-if="TaggingPositionType['2d'] !== position.type"
        @apply-global="$emit('applyGlobal', ['mat', 'rotation'])"
      >
        <Slider v-model:value="position.mat.rotation" :min="0" :max="360" :step="0.1" />
      </SignItem>
      <SignItem
        :label="$t('tagging.posTabs.fontSize')"
        class="item"
        @apply-global="$emit('applyGlobal', 'fontSize')"
      >
        <Slider v-model:value="position.fontSize" :min="12" :max="60" :step="0.1" />
      </SignItem>
      <SignItem
        :label="$t('tagging.posTabs.lineHeight')"
        class="item"
        @apply-global="$emit('applyGlobal', 'lineHeight')"
      >
        <Slider v-model:value="position.lineHeight" :min="0" :max="5" :step="0.1" />
      </SignItem>
      <SignItem
        :label="$t('tagging.posTabs.visibilityRange')"
        class="item"
        v-if="!position.globalVisibility"
        @apply-global="$emit('applyGlobal', 'visibilityRange')"
      >
        <Slider
          v-model:value="position.visibilityRange"
          :min="1"
          :max="1000"
          :step="0.1"
        />
      </SignItem>
      <SignItem class="item" @apply-global="$emit('applyGlobal', 'globalVisibility')">
        <template v-slot:label>
          <ui-input
            type="checkbox"
            :label="$t('tagging.posTabs.globalVisibility')"
            :modelValue="!!position.globalVisibility"
            @update:modelValue="(v: boolean) => position.globalVisibility = v"
          />
        </template>
      </SignItem>
      <Button block type="primary" danger ghost size="large" @click="$emit('delete')">
        {{ $t("sys.del") }}
      </Button>
    </div>
  </CollapsePanel>
</template>

<script setup lang="ts">
import { CollapsePanel, Button, RadioGroup, Slider, RadioButton } from "ant-design-vue";
import SignItem from "./sign-item.vue";

import type { TaggingPosition } from "@/store";
import { TaggingPositionType } from "@/api";
import { computed, watchEffect } from "vue";
import { getTaggingPosNode } from "@/sdk";

const props = defineProps<{ position: TaggingPosition; title: string }>();
const emit = defineEmits<{
  (e: "applyGlobal", k: string | string[]): void;
  (e: "delete"): void;
  (e: "show"): void;
}>();
const node = computed(() => {
  return getTaggingPosNode(props.position);
});
watchEffect((onCleanup) => {
  if (!node.value) return;
  const $node = node.value;
  const clickHandler = () => {
    emit("show");
  };
  $node.bus.on("click", clickHandler);

  onCleanup(() => {
    $node.bus.off("click", clickHandler);
  });
});
</script>

<style lang="scss" scoped src="./style.scss"></style>

<style lang="scss">
.tag-pos-content-item {
  border-bottom: 1px solid var(--colors-border-color) !important;

  .ant-collapse-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .ant-collapse-content-box {
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.3);
  }
}
</style>