Hugging Face's logo

Spaces:
samlax12
/
promptmanager
Sleeping

App Files Community
promptmanager
File size: 3,244 Bytes 
e85fa50
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
import React, { useState } from 'react';
import { PromptGroup } from '../../types';
import Input from '../common/Input';
import TextArea from '../common/TextArea';
import Button from '../common/Button';
import CategorySelector from '../Category/CategorySelector';
import { useApp } from '../../contexts/AppContext';

interface PromptGroupFormProps {
  initialPromptGroup?: Partial<PromptGroup>;
  onSubmit: (promptGroup: { name: string; description: string; category: string }) => void;
  onCancel: () => void;
}

const PromptGroupForm: React.FC<PromptGroupFormProps> = ({

  initialPromptGroup = {},

  onSubmit,

  onCancel

}) => {
  const { categories } = useApp();
  const [name, setName] = useState(initialPromptGroup.name || '');
  const [description, setDescription] = useState(initialPromptGroup.description || '');
  const [category, setCategory] = useState(initialPromptGroup.category || (categories.length > 0 ? categories[0]._id : ''));
  const [errors, setErrors] = useState({
    name: '',
    category: ''
  });

  const validate = (): boolean => {
    const newErrors = {
      name: '',
      category: ''
    };
    
    if (!name.trim()) {
      newErrors.name = '请输入提示词组名称';
    }
    
    if (!category) {
      newErrors.category = '请选择分类';
    }
    
    setErrors(newErrors);
    
    return !newErrors.name && !newErrors.category;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validate()) return;
    
    // 确保 category 是字符串类型
    const categoryId = typeof category === 'object' ? category._id : category;
    
    onSubmit({
      name: name.trim(),
      description: description.trim(),
      category: categoryId
    });
  };

  const handleCategoryChange = (categoryId: string) => {
    setCategory(categoryId);
    if (errors.category) {
      setErrors(prev => ({ ...prev, category: '' }));
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">

      <Input

        label="名称"

        placeholder="输入提示词组名称"

        value={name}

        onChange={(e) => setName(e.target.value)}

        error={errors.name}

        required

      />

      

      <TextArea

        label="描述"

        placeholder="输入提示词组描述..."

        value={description}

        onChange={(e) => setDescription(e.target.value)}

        rows={4}

      />

      

      <div>

        <label className="block text-sm font-medium mb-1 text-gray-700">

          分类 {errors.category && <span className="text-red-600">({errors.category})</span>}

        </label>

        <CategorySelector

          selectedCategory={category}

          onChange={handleCategoryChange}

        />

      </div>

      

      <div className="flex justify-end space-x-3 mt-6">

        <Button

          type="button"

          variant="secondary"

          onClick={onCancel}

        >

          取消

        </Button>

        <Button

          type="submit"

          variant="primary"

        >

          保存

        </Button>

      </div>

    </form>
  );
};

export default PromptGroupForm;