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="图标放置方式"
        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"
          >
            悬浮
          </RadioButton>
          <RadioButton
            style="width: 50%; text-align: center"
            :value="TaggingPositionType['3d']"
            size="middle"
          >
            贴地/墙
          </RadioButton>
        </RadioGroup>
      </SignItem>
      <SignItem
        label="图标大小"
        class="item"
        @apply-global="$emit('applyGlobal', ['mat', 'scale'])"
      >
        <Slider v-model:value="position.mat.scale" :min="0.1" :max="10" :step="0.1" />
      </SignItem>
      <SignItem
        label="图标角度"
        class="item"
        @apply-global="$emit('applyGlobal', ['mat', 'rotation'])"
      >
        <Slider v-model:value="position.mat.rotation" :min="0" :max="360" :step="0.1" />
      </SignItem>
      <SignItem
        label="文字大小"
        class="item"
        @apply-global="$emit('applyGlobal', 'fontSize')"
      >
        <Slider v-model:value="position.fontSize" :min="0" :max="360" :step="0.1" />
      </SignItem>
      <SignItem
        label="引线高度"
        class="item"
        @apply-global="$emit('applyGlobal', 'lineHeight')"
      >
        <Slider v-model:value="position.lineHeight" :min="0" :max="10" :step="0.1" />
      </SignItem>
      <SignItem class="item" @apply-global="$emit('applyGlobal', 'globalVisibility')">
        <template v-slot:label>
          <ui-input
            type="checkbox"
            label="全部范围可见"
            :modelValue="!!position.globalVisibility"
            @update:modelValue="(v: boolean) => position.globalVisibility = v"
          />
        </template>
      </SignItem>
      <SignItem
        label="可见范围"
        class="item"
        v-if="!position.globalVisibility"
        @apply-global="$emit('applyGlobal', 'visibilityRange')"
      >
        <Slider
          v-model:value="position.visibilityRange"
          :min="10"
          :max="1000"
          :step="0.1"
        />
      </SignItem>
      <Button block type="primary" danger ghost size="large" @click="$emit('delete')">
        删除
      </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";

defineProps<{ position: TaggingPosition; title: string }>();

defineEmits<{
  (e: "applyGlobal", k: string | string[]): void;
  (e: "delete"): void;
}>();
</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>