diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx index 9191e610..99be1aaa 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx @@ -1,4 +1,9 @@ -import React, { useState, useEffect } from "react"; +import React, { + useState, + useEffect, + forwardRef, + useImperativeHandle, +} from "react"; import { Button, Input, Tag, Switch, message } from "antd"; import { SearchOutlined, @@ -29,199 +34,210 @@ interface KeywordItem { enabled: boolean; } -const KeywordManagement: React.FC = () => { - const [searchValue, setSearchValue] = useState(""); - const [keywordsList, setKeywordsList] = useState([]); - const [loading, setLoading] = useState(false); - const [editModalVisible, setEditModalVisible] = useState(false); - const [editingKeywordId, setEditingKeywordId] = useState(null); - - // 回复类型映射 - const getReplyTypeText = (replyType: string) => { - switch (replyType) { - case "text": - return "文本回复"; - case "template": - return "模板回复"; - default: - return "未知类型"; - } - }; - - // 回复类型颜色 - const getReplyTypeColor = (replyType: string) => { - switch (replyType) { - case "text": - return "#1890ff"; - case "template": - return "#722ed1"; - default: - return "#8c8c8c"; - } - }; - - // 获取关键词列表 - const fetchKeywords = async (params?: KeywordListParams) => { - try { - setLoading(true); - const response = await getKeywordList(params || {}); - if (response) { - setKeywordsList(response.list || []); - } else { - setKeywordsList([]); - message.error(response?.message || "获取关键词列表失败"); - } - } catch (error) { - console.error("获取关键词列表失败:", error); - setKeywordsList([]); - message.error("获取关键词列表失败"); - } finally { - setLoading(false); - } - }; - - // 关键词管理相关函数 - const handleToggleKeyword = async (id: string) => { - try { - const response = await setKeywordStatus({ id }); - if (response) { - setKeywordsList(prev => - prev.map(item => - item.id === id ? { ...item, enabled: !item.enabled } : item, - ), - ); - message.success("状态更新成功"); - } else { - message.error(response?.message || "状态更新失败"); - } - } catch (error) { - console.error("状态更新失败:", error); - message.error("状态更新失败"); - } - }; - - const handleEditKeyword = (id: string) => { - setEditingKeywordId(id); - setEditModalVisible(true); - }; - - // 编辑弹窗成功回调 - const handleEditSuccess = () => { - fetchKeywords(); // 重新获取数据 - }; - - const handleDeleteKeyword = async (id: string) => { - try { - const response = await deleteKeyword(id); - if (response) { - setKeywordsList(prev => prev.filter(item => item.id !== id)); - message.success("删除成功"); - } else { - message.error(response?.message || "删除失败"); - } - } catch (error) { - console.error("删除失败:", error); - message.error("删除失败"); - } - }; - - // 搜索和筛选功能 - const filteredKeywords = keywordsList.filter(item => { - if (!searchValue) return true; - return ( - item.title.toLowerCase().includes(searchValue.toLowerCase()) || - item.keywords.toLowerCase().includes(searchValue.toLowerCase()) || - item.content.toLowerCase().includes(searchValue.toLowerCase()) +const KeywordManagement = forwardRef>( + (props, ref) => { + const [searchValue, setSearchValue] = useState(""); + const [keywordsList, setKeywordsList] = useState([]); + const [loading, setLoading] = useState(false); + const [editModalVisible, setEditModalVisible] = useState(false); + const [editingKeywordId, setEditingKeywordId] = useState( + null, ); - }); - // 搜索处理函数 - const handleSearch = (value: string) => { - fetchKeywords({ keyword: value }); - }; + // 回复类型映射 + const getReplyTypeText = (replyType: string) => { + switch (replyType) { + case "text": + return "文本回复"; + case "template": + return "模板回复"; + default: + return "未知类型"; + } + }; - // 组件挂载时获取数据 - useEffect(() => { - fetchKeywords(); - }, []); + // 回复类型颜色 + const getReplyTypeColor = (replyType: string) => { + switch (replyType) { + case "text": + return "#1890ff"; + case "template": + return "#722ed1"; + default: + return "#8c8c8c"; + } + }; - return ( -
-
- setSearchValue(e.target.value)} - onSearch={handleSearch} - style={{ width: 300 }} - prefix={} - /> - -
+ // 获取关键词列表 + const fetchKeywords = async (params?: KeywordListParams) => { + try { + setLoading(true); + const response = await getKeywordList(params || {}); + if (response) { + setKeywordsList(response.list || []); + } else { + setKeywordsList([]); + message.error(response?.message || "获取关键词列表失败"); + } + } catch (error) { + console.error("获取关键词列表失败:", error); + setKeywordsList([]); + message.error("获取关键词列表失败"); + } finally { + setLoading(false); + } + }; -
- {loading ? ( -
加载中...
- ) : filteredKeywords.length === 0 ? ( -
暂无关键词数据
- ) : ( - filteredKeywords.map(item => ( -
-
-
{item.title}
-
- {item.matchType} - - 优先级{item.priority} + // 暴露方法给父组件 + useImperativeHandle(ref, () => ({ + fetchKeywords, + })); + + // 关键词管理相关函数 + const handleToggleKeyword = async (id: string) => { + try { + const response = await setKeywordStatus({ id }); + if (response) { + setKeywordsList(prev => + prev.map(item => + item.id === id ? { ...item, enabled: !item.enabled } : item, + ), + ); + message.success("状态更新成功"); + } else { + message.error(response?.message || "状态更新失败"); + } + } catch (error) { + console.error("状态更新失败:", error); + message.error("状态更新失败"); + } + }; + + const handleEditKeyword = (id: string) => { + setEditingKeywordId(id); + setEditModalVisible(true); + }; + + // 编辑弹窗成功回调 + const handleEditSuccess = () => { + fetchKeywords(); // 重新获取数据 + }; + + const handleDeleteKeyword = async (id: string) => { + try { + const response = await deleteKeyword(id); + if (response) { + setKeywordsList(prev => prev.filter(item => item.id !== id)); + message.success("删除成功"); + } else { + message.error(response?.message || "删除失败"); + } + } catch (error) { + console.error("删除失败:", error); + message.error("删除失败"); + } + }; + + // 搜索和筛选功能 + const filteredKeywords = keywordsList.filter(item => { + if (!searchValue) return true; + return ( + item.title.toLowerCase().includes(searchValue.toLowerCase()) || + item.keywords.toLowerCase().includes(searchValue.toLowerCase()) || + item.content.toLowerCase().includes(searchValue.toLowerCase()) + ); + }); + + // 搜索处理函数 + const handleSearch = (value: string) => { + fetchKeywords({ keyword: value }); + }; + + // 组件挂载时获取数据 + useEffect(() => { + fetchKeywords(); + }, []); + + return ( +
+
+ setSearchValue(e.target.value)} + onSearch={handleSearch} + style={{ width: 300 }} + prefix={} + /> + +
+ +
+ {loading ? ( +
加载中...
+ ) : filteredKeywords.length === 0 ? ( +
暂无关键词数据
+ ) : ( + filteredKeywords.map(item => ( +
+
+
{item.title}
+
+ {item.matchType} + + 优先级{item.priority} + +
+
{item.content}
+ + {getReplyTypeText(item.replyType)}
-
{item.content}
- - {getReplyTypeText(item.replyType)} - +
+ handleToggleKeyword(item.id)} + className={styles.toggleSwitch} + /> +
-
- handleToggleKeyword(item.id)} - className={styles.toggleSwitch} - /> -
-
- )) - )} -
+ )) + )} +
- {/* 编辑弹窗 */} - { - setEditModalVisible(false); - setEditingKeywordId(null); - }} - onSuccess={handleEditSuccess} - /> -
- ); -}; + {/* 编辑弹窗 */} + { + setEditModalVisible(false); + setEditingKeywordId(null); + }} + onSuccess={handleEditSuccess} + /> +
+ ); + }, +); + +KeywordManagement.displayName = "KeywordManagement"; export default KeywordManagement; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/modals/KeywordModal.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/modals/KeywordModal.tsx index e2e911e4..209977fb 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/modals/KeywordModal.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/modals/KeywordModal.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { Modal, Form, Input, Button, message, Select } from "antd"; import { addKeyword, @@ -30,36 +30,42 @@ const KeywordModal: React.FC = ({ const [loading, setLoading] = useState(false); // 获取关键词详情 - const fetchKeywordDetails = async (id: string) => { - try { - const response = await getKeywordDetails(id); - if (response) { - const keyword = response; - form.setFieldsValue({ - title: keyword.title, - keywords: keyword.keywords, - content: keyword.content, - matchType: keyword.matchType, - priority: keyword.priority, - replyType: keyword.replyType, - status: keyword.status, - }); + const fetchKeywordDetails = useCallback( + async (id: string) => { + try { + const response = await getKeywordDetails(id); + if (response) { + const keyword = response; + form.setFieldsValue({ + title: keyword.title, + keywords: keyword.keywords, + content: keyword.content, + matchType: keyword.matchType, + priority: keyword.priority, + replyType: keyword.replyType, + status: keyword.status, + }); + } + } catch (error) { + console.error("获取关键词详情失败:", error); + message.error("获取关键词详情失败"); } - } catch (error) { - console.error("获取关键词详情失败:", error); - message.error("获取关键词详情失败"); - } - }; + }, + [form], + ); - // 当弹窗打开且为编辑模式时,获取详情 + // 当弹窗打开时处理数据 useEffect(() => { - if (visible && mode === "edit" && keywordId) { - fetchKeywordDetails(keywordId); - } else if (visible && mode === "add") { - // 添加模式时重置表单 - form.resetFields(); + if (visible) { + if (mode === "edit" && keywordId) { + // 编辑模式:获取详情 + fetchKeywordDetails(keywordId); + } else if (mode === "add") { + // 添加模式:重置表单 + form.resetFields(); + } } - }, [visible, mode, keywordId]); + }, [visible, mode, keywordId, fetchKeywordDetails, form]); const handleSubmit = async (values: any) => { try { diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx index edcb8d23..4f8b4fa0 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx @@ -19,8 +19,9 @@ const ContentManagement: React.FC = () => { useState(false); const [keywordModalVisible, setKeywordModalVisible] = useState(false); - // 引用素材管理组件 + // 引用管理组件 const materialManagementRef = useRef(null); + const keywordManagementRef = useRef(null); const tabs = [ { key: "material", label: "素材资源库" }, @@ -47,18 +48,28 @@ const ContentManagement: React.FC = () => { if (materialManagementRef.current?.fetchMaterials) { materialManagementRef.current.fetchMaterials(); } + // 刷新关键词列表 + if (keywordManagementRef.current?.fetchKeywords) { + keywordManagementRef.current.fetchKeywords(); + } }; const renderTabContent = () => { switch (activeTab) { case "material": - return ; + return ( + + ); case "sensitive": return ; case "keyword": - return ; + return ( + + ); default: - return ; + return ( + + ); } };