geo/apps/admin-web/src/components/kol/KolVariablePanel.vue

<script setup lang="ts">
import {
  CheckSquareOutlined,
  EditOutlined,
  FontSizeOutlined,
  NumberOutlined,
  OrderedListOutlined,
} from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const componentTypes = [
  { type: 'input', icon: FontSizeOutlined },
  { type: 'textarea', icon: EditOutlined },
  { type: 'select', icon: OrderedListOutlined },
  { type: 'number', icon: NumberOutlined },
  { type: 'checkbox', icon: CheckSquareOutlined },
] as const

function onDragStart(event: DragEvent, type: string) {
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/kol-variable-type', type)
    event.dataTransfer.effectAllowed = 'copy'
  }
}
</script>

<template>
  <div class="kol-variable-panel">
    <div
      v-for="item in componentTypes"
      :key="item.type"
      class="variable-item"
      draggable="true"
      @dragstart="onDragStart($event, item.type)"
    >
      <component :is="item.icon" class="item-icon" />
      <span class="item-label">{{ t(`kol.manage.variable.${item.type}`) }}</span>
    </div>
  </div>
</template>

<style scoped>
.kol-variable-panel {
  width: 200px;
  padding: 16px;
  background: #fff;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.variable-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: grab;
  transition: all 0.3s;
  user-select: none;
}

.variable-item:hover {
  border-color: #40a9ff;
  color: #40a9ff;
  background: #fff;
}

.variable-item:active {
  cursor: grabbing;
}

.item-icon {
  margin-right: 8px;
  font-size: 16px;
}

.item-label {
  font-size: 14px;
}
</style>