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

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

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

type HotWordFormValues = {
  word: string;
  pinyin?: string;
  category?: string;
  weight: number;
  status: number;
  isPublic: number;
  remark?: string;
};

const HotWords: React.FC = () => {
  const { t } = useTranslation();
  const [form] = Form.useForm<HotWordFormValues>();
  const { items: categories } = 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 = useMemo(() => {
    const profileStr = sessionStorage.getItem("userProfile");
    return profileStr ? JSON.parse(profileStr) : {};
  }, []);

  const isAdmin = useMemo(() => {
    return userProfile.isPlatformAdmin === true || userProfile.isTenantAdmin === true;
  }, [userProfile]);

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

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

  const handleOpenModal = (record?: HotWordVO) => {
    if (record?.isPublic === 1 && !isAdmin) {
      message.error("公开热词仅限管理员修改");
      return;
    }

    if (record) {
      setEditingId(record.id);
      form.setFieldsValue({
        word: record.word,
        pinyin: record.pinyinList?.[0] || "",
        category: record.category,
        weight: record.weight,
        status: record.status,
        isPublic: record.isPublic,
        remark: record.remark,
      });
    } else {
      setEditingId(null);
      form.resetFields();
      form.setFieldsValue({ weight: 2, status: 1, isPublic: 0 });
    }

    setModalVisible(true);
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteHotWord(id);
      message.success("删除成功");
      await fetchData();
    } catch {
      // handled by interceptor
    }
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setSubmitLoading(true);

      const payload = {
        ...values,
        matchStrategy: 1,
        pinyinList: values.pinyin ? [values.pinyin.trim()] : [],
      };

      if (editingId) {
        await updateHotWord({ ...payload, id: editingId });
        message.success("更新成功");
      } else {
        await saveHotWord(payload);
        message.success("新增成功");
      }

      setModalVisible(false);
      await fetchData();
    } finally {
      setSubmitLoading(false);
    }
  };

  const handleWordBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
    const word = e.target.value?.trim();
    if (!word || form.getFieldValue("pinyin")) {
      return;
    }

    try {
      const res = await getPinyinSuggestion(word);
      const firstPinyin = res.data?.data?.[0];
      if (firstPinyin) {
        form.setFieldValue("pinyin", firstPinyin);
      }
    } catch {
      // handled by interceptor
    }
  };

  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[]) =>
        list?.[0] ? <Tag style={{ borderRadius: 4 }}>{list[0]}</Tag> : <Text type="secondary">-</Text>,
    },
    {
      title: "类别",
      dataIndex: "category",
      key: "category",
      render: (value: string) => categories.find((item) => item.itemValue === value)?.itemLabel || value || "-",
    },
    {
      title: "范围",
      dataIndex: "isPublic",
      key: "isPublic",
      render: (value: number) => (value === 1 ? <Tag color="green">公开</Tag> : <Tag color="blue">私有</Tag>),
    },
    {
      title: "权重",
      dataIndex: "weight",
      key: "weight",
      render: (value: number) => <Tag color="orange">{value}</Tag>,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (value: number) =>
        value === 1 ? <Badge status="success" text="启用" /> : <Badge status="default" text="禁用" />,
    },
    {
      title: "操作",
      key: "action",
      render: (_: unknown, record: HotWordVO) => {
        const isMine = record.creatorId === userProfile.userId;
        const canEdit = record.isPublic === 1 ? isAdmin : isMine || isAdmin;

        if (!canEdit) {
          return <Text type="secondary">无权操作</Text>;
        }

        return (
          <Space size="middle">
            <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>
          </Space>
        );
      },
    },
  ];

  return (
    <div className="flex h-full flex-col overflow-hidden">
      <Card
        className="flex-1 overflow-hidden shadow-sm"
        styles={{ body: { padding: 24, height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }}
        title="热词管理"
        extra={
          <Space wrap>
            <Select
              placeholder="热词类型"
              style={{ width: 110 }}
              allowClear
              onChange={(value) => {
                setSearchType(value);
                setCurrent(1);
              }}
            >
              <Option value={1}>租户公开</Option>
              <Option value={0}>个人私有</Option>
            </Select>
            <Select
              placeholder="按类别筛选"
              style={{ width: 150 }}
              allowClear
              onChange={(value) => {
                setSearchCategory(value);
                setCurrent(1);
              }}
            >
              {categories.map((item) => (
                <Option key={item.itemValue} value={item.itemValue}>
                  {item.itemLabel}
                </Option>
              ))}
            </Select>
            <Input
              placeholder="搜索热词原文"
              prefix={<SearchOutlined />}
              allowClear
              onPressEnter={(e) => {
                setSearchWord((e.target as HTMLInputElement).value);
                setCurrent(1);
              }}
              style={{ width: 200 }}
            />
            <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpenModal()}>
              新增热词
            </Button>
          </Space>
        }
      >
        <div className="min-h-0 flex-1">
          <Table
            columns={columns}
            dataSource={data}
            rowKey="id"
            loading={loading}
            scroll={{ y: "calc(100vh - 340px)" }}
            pagination={{
              current,
              pageSize: size,
              total,
              showTotal: (value) => `共 ${value} 条`,
              onChange: (page, pageSize) => {
                setCurrent(page);
                setSize(pageSize);
              },
            }}
          />
        </div>
      </Card>

      <Modal
        title={editingId ? "编辑热词" : "新增热词"}
        open={modalVisible}
        onOk={handleSubmit}
        onCancel={() => setModalVisible(false)}
        confirmLoading={submitLoading}
        width={560}
        destroyOnHidden
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            name="word"
            label="热词原文"
            rules={[{ required: true, message: "请输入热词原文" }]}
          >
            <Input placeholder="输入识别关键词" onBlur={handleWordBlur} />
          </Form.Item>

          {/*<Form.Item*/}
          {/*  name="pinyin"*/}
          {/*  label="拼音"*/}
          {/*  tooltip="仅保留一个拼音值，失焦后会自动带出推荐结果"*/}
          {/*>*/}
          {/*  <Input placeholder="例如：hui yi" />*/}
          {/*</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>
            ) : null}
          </Row>

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

export default HotWords;