shalu-bigscreen-desiner/src/views/designer/component/LayerItem.vue

<template>
  <div
    class="list-item"
    :class="{
      'list-item-active': projectStore.selectedElementKeys.includes(data.key),
    }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
    @click="handleActive"
  >
    <template v-if="!isEditing">
      <span class="list-item-visible">
        <EyeOutlined v-if="data.visible && isHover" @click="handleVisible(false)" />
        <EyeInvisibleOutlined v-if="!data.visible" @click="handleVisible(true)" />
      </span>
      <span class="layer-name">
        <Tooltip :title="data.name">
          <span @dblclick="isEditing = true">{{ data.name }}</span>
        </Tooltip>
      </span>
      <span class="layer-action">
        <span v-show="isHover">
          <Dropdown :trigger="['click']">
            <Tooltip title="更多">
              <MoreOutlined />
            </Tooltip>
            <template #overlay>
              <Menu @click="handleMenuClick">
                <MenuItem key="rename"><EditOutlined />重命名</MenuItem>
                <MenuItem key="del"><DeleteOutlined />删除</MenuItem>
              </Menu>
            </template>
          </Dropdown>
        </span>

        <Tooltip title="解锁" v-if="data.locked">
          <LockOutlined @click="handleLock(false)"/>
        </Tooltip>
        <span v-else v-show="isHover">
          <Tooltip title="锁定">
            <UnlockOutlined @click="handleLock(true)"/>
          </Tooltip>
        </span>
        
      </span>
    </template>

    <Input
      v-else
      v-model:value="layerName"
      placeholder="请输入图层名称"
      size="small"
      :status="!layerName ? 'error' : undefined"
      @blur="handleChangeName"
    />
  </div>
</template>

<script setup lang="ts">
import type { CustomElement } from "#/project";
import { defineProps, ref } from "vue";
import { Tooltip, Dropdown, Menu, MenuItem, Input } from "ant-design-vue";
import {
  EyeOutlined,
  EyeInvisibleOutlined,
  MoreOutlined,
  LockOutlined,
  UnlockOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { useProjectStore } from "@/store/modules/project";

const props = defineProps<{
  data: CustomElement;
}>();

const projectStore = useProjectStore();

const layerName = ref<string>(props.data.name);

const isEditing = ref(false);
const isHover = ref(false);

const handleMenuClick = ({ key }: { key: "rename" | "del" }) => {
  if (key === "rename") {
    isEditing.value = true;
  } else {
    projectStore.removeElement(props.data.key);
  }
};

const handleChangeName = () => {
  isEditing.value = false;
  if (!layerName.value) {
    layerName.value = props.data.name;
    return;
  };
  projectStore.updateElement(props.data.key, "name", layerName.value);
};

const handleActive = () => {
  projectStore.setSelectedElementKeys([props.data.key]);
};

const handleLock = (locked: boolean) => {
  projectStore.updateElement(props.data.key, "locked", locked);
};

const handleVisible = (visible: boolean) => {
  projectStore.updateElement(props.data.key, "visible", visible);
};
</script>

<style lang="less" scoped>
.list-item {
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  color: #666;
  font-size: 12px;
  line-height: 24px;
  &:hover {
    background: #e6f4ff;
  }
  &-visible {
    cursor: pointer;
    width: 10px;
  }
  .layer-name {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &-active {
    background: #e6f4ff;
    color: #1677ff;
  }
  .layer-action {
    width: 30px;
    text-align: right;
  }
}
</style>