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

import React, { useEffect, useState } from 'react';
import {
  App,
  Button,
  Col,
  Divider,
  Empty,
  Form,
  Input,
  Popconfirm,
  Row,
  Select,
  Space,
  Switch,
  Table,
  Tag,
  Tooltip,
  Typography,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import PageContainer from "@/components/shared/PageContainer";
import DataListPanel from "@/components/shared/DataListPanel";
import FormDrawer from "@/components/shared/FormDrawer";
import SectionCard from "@/components/shared/SectionCard";
import { CopyOutlined, DeleteOutlined, EditOutlined, EyeOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import { useTranslation } from 'react-i18next';
import { useDict } from '../../hooks/useDict';
import {
  deletePromptTemplate,
  getPromptDetail,
  getPromptPage,
  savePromptTemplate,
  updatePromptStatus,
  updatePromptTemplate,
  type PromptTemplateVO,
} from '../../api/business/prompt';
import { getHotWordGroupOptions, type HotWordGroupVO } from '../../api/business/hotwordGroup';
import AppPagination from '../../components/shared/AppPagination';
import './PromptTemplates.css';

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

const normalizePromptTags = (tags: unknown) => {
  if (Array.isArray(tags)) {
    return tags.map((tag) => String(tag).trim()).filter(Boolean);
  }
  if (typeof tags === 'string') {
    return tags.split(',').map((tag) => tag.trim()).filter(Boolean);
  }
  return [];
};

const PromptTemplates: React.FC = () => {
  const { message, modal } = App.useApp();
  const { t } = useTranslation();
  const { items: categories, loading: dictLoading } = useDict('biz_prompt_category');
  const { items: dictTags } = useDict('biz_prompt_tag');
  const { items: promptLevels } = useDict('biz_prompt_level');

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<PromptTemplateVO[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(8);
  const [queryDraft, setQueryDraft] = useState<{ name?: string; category?: string }>({});
  const [query, setQuery] = useState<{ name?: string; category?: string }>({});

  const [drawerVisible, setDrawerVisible] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [previewContent, setPreviewContent] = useState('');
  const [groupOptions, setGroupOptions] = useState<HotWordGroupVO[]>([]);
  const [templateLevel, setTemplateLevel] = useState<number | undefined>();
  const [selectedHotWordGroupId, setSelectedHotWordGroupId] = useState<number | undefined>();
  const [drawerInitialValues, setDrawerInitialValues] = useState<Record<string, any>>({});
  const [drawerFormKey, setDrawerFormKey] = useState(0);

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

  const activeTenantId = React.useMemo(() => Number(localStorage.getItem("activeTenantId") || 0), []);
  const isPlatformAdmin = userProfile.isPlatformAdmin === true;
  const isTenantAdmin = userProfile.isTenantAdmin === true;

  useEffect(() => {
    void fetchData();
  }, [current, pageSize, query]);

  useEffect(() => {
    void loadGroupOptions();
  }, [isPlatformAdmin, templateLevel, activeTenantId]);

  const loadGroupOptions = async () => {
    const targetTenantId = isPlatformAdmin && Number(templateLevel) === 1 ? 0 : undefined;
    const res = await getHotWordGroupOptions(targetTenantId ?? (isPlatformAdmin && activeTenantId === 0 ? 0 : undefined));
    setGroupOptions(res.data?.data || []);
  };

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await getPromptPage({
        current,
        size: pageSize,
        name: query.name,
        category: query.category,
      });
      if (res.data?.data) {
        setData(res.data.data.records || []);
        setTotal(res.data.data.total || 0);
      }
    } finally {
      setLoading(false);
    }
  };

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

  const handleOpenDrawer = (record?: PromptTemplateVO, isClone = false) => {
    if (record) {
      if (isClone) {
        setEditingId(null);
        setTemplateLevel(0);
        setSelectedHotWordGroupId(record.hotWordGroupId);
        setDrawerInitialValues({
          ...record,
          tags: normalizePromptTags(record.tags),
          templateName: `${record.templateName} (副本)`,
          isSystem: 0,
          id: undefined,
          tenantId: undefined,
        });
        setPreviewContent(record.promptContent);
      } else {
        const isPlatformLevel = Number(record.tenantId) === 0 && Number(record.isSystem) === 1;
        const currentUserId = userProfile.userId ? Number(userProfile.userId) : -1;

        let canEdit = false;
        if (Number(record.isSystem) === 0) {
          canEdit = Number(record.creatorId) === currentUserId;
        } else if (isPlatformAdmin) {
          canEdit = isPlatformLevel;
        } else if (isTenantAdmin) {
          canEdit = Number(record.tenantId) === activeTenantId;
        }

        if (!canEdit) {
          message.warning('您无权修改此层级的模板');
          return;
        }

        setEditingId(record.id);
        setTemplateLevel(Number(record.isSystem));
        setSelectedHotWordGroupId(record.hotWordGroupId);
        setDrawerInitialValues({
          ...record,
          tags: normalizePromptTags(record.tags),
        });
        setPreviewContent(record.promptContent);
      }
    } else {
      const defaultLevel = (isTenantAdmin || isPlatformAdmin) ? 1 : 0;
      setEditingId(null);
      setDrawerInitialValues({
        status: 1,
        isSystem: defaultLevel,
      });
      setTemplateLevel(defaultLevel);
      setSelectedHotWordGroupId(undefined);
      setPreviewContent('');
    }
    setDrawerFormKey((key) => key + 1);
    setDrawerVisible(true);
  };

  const showDetail = (record: PromptTemplateVO) => {
    void (async () => {
      const detailRes = await getPromptDetail(record.id);
      const detail = detailRes.data?.data || record;
      modal.info({
      title: record.templateName,
      width: 800,
      icon: null,
      content: (
        <div className="prompt-template-detail">
          {detail.description ? (
            <div className="prompt-template-detail__description">
              <Text type="secondary">{detail.description}</Text>
            </div>
          ) : null}
          <div className="prompt-template-detail__section">
            <Space wrap>
              {detail.hotWordGroupName ? <Tag color="blue">热词组：{detail.hotWordGroupName}</Tag> : <Tag>未绑定热词组</Tag>}
              {normalizePromptTags(detail.tags).map((tag) => {
                const dictItem = dictTags.find((item) => item.itemValue === tag);
                return <Tag key={tag}>{dictItem ? dictItem.itemLabel : tag}</Tag>;
              })}
            </Space>
          </div>
          {detail.hotWords && detail.hotWords.length > 0 ? (
            <div className="prompt-template-detail__section">
              <div className="prompt-template-detail__section-title">绑定热词</div>
              <Space wrap>
                {detail.hotWords.map((word) => <Tag key={word}>{word}</Tag>)}
              </Space>
            </div>
          ) : detail.hotWordGroupId ? (
            <div className="prompt-template-detail__section">
              <Text type="secondary">该热词组当前没有热词</Text>
            </div>
          ) : null}
          <ReactMarkdown>{detail.promptContent}</ReactMarkdown>
        </div>
      ),
      okText: '关闭',
      maskClosable: true,
      });
    })();
  };

  const handleSubmit = async (values: any) => {
    try {
      setSubmitLoading(true);
      if (!editingId && isPlatformAdmin && values.isSystem === 1) {
        values.tenantId = 0;
      }
      if (editingId) {
        await updatePromptTemplate({ ...values, id: editingId });
        message.success('更新成功');
      } else {
        await savePromptTemplate(values);
        message.success('模板已创建');
      }
      setDrawerVisible(false);
      await fetchData();
    } finally {
      setSubmitLoading(false);
    }
  };

  const getTemplateLevelMeta = (item: PromptTemplateVO) => {
    const isSystem = item.isSystem === 1;
    const isPlatformLevel = Number(item.tenantId) === 0 && isSystem;
    const isTenantLevel = Number(item.tenantId) > 0 && isSystem;
    if (isPlatformLevel) {
      return { label: '平台级', color: 'gold' as const };
    }
    if (isTenantLevel) {
      return { label: '租户级', color: 'blue' as const };
    }
    return { label: '个人级', color: 'cyan' as const };
  };

  const handleSearch = () => {
    setCurrent(1);
    setQuery(queryDraft);
  };

  const handleResetSearch = () => {
    setQueryDraft({});
    setCurrent(1);
    setQuery({});
  };

  const canManageTemplate = (item: PromptTemplateVO) => {
    const isSystem = item.isSystem === 1;
    const isPlatformLevel = Number(item.tenantId) === 0 && isSystem;
    const isPersonalLevel = !isSystem;
    const currentUserId = userProfile.userId ? Number(userProfile.userId) : -1;

    if (isPersonalLevel) {
      return Number(item.creatorId) === currentUserId;
    }
    if (isPlatformAdmin) {
      return isPlatformLevel;
    }
    if (isTenantAdmin) {
      return Number(item.tenantId) === activeTenantId;
    }
    return false;
  };

  const tableColumns: ColumnsType<PromptTemplateVO> = [
    {
      title: '模板名称',
      dataIndex: 'templateName',
      width: 280,
      render: (_: unknown, item: PromptTemplateVO) => (
        <div className="prompt-template-name-cell">
          <Text strong ellipsis={{ tooltip: item.templateName }}>{item.templateName}</Text>
          {item.description ? (
            <Text type="secondary" className="prompt-template-description" ellipsis={{ tooltip: item.description }}>
              {item.description}
            </Text>
          ) : null}
        </div>
      ),
    },
    {
      title: '分类',
      dataIndex: 'category',
      width: 140,
      render: (category: string) => categories.find((c) => c.itemValue === category)?.itemLabel || category || '-',
    },
    {
      title: '层级',
      dataIndex: 'isSystem',
      width: 110,
      render: (_: unknown, item: PromptTemplateVO) => {
        const level = getTemplateLevelMeta(item);
        return <Tag color={level.color} className="prompt-template-level-tag">{level.label}</Tag>;
      },
    },
    {
      title: '热词组',
      dataIndex: 'hotWordGroupName',
      width: 180,
      render: (name: string) => name ? <Tag color="blue">{name}</Tag> : <Text type="secondary">未绑定</Text>,
    },
    {
      title: '业务标签',
      dataIndex: 'tags',
      minWidth: 220,
      render: (tags: unknown) => {
        const tagList = normalizePromptTags(tags);
        if (!tagList.length) {
          return <Text type="secondary">未配置</Text>;
        }
        return (
          <Space size={[4, 4]} wrap className="prompt-template-tags-cell">
            {tagList.slice(0, 3).map((tag) => {
              const dictItem = dictTags.find((dt) => dt.itemValue === tag);
              return <Tag key={tag}>{dictItem ? dictItem.itemLabel : tag}</Tag>;
            })}
            {tagList.length > 3 ? <Tag>+{tagList.length - 3}</Tag> : null}
          </Space>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 90,
      render: (_: unknown, item: PromptTemplateVO) => (
        <Switch
          size="small"
          checked={item.status === 1}
          onClick={(_, event) => event.stopPropagation()}
          onChange={(checked) => void handleStatusChange(item.id, checked)}
        />
      ),
    },
    {
      title: '操作',
      key: 'actions',
      width: 150,
      fixed: 'right' as const,
      render: (_: unknown, item: PromptTemplateVO) => {
        const canEdit = canManageTemplate(item);
        return (
          <Space size={2} onClick={(e) => e.stopPropagation()}>
            <Tooltip title="查看">
              <Button type="text" size="small" icon={<EyeOutlined />} onClick={() => showDetail(item)} />
            </Tooltip>
            {canEdit && (
              <Tooltip title="编辑">
                <Button type="text" size="small" icon={<EditOutlined />} onClick={() => handleOpenDrawer(item)} />
              </Tooltip>
            )}
            <Tooltip title="以此创建">
              <Button type="text" size="small" icon={<CopyOutlined />} onClick={() => handleOpenDrawer(item, true)} />
            </Tooltip>
            {canEdit && (
              <Popconfirm
                title="确定删除？"
                onConfirm={() => deletePromptTemplate(item.id).then(() => fetchData())}
                okText={t('common.confirm')}
                cancelText={t('common.cancel')}
              >
                <Tooltip title="删除">
                  <Button type="text" size="small" danger icon={<DeleteOutlined />} />
                </Tooltip>
              </Popconfirm>
            )}
          </Space>
        );
      },
    },
  ];

  return (
    <PageContainer title={null} className="prompt-templates-page">
      <SectionCard
        title="提示词模板"
        description="管理 AI 会议总结的提示词模板库。"
      >
        <DataListPanel
          className="prompt-templates-list-panel"
          leftActions={
            <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpenDrawer()}>
              新增模板
            </Button>
          }
          rightActions={
            <Form layout="inline" onFinish={handleSearch} className="prompt-templates-search">
              <Form.Item label="模板名称">
                <Input
                  placeholder="请输入..."
                  className="prompt-templates-search__name"
                  value={queryDraft.name}
                  onChange={(event) => setQueryDraft((currentDraft) => ({ ...currentDraft, name: event.target.value }))}
                />
              </Form.Item>
              <Form.Item label="分类">
                <Select
                  placeholder="选择分类"
                  className="prompt-templates-search__category"
                  allowClear
                  value={queryDraft.category}
                  onChange={(value) => setQueryDraft((currentDraft) => ({ ...currentDraft, category: value }))}
                >
                  {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={handleResetSearch}>重置</Button>
                </Space>
              </Form.Item>
            </Form>
          }
          footer={
            <AppPagination
              current={current}
              pageSize={pageSize}
              total={total}
              onChange={(page, size) => {
                setCurrent(page);
                setPageSize(size);
              }}
            />
          }
        >
          <Table<PromptTemplateVO>
            className="prompt-templates-table"
            columns={tableColumns}
            dataSource={data}
            rowKey="id"
            loading={loading}
            pagination={false}
            scroll={{ x: "max-content", y: "100%" }}
            onRow={(record) => ({ onClick: () => showDetail(record) })}
            locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无可用模板" /> }}
          />
        </DataListPanel>
      </SectionCard>

      <FormDrawer
        title={editingId ? '编辑模板' : '创建新模板'}
        size="md"
        bodyDensity="compact"
        onClose={() => setDrawerVisible(false)}
        open={drawerVisible}
        okIcon={<SaveOutlined />}
        okLoading={submitLoading}
        okButtonProps={{ htmlType: "submit", form: "prompt-template-form" }}
      >
        <Form
          id="prompt-template-form"
          key={drawerFormKey}
          initialValues={drawerInitialValues}
          layout="vertical"
          onFinish={(values) => void handleSubmit(values)}
          onValuesChange={(changedValues) => {
            if (Object.prototype.hasOwnProperty.call(changedValues, 'isSystem')) {
              setTemplateLevel(Number(changedValues.isSystem));
            }
            if (Object.prototype.hasOwnProperty.call(changedValues, 'hotWordGroupId')) {
              setSelectedHotWordGroupId(changedValues.hotWordGroupId);
            }
          }}
        >
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item name="templateName" label="模板名称" rules={[{ required: true }]}>
                <Input />
              </Form.Item>
            </Col>
            {(isPlatformAdmin || isTenantAdmin) && (
              <Col span={24}>
                <Form.Item name="isSystem" label="模板属性" rules={[{ required: true }]}>
                  <Select placeholder="选择属性">
                    {promptLevels.length > 0 ? (
                      promptLevels.map((i) => <Option key={i.itemValue} value={Number(i.itemValue)}>{i.itemLabel}</Option>)
                    ) : (
                      <>
                        <Option value={1}>{isPlatformAdmin ? '系统预置 (全局)' : '租户预置 (全员)'}</Option>
                        <Option value={0}>个人模板</Option>
                      </>
                    )}
                  </Select>
                </Form.Item>
              </Col>
            )}
            <Col span={24}>
              <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={24}>
              <Form.Item name="status" label="状态">
                <Select>
                  <Option value={1}>启用</Option>
                  <Option value={0}>禁用</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="description" label="模板描述">
            <Input.TextArea
              maxLength={255}
              showCount
              autoSize={{ minRows: 2, maxRows: 4 }}
              placeholder="请输入模板描述"
            />
          </Form.Item>

          <Row gutter={16}>
            <Col span={24}>
              <Form.Item name="tags" label="业务标签" tooltip="可从现有标签中选择，也可输入新内容按回车保存">
                <Select mode="tags" placeholder="选择或输入新标签" allowClear tokenSeparators={[',', ' ', ';']}>
                  {dictTags.map((item) => <Option key={item.itemValue} value={item.itemValue}>{item.itemLabel}</Option>)}
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="hotWordGroupId"
                label="绑定热词组"
                tooltip="可选，未绑定则保持兼容"
              >
                <Select
                  placeholder="选择热词组"
                  allowClear
                  options={groupOptions.map((item) => ({ label: `${item.groupName} (${item.hotWordCount}/200)`, value: item.id }))}
                />
              </Form.Item>
            </Col>
          </Row>

          <Divider orientation="left">提示词编辑器 (Markdown 实时预览)</Divider>
          <Row gutter={[0, 16]} className="prompt-template-editor">
            <Col span={24} className="prompt-template-editor__col">
              <Form.Item name="promptContent" noStyle rules={[{ required: true }]}>
                <Input.TextArea
                  onChange={(e) => setPreviewContent(e.target.value)}
                  className="prompt-template-editor__input"
                  placeholder="在此输入 Markdown 指令..."
                />
              </Form.Item>
            </Col>
            <Col span={24} className="prompt-template-editor__preview">
              <div className="prompt-template-editor__preview-meta">
                {selectedHotWordGroupId ? (
                  <Tag color="blue">
                    绑定热词组：
                    {groupOptions.find((item) => item.id === selectedHotWordGroupId)?.groupName || '已选择'}
                  </Tag>
                ) : (
                  <Tag>未绑定热词组</Tag>
                )}
              </div>
              <div className="markdown-preview"><ReactMarkdown>{previewContent}</ReactMarkdown></div>
            </Col>
          </Row>
        </Form>
      </FormDrawer>
    </PageContainer>
  );
};

export default PromptTemplates;