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,87 @@
+<script setup lang="ts">
+import { reactive, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import type { CreateKolPackageRequest } from "@geo/shared-types";
+
+const props = defineProps<{
+  open: boolean;
+  initialValue?: Partial<CreateKolPackageRequest>;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void;
+  (e: "submit", value: CreateKolPackageRequest): void;
+}>();
+
+const { t } = useI18n();
+
+const formState = reactive<CreateKolPackageRequest>({
+  name: "",
+  description: "",
+  industry: "",
+  tags: [],
+  price_note: "",
+  cover_url: "",
+});
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen) {
+      Object.assign(formState, {
+        name: props.initialValue?.name || "",
+        description: props.initialValue?.description || "",
+        industry: props.initialValue?.industry || "",
+        tags: props.initialValue?.tags || [],
+        price_note: props.initialValue?.price_note || "",
+        cover_url: props.initialValue?.cover_url || "",
+      });
+    }
+  }
+);
+
+function handleOk() {
+  if (!formState.name.trim()) return;
+  emit("submit", { ...formState });
+  emit("update:open", false);
+}
+
+function handleCancel() {
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    :title="initialValue ? t('kol.manage.editPackage') : t('kol.manage.createPackage')"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form layout="vertical">
+      <a-form-item :label="t('common.title')" required>
+        <a-input v-model:value="formState.name" :placeholder="t('common.inputPlease')" />
+      </a-form-item>
+      
+      <a-form-item :label="t('common.description')">
+        <a-textarea v-model:value="formState.description" :rows="3" />
+      </a-form-item>
+
+      <a-form-item :label="t('kol.marketplace.filter.industry')">
+        <a-input v-model:value="formState.industry" />
+      </a-form-item>
+
+      <a-form-item label="Tags">
+        <a-select v-model:value="formState.tags" mode="tags" style="width: 100%" placeholder="Add tags" />
+      </a-form-item>
+
+      <a-form-item label="Price Note">
+        <a-input v-model:value="formState.price_note" />
+      </a-form-item>
+
+      <a-form-item label="Cover URL">
+        <a-input v-model:value="formState.cover_url" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>