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

import React, { useState, useEffect } from 'react';
import { 
  Table, Card, Button, Input, Space, Modal, Form, Select, 
  InputNumber, Tag, message, Popconfirm, Divider, Tooltip, 
  Radio, Row, Col, Typography, Badge 
} from 'antd';
import { 
  PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, 
  UserOutlined, GlobalOutlined 
} from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useDict } from '../../hooks/useDict';
import { 
  getHotWordPage, 
  saveHotWord, 
  updateHotWord, 
  deleteHotWord, 
  getPinyinSuggestion,
  HotWordVO,
  HotWordDTO 
} from '../../api/business/hotword';

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

const HotWords: React.FC = () => {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const { items: categories, loading: dictLoading } = useDict('biz_hotword_category');
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<HotWordVO[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const [size, setSize] = useState(10);
  const [searchWord, setSearchWord] = useState('');
  const [searchCategory, setSearchCategory] = useState<string | undefined>(undefined);
  const [searchType, setSearchType] = useState<number | undefined>(undefined);
  
  const [modalVisible, setModalVisible] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [submitLoading, setSubmitLoading] = useState(false);

  // 获取当前用户信息
  const userProfile = React.useMemo(() => {
    const profileStr = sessionStorage.getItem("userProfile");
    return profileStr ? JSON.parse(profileStr) : {};
  }, []);

  // 判定是否具有管理员权限 (平台管理员或租户管理员)
  const isAdmin = React.useMemo(() => {
    return userProfile.isPlatformAdmin === true || userProfile.isTenantAdmin === true;
  }, [userProfile]);

  useEffect(() => {
    fetchData();
  }, [current, size, searchWord, searchCategory, searchType]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await getHotWordPage({ 
        current, 
        size, 
        word: searchWord, 
        category: searchCategory,
        isPublic: searchType
      });
      if (res.data && res.data.data) {
        setData(res.data.data.records);
        setTotal(res.data.data.total);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const handleOpenModal = (record?: HotWordVO) => {
    if (record) {
      if (record.isPublic === 1 && !isAdmin) {
        message.error('公开热词仅限管理员修改');
        return;
      }
      setEditingId(record.id);
      form.setFieldsValue({
        ...record
      });
    } else {
      setEditingId(null);
      form.resetFields();
      form.setFieldsValue({ weight: 2, status: 1, isPublic: 0 });
    }
    setModalVisible(true);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setSubmitLoading(true);
      
      const payload: any = {
        ...values,
        pinyinList: values.pinyinList 
          ? (Array.isArray(values.pinyinList) ? values.pinyinList : values.pinyinList.split(',').map((s: string) => s.trim()).filter(Boolean)) 
          : []
      };

      if (editingId) {
        await updateHotWord({ ...payload, id: editingId });
        message.success('更新成功');
      } else {
        await saveHotWord(payload);
        message.success('添加成功');
      }
      
      setModalVisible(false);
      fetchData();
    } catch (err) {
      console.error(err);
    } finally {
      setSubmitLoading(false);
    }
  };

  const handleWordBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
    const word = e.target.value;
    if (word) {
      try {
        const res = await getPinyinSuggestion(word);
        if (res.data && res.data.data) {
          form.setFieldsValue({ pinyinList: res.data.data.join(', ') });
        }
      } catch (err) {
        console.error(err);
      }
    }
  };

  const columns = [
    {
      title: '热词原文',
      dataIndex: 'word',
      key: 'word',
      render: (text: string, record: HotWordVO) => (
        <Space>
          <Text strong>{text}</Text>
          {record.isPublic === 1 ? (
            <Tooltip title="租户公开"><GlobalOutlined style={{ color: '#52c41a' }} /></Tooltip>
          ) : (
            <Tooltip title="个人私有"><UserOutlined style={{ color: '#1890ff' }} /></Tooltip>
          )}
        </Space>
      )
    },
    {
      title: '拼音',
      dataIndex: 'pinyinList',
      key: 'pinyinList',
      render: (list: string[]) => (
        <Space size={[0, 4]} wrap>
          {list?.map(p => <Tag key={p} style={{ fontSize: '11px', borderRadius: 4 }}>{p}</Tag>)}
        </Space>
      )
    },
    {
      title: '类别',
      dataIndex: 'category',
      key: 'category',
      render: (val: string) => categories.find(i => i.itemValue === val)?.itemLabel || val
    },
    {
      title: '范围',
      dataIndex: 'isPublic',
      key: 'isPublic',
      render: (val: number) => val === 1 ? <Tag color="green">公开</Tag> : <Tag color="blue">私有</Tag>
    },
    {
      title: '权重',
      dataIndex: 'weight',
      key: 'weight',
      render: (val: number) => <Tag color="orange">{val}</Tag>
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: number) => status === 1 ? <Badge status="success" text="启用" /> : <Badge status="default" text="禁用" />
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: HotWordVO) => {
        const isMine = record.creatorId === userProfile.userId;
        const canEdit = record.isPublic === 1 ? isAdmin : (isMine || isAdmin);
        return (
          <Space size="middle">
            {canEdit ? (
              <>
                <Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleOpenModal(record)}>编辑</Button>
                <Popconfirm 
                  title="确定删除？" 
                  onConfirm={() => handleDelete(record.id)}
                  okText={t('common.confirm')}
                  cancelText={t('common.cancel')}
                >
                  <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
                </Popconfirm>
              </>

            ) : (
              <Text type="secondary" size="small">无权操作</Text>
            )}
          </Space>
        );
      }
    }
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Card 
        title="热词库管理" 
        extra={
          <Space wrap>
            <Select 
              placeholder="热词类型" 
              style={{ width: 110 }} 
              allowClear 
              onChange={v => {setSearchType(v); setCurrent(1);}}
            >
              <Option value={1}>租户公开</Option>
              <Option value={0}>个人私有</Option>
            </Select>
            <Select 
              placeholder="按类别筛选" 
              style={{ width: 130 }} 
              allowClear 
              onChange={v => {setSearchCategory(v); setCurrent(1);}}
            >
              {categories.map(c => <Option key={c.itemValue} value={c.itemValue}>{c.itemLabel}</Option>)}
            </Select>
            <Input 
              placeholder="搜索热词原文..." 
              prefix={<SearchOutlined />} 
              allowClear 
              onPressEnter={(e) => {setSearchWord((e.target as any).value); setCurrent(1);}} 
              style={{ width: 180 }} 
            />
            <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpenModal()}>
              新增热词
            </Button>
          </Space>
        }
      >
        <Table 
          columns={columns} 
          dataSource={data} 
          rowKey="id" 
          loading={loading} 
          pagination={{ 
            current, 
            pageSize: size, 
            total, 
            showTotal: (t) => `共 ${t} 条`,
            onChange: (p, s) => { setCurrent(p); setSize(s); }
          }} 
        />
      </Card>

      <Modal 
        title={editingId ? '编辑热词' : '新增热词'} 
        open={modalVisible} 
        onOk={handleSubmit} 
        onCancel={() => setModalVisible(false)} 
        confirmLoading={submitLoading} 
        width={550}
      >
        <Form form={form} layout="vertical" style={{ marginTop: '16px' }}>
          <Form.Item name="word" label="热词原文" rules={[{ required: true, message: '请输入热词原文' }]}>
            <Input placeholder="输入识别关键词" onBlur={handleWordBlur} />
          </Form.Item>
          
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="category" label="热词分类">
                <Select placeholder="请选择分类" allowClear>
                  {categories.map(item => <Option key={item.itemValue} value={item.itemValue}>{item.itemLabel}</Option>)}
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="weight" label="识别权重 (1-5)" tooltip="权重越高，识别引擎越倾向于将其识别为该词">
                <InputNumber min={1} max={5} precision={1} step={0.1} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="status" label="使用状态">
                <Select>
                  <Option value={1}>启用</Option>
                  <Option value={0}>禁用</Option>
                </Select>
              </Form.Item>
            </Col>
            {isAdmin && (
              <Col span={12}>
                <Form.Item name="isPublic" label="租户公开" tooltip="开启后，租户内所有成员均可共享此热词">
                  <Radio.Group>
                    <Radio value={1}>是</Radio>
                    <Radio value={0}>否</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            )}
          </Row>

          <Form.Item name="remark" label="备注">
            <Input.TextArea rows={2} placeholder="记录热词的来源或用途" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default HotWords;