imeeting/frontend/src/pages/business/PromptTemplates.tsx

import React, { useState, useEffect } from 'react';
import { Card, Button, Input, Space, Drawer, Form, Select, Tag, message, Popconfirm, Typography, Divider, Tooltip, Row, Col, List, Empty, Skeleton, Switch, Modal } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, CopyOutlined, SearchOutlined, SaveOutlined, StarFilled } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import { useDict } from '../../hooks/useDict';
import { 
  getPromptPage, 
  savePromptTemplate, 
  updatePromptTemplate, 
  deletePromptTemplate, 
  updatePromptStatus,
  PromptTemplateVO,
  PromptTemplateDTO 
} from '../../api/business/prompt';

const { Option } = Select;
const { Text, Title } = Typography;

const PromptTemplates: React.FC = () => {
  const [form] = Form.useForm();
  const [searchForm] = Form.useForm();
  const { items: categories, loading: dictLoading } = useDict('biz_prompt_category');
  const { items: dictTags } = useDict('biz_prompt_tag');
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<PromptTemplateVO[]>([]);
  
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [previewContent, setPreviewContent] = useState('');

  const userProfile = React.useMemo(() => {
    const profileStr = sessionStorage.getItem("userProfile");
    return profileStr ? JSON.parse(profileStr) : {};
  }, []);

  const isPlatformAdmin = userProfile.isPlatformAdmin === true;

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const values = searchForm.getFieldsValue();
    setLoading(true);
    try {
      const res = await getPromptPage({ 
        current: 1, 
        size: 1000, 
        name: values.name, 
        category: values.category
      });
      if (res.data && res.data.data) {
        setData(res.data.data.records);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const handleStatusChange = async (id: number, checked: boolean) => {
    try {
      await updatePromptStatus(id, checked ? 1 : 0);
      message.success(checked ? '模板已启用' : '模板已停用');
      fetchData();
    } catch (err) {
      console.error(err);
    }
  };

  const handleOpenDrawer = (record?: PromptTemplateVO, isClone = false) => {
    if (record) {
      if (isClone) {
        setEditingId(null);
        form.setFieldsValue({
          ...record,
          templateName: `${record.templateName} (副本)`,
          isSystem: 0,
          id: undefined
        });
        setPreviewContent(record.promptContent);
      } else {
        if (record.isSystem === 1 && !isPlatformAdmin) {
          message.error('无权编辑系统模板');
          return;
        }
        if (record.isSystem === 0 && record.creatorId !== userProfile.userId) {
          message.error('无权编辑他人模板');
          return;
        }
        setEditingId(record.id);
        form.setFieldsValue(record);
        setPreviewContent(record.promptContent);
      }
    } else {
      setEditingId(null);
      form.resetFields();
      form.setFieldsValue({ status: 1, isSystem: 0 });
      setPreviewContent('');
    }
    setDrawerVisible(true);
  };

  const showDetail = (record: PromptTemplateVO) => {
    Modal.info({
      title: record.templateName,
      width: 800,
      icon: null,
      content: (
        <div style={{ maxHeight: '65vh', overflowY: 'auto', padding: '12px 0' }}>
          <ReactMarkdown>{record.promptContent}</ReactMarkdown>
        </div>
      ),
      okText: '关闭',
      maskClosable: true
    });
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setSubmitLoading(true);
      if (editingId) {
        await updatePromptTemplate({ ...values, id: editingId });
        message.success('更新成功');
      } else {
        await savePromptTemplate(values);
        message.success('模板已创建');
      }
      setDrawerVisible(false);
      fetchData();
    } catch (err) {
      console.error(err);
    } finally {
      setSubmitLoading(false);
    }
  };

  const groupedData = React.useMemo(() => {
    const groups: Record<string, PromptTemplateVO[]> = {};
    data.forEach(item => {
      const cat = item.category || 'default';
      if (!groups[cat]) groups[cat] = [];
      groups[cat].push(item);
    });
    return groups;
  }, [data]);

  const renderCard = (item: PromptTemplateVO) => {
    const isMine = item.creatorId === userProfile.userId;
    const isSystem = item.isSystem === 1;
    const canEdit = isSystem ? isPlatformAdmin : isMine;

    return (
      <Card 
        key={item.id}
        hoverable
        onClick={() => showDetail(item)}
        style={{ width: 320, borderRadius: 12, border: '1px solid #f0f0f0', position: 'relative', overflow: 'hidden' }}
        bodyStyle={{ padding: '24px' }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ 
            width: 40, height: 40, borderRadius: 10, backgroundColor: '#e6f7ff', 
            display: 'flex', justifyContent: 'center', alignItems: 'center' 
          }}>
            <StarFilled style={{ fontSize: 20, color: '#1890ff' }} />
          </div>
          <Space onClick={e => e.stopPropagation()}>
            {canEdit && <EditOutlined style={{ fontSize: 18, color: '#bfbfbf', cursor: 'pointer' }} onClick={() => handleOpenDrawer(item)} />}
            <Switch 
              size="small" 
              checked={item.status === 1} 
              onChange={(checked) => handleStatusChange(item.id, checked)}
              disabled={!canEdit}
            />
          </Space>
        </div>

        <div style={{ marginBottom: 12 }}>
          <Text strong style={{ fontSize: 16, display: 'block' }} ellipsis={{ tooltip: item.templateName }}>{item.templateName}</Text>
          <Text type="secondary" style={{ fontSize: 12 }}>使用次数: {item.usageCount || 0}</Text>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 20, height: 22, overflow: 'hidden' }}>
          {item.tags?.map(tag => {
            const dictItem = dictTags.find(dt => dt.itemValue === tag);
            return (
              <Tag key={tag} style={{ margin: 0, border: 'none', backgroundColor: '#f0f2f5', color: '#595959', borderRadius: 4, fontSize: 10 }}>
                {dictItem ? dictItem.itemLabel : tag}
              </Tag>
            );
          })}
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', paddingTop: 12, borderTop: '1px solid #f5f5f5' }}>
          <Space onClick={e => e.stopPropagation()}>
            <Tooltip title="以此创建">
              <CopyOutlined style={{ color: '#bfbfbf', cursor: 'pointer', fontSize: 16 }} onClick={() => handleOpenDrawer(item, true)} />
            </Tooltip>
            {canEdit && (
              <Popconfirm title="确定删除？" onConfirm={() => deletePromptTemplate(item.id).then(fetchData)}>
                <Tooltip title="删除">
                  <DeleteOutlined style={{ color: '#bfbfbf', cursor: 'pointer', fontSize: 16 }} />
                </Tooltip>
              </Popconfirm>
            )}
          </Space>
        </div>
      </Card>
    );
  };

  return (
    <div style={{ padding: '32px', backgroundColor: '#fff', minHeight: '100%', overflowY: 'auto' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
          <Title level={3} style={{ margin: 0 }}>提示词模板</Title>
          <Button type="primary" icon={<PlusOutlined />} size="large" onClick={() => handleOpenDrawer()} style={{ borderRadius: 6 }}>
            新增模板
          </Button>
        </div>

        <Card bordered={false} bodyStyle={{ padding: '20px 24px', backgroundColor: '#f9f9f9', borderRadius: 12, marginBottom: 32 }}>
          <Form form={searchForm} layout="inline" onFinish={fetchData}>
            <Form.Item name="name" label="模板名称"><Input placeholder="请输入..." style={{ width: 180 }} /></Form.Item>
            <Form.Item name="category" label="分类">
              <Select placeholder="选择分类" style={{ width: 160 }} allowClear>
                {categories.map(c => <Option key={c.itemValue} value={c.itemValue}>{c.itemLabel}</Option>)}
              </Select>
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary" htmlType="submit">查询数据</Button>
                <Button onClick={() => { searchForm.resetFields(); fetchData(); }}>重置</Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>

        <Skeleton loading={loading} active>
          {Object.keys(groupedData).length === 0 ? (
            <Empty description="暂无可用模板" />
          ) : (
            Object.keys(groupedData).map(catKey => {
              const catLabel = categories.find(c => c.itemValue === catKey)?.itemLabel || catKey;
              return (
                <div key={catKey} style={{ marginBottom: 40 }}>
                  <Title level={4} style={{ marginBottom: 24, paddingLeft: 8, borderLeft: '4px solid #1890ff' }}>{catLabel}</Title>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>
                    {groupedData[catKey].map(renderCard)}
                  </div>
                </div>
              );
            })
          )}
        </Skeleton>
      </div>

      <Drawer
        title={<Title level={4} style={{ margin: 0 }}>{editingId ? '编辑模板' : '创建新模板'}</Title>}
        width="80%"
        onClose={() => setDrawerVisible(false)}
        open={drawerVisible}
        extra={
          <Space>
            <Button onClick={() => setDrawerVisible(false)}>取消</Button>
            <Button type="primary" icon={<SaveOutlined />} loading={submitLoading} onClick={handleSubmit}>保存</Button>
          </Space>
        }
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Row gutter={24}>
            <Col span={12}><Form.Item name="templateName" label="模板名称" rules={[{ required: true }]}><Input /></Form.Item></Col>
            <Col span={6}><Form.Item name="category" label="分类" rules={[{ required: true }]}><Select loading={dictLoading}>{categories.map(i => <Option key={i.itemValue} value={i.itemValue}>{i.itemLabel}</Option>)}</Select></Form.Item></Col>
            <Col span={6}><Form.Item name="status" label="状态"><Select><Option value={1}>启用</Option><Option value={0}>禁用</Option></Select></Form.Item></Col>
          </Row>
          <Form.Item name="tags" label="业务标签" tooltip="可从现有标签中选择，也可输入新内容按回车保存">
            <Select 
              mode="tags" 
              placeholder="选择或输入新标签" 
              allowClear
              tokenSeparators={[',', ' ', ';']}
            >
              {dictTags.map(t => <Option key={t.itemValue} value={t.itemValue}>{t.itemLabel}</Option>)}
            </Select>
          </Form.Item>
          
          <Divider orientation="left">提示词编辑器 (Markdown 实时预览)</Divider>
          <Row gutter={24} style={{ height: 'calc(100vh - 400px)' }}>
            <Col span={12} style={{ height: '100%' }}>
              <Form.Item name="promptContent" noStyle rules={[{ required: true }]}>
                <Input.TextArea 
                  onChange={e => setPreviewContent(e.target.value)} 
                  style={{ height: '100%', fontFamily: 'monospace', resize: 'none', border: '1px solid #d9d9d9', borderRadius: 8, padding: 12 }} 
                  placeholder="在此输入 Markdown 指令..."
                />
              </Form.Item>
            </Col>
            <Col span={12} style={{ height: '100%', overflowY: 'auto', background: '#fafafa', border: '1px solid #f0f0f0', borderRadius: 8, padding: '16px 24px' }}>
              <div className="markdown-preview"><ReactMarkdown>{previewContent}</ReactMarkdown></div>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </div>
  );
};

export default PromptTemplates;