src/components/Prompt/PromptList.tsx

import React, { useState } from 'react';
import { Prompt } from '../../types';
import Card, { CardHeader, CardContent } from '../common/Card';
import Button from '../common/Button';
import PromptForm from './PromptForm';
import { exportPrompt, exportMultiplePrompts } from '../../utils/exportUtils';

interface PromptListProps {
  groupId: string;
  prompts: Prompt[];
  onAddPrompt: (promptData: { title: string; content: string; tags: string[] }) => void;
  onUpdatePrompt: (promptId: string, promptData: { title: string; content: string; tags: string[] }) => void;
  onDeletePrompt: (promptId: string) => void;
}
const PromptList: React.FC<PromptListProps> = ({

  groupId,

  prompts,

  onAddPrompt,

  onUpdatePrompt,

  onDeletePrompt

}) => {
  const [showNewPromptForm, setShowNewPromptForm] = useState(false);
  const [editingPromptId, setEditingPromptId] = useState<string | null>(null);
  const [selectedPrompts, setSelectedPrompts] = useState<string[]>([]);
  const [isSelectMode, setIsSelectMode] = useState(false);

  const handleEditPrompt = (promptId: string) => {
    setEditingPromptId(promptId);
  };

  const handleDeletePrompt = (promptId: string) => {
    if (window.confirm('确定要删除此提示词吗？此操作不可撤销。')) {
      onDeletePrompt(promptId);
    }
  };

  const handleSavePrompt = (promptData: { title: string; content: string; tags: string[] }) => {
    if (editingPromptId) {
      // 如果正在编辑提示词，调用 onUpdatePrompt
      onUpdatePrompt(editingPromptId, promptData);
      setEditingPromptId(null);
    } else {
      // 如果正在创建新提示词，调用 onAddPrompt
      onAddPrompt(promptData);
      setShowNewPromptForm(false);
    }
  };

  const handleExportPrompt = (prompt: Prompt) => {
    exportPrompt(prompt);
  };

  const handleToggleSelectPrompt = (promptId: string) => {
    setSelectedPrompts(prevSelected => {
      if (prevSelected.includes(promptId)) {
        return prevSelected.filter(id => id !== promptId);
      } else {
        return [...prevSelected, promptId];
      }
    });
  };

  const handleSelectAll = () => {
    if (selectedPrompts.length === prompts.length) {
      setSelectedPrompts([]);
    } else {
      setSelectedPrompts(prompts.map(p => p._id));
    }
  };

  const handleExportSelected = () => {
    const selectedPromptObjects = prompts.filter(p => selectedPrompts.includes(p._id));
    exportMultiplePrompts(selectedPromptObjects);
  };

  const handleDeleteSelected = () => {
    if (window.confirm(`确定要删除选中的 ${selectedPrompts.length} 个提示词吗？此操作不可撤销。`)) {
      selectedPrompts.forEach(promptId => {
        onDeletePrompt(promptId);
      });
      setSelectedPrompts([]);
      setIsSelectMode(false);
    }
  };

  if (prompts.length === 0 && !showNewPromptForm) {
    return (
      <div>

        <div className="ios-empty-state">

          <div className="ios-empty-state-icon">

            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>

              <polyline points="14 2 14 8 20 8"></polyline>

              <line x1="16" y1="13" x2="8" y2="13"></line>

              <line x1="16" y1="17" x2="8" y2="17"></line>

              <polyline points="10 9 9 9 8 9"></polyline>

            </svg>

          </div>

          <h3 className="ios-empty-state-title">暂无提示词</h3>

          <p className="ios-empty-state-text">添加提示词以便于管理和使用</p>

          <Button

            variant="primary"

            className="mt-4"

            onClick={() => setShowNewPromptForm(true)}

          >

            添加提示词

          </Button>

        </div>

      </div>
    );
  }

  return (
    <div>

      <div className="flex justify-between items-center mb-4">

        <h3 className="text-lg font-medium">提示词列表</h3>

        <div className="flex space-x-2">

          {isSelectMode ? (

            <>

              <Button

                variant="secondary"

                size="small"

                onClick={handleSelectAll}

              >

                {selectedPrompts.length === prompts.length ? '取消全选' : '全选'}

              </Button>

              <Button

                variant="primary"

                size="small"

                onClick={handleExportSelected}

                disabled={selectedPrompts.length === 0}

              >

                导出选中

              </Button>

              <Button

                variant="danger"

                size="small"

                onClick={handleDeleteSelected}

                disabled={selectedPrompts.length === 0}

              >

                删除选中

              </Button>

              <Button

                variant="secondary"

                size="small"

                onClick={() => {

                  setIsSelectMode(false);

                  setSelectedPrompts([]);

                }}

              >

                取消

              </Button>

            </>

          ) : (

            <>

              <Button

                variant="secondary"

                size="small"

                onClick={() => setIsSelectMode(true)}

              >

                选择

              </Button>

              <Button

                variant="primary"

                size="small"

                onClick={() => setShowNewPromptForm(true)}

              >

                添加提示词

              </Button>

            </>

          )}

        </div>
      </div>

      {showNewPromptForm && !editingPromptId && (
        <Card className="mb-4">

          <CardHeader title="新增提示词" />

          <CardContent>

            <PromptForm

              onSubmit={handleSavePrompt}

              onCancel={() => setShowNewPromptForm(false)}

            />

          </CardContent>

        </Card>
      )}

      <div className="space-y-4">
        {prompts.map((prompt) => (
          <Card key={prompt._id} className="mb-4">

            {editingPromptId === prompt._id ? (

              <CardContent>

                <PromptForm

                  initialPrompt={prompt}

                  onSubmit={handleSavePrompt}

                  onCancel={() => setEditingPromptId(null)}

                />

              </CardContent>

            ) : (

              <>

                <CardHeader

                  title={prompt.title}

                  subtitle={new Date(prompt.updatedAt).toLocaleDateString('zh-CN', {

                    year: 'numeric',

                    month: 'long',

                    day: 'numeric'

                  })}

                  action={

                    isSelectMode && (

                      <div 

                        className="w-6 h-6 rounded-md border border-gray-300 flex items-center justify-center cursor-pointer"

                        onClick={() => handleToggleSelectPrompt(prompt._id)}

                      >

                        {selectedPrompts.includes(prompt._id) && (

                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

                            <polyline points="20 6 9 17 4 12"></polyline>

                          </svg>

                        )}

                      </div>

                    )

                  }

                />

                <CardContent>

                  <pre className="whitespace-pre-wrap text-gray-700 mb-4 font-sans max-h-48 overflow-y-auto">

                    {prompt.content}

                  </pre>

                  

                  {prompt.tags.length > 0 && (

                    <div className="flex flex-wrap mb-4">

                      {prompt.tags.map((tag) => (

                        <div 

                          key={tag} 

                          className="ios-tag bg-blue-100 text-blue-800"

                        >

                          {tag}

                        </div>

                      ))}

                    </div>

                  )}

                  

                  {!isSelectMode && (

                    <div className="flex justify-end space-x-2">

                      <Button

                        variant="secondary"

                        size="small"

                        onClick={() => handleExportPrompt(prompt)}

                      >

                        导出

                      </Button>

                      <Button

                        variant="secondary"

                        size="small"

                        onClick={() => handleEditPrompt(prompt._id)}

                      >

                        编辑

                      </Button>

                      <Button

                        variant="danger"

                        size="small"

                        onClick={() => handleDeletePrompt(prompt._id)}

                      >

                        删除

                      </Button>

                    </div>

                  )}

                </CardContent>

              </>
            )}
          </Card>
        ))}
      </div>
    </div>
  );
};

export default PromptList;