feat(kol): three-pane prompt editor + KolManageView UI

2026-04-17 14:08:34 +08:00
parent d5f7cdfc5f
commit 6eb663bd6e
9 changed files with 1319 additions and 7 deletions
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import {
+  FontSizeOutlined,
+  EditOutlined,
+  OrderedListOutlined,
+  NumberOutlined,
+  CheckSquareOutlined,
+} 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>