更新关键词管理模块：新增素材选择功能，优化回复类型切换逻辑，提升用户体验和代码可读性。

Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/api.ts

@@ -136,10 +136,11 @@ export interface KeywordAddRequest {
   level: number; // 优先级
   replyType: number; // 回复类型：文本回复、模板回复
   status: string;
+  materialId: number;
 }
 
 export interface KeywordUpdateRequest extends KeywordAddRequest {
-  id?: string;
+  id?: number;
 }
 
 export interface KeywordSetStatusRequest {

Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/modals/KeywordModal.tsx

@@ -7,7 +7,7 @@ import {
   type KeywordAddRequest,
   type KeywordUpdateRequest,
 } from "../../api";
-
+import MetailSelection from "@/components/MetailSelection";
 const { TextArea } = Input;
 const { Option } = Select;
 
@@ -44,6 +44,7 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
             level: keyword.level,
             replyType: keyword.replyType,
             status: keyword.status,
+            materialId: keyword.materialId,
           });
         }
       } catch (error) {
@@ -63,6 +64,7 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
       } else if (mode === "add") {
         // 添加模式：重置表单
         form.resetFields();
+        setSelectedOptions([]);
       }
     }
   }, [visible, mode, keywordId, fetchKeywordDetails, form]);
@@ -80,6 +82,7 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
           level: values.level,
           replyType: values.replyType,
           status: values.status || "1",
+          materialId: values.materialId,
         };
 
         const response = await addKeyword(data);
@@ -101,6 +104,7 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
           level: values.level,
           replyType: values.replyType,
           status: values.status,
+          materialId: values.materialId,
         };
 
         const response = await updateKeyword(data);
@@ -123,11 +127,44 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
 
   const handleCancel = () => {
     form.resetFields();
+    setSelectedOptions([]);
     onCancel();
   };
 
   const title = mode === "add" ? "添加关键词回复" : "编辑关键词回复";
+  const [selectedOptions, setSelectedOptions] = useState<any[]>([]);
+  const handSelectMaterial = (options: any[]) => {
+    if (options.length === 0) {
+      form.setFieldsValue({
+        materialId: null,
+      });
+    } else {
+      // 在单选模式下，只取第一个选项的ID
+      form.setFieldsValue({
+        materialId: options[0].id,
+      });
+    }
+    setSelectedOptions(options);
+  };
 
+  // 监听表单值变化
+  const handleFormValuesChange = (changedValues: any) => {
+    // 当回复类型切换时，清空素材选择
+    if (changedValues.replyType !== undefined) {
+      setSelectedOptions([]);
+      if (changedValues.replyType === 1) {
+        // 切换到自定义回复时，清空materialId
+        form.setFieldsValue({
+          materialId: null,
+        });
+      } else {
+        // 切换到素材回复时，清空content
+        form.setFieldsValue({
+          content: null,
+        });
+      }
+    }
+  };
   return (
     <Modal
       title={title}
@@ -140,6 +177,7 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
         form={form}
         layout="vertical"
         onFinish={handleSubmit}
+        onValuesChange={handleFormValuesChange}
         initialValues={{
           status: 1,
           type: "模糊匹配",
@@ -164,13 +202,39 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
         </Form.Item>
 
         <Form.Item
-          name="content"
-          label="回复内容"
-          rules={[{ required: true, message: "请输入回复内容" }]}
+          name="replyType"
+          label="回复类型"
+          rules={[{ required: true, message: "请选择回复类型" }]}
         >
-          <TextArea rows={4} placeholder="请输入回复内容" />
+          <Select placeholder="请选择回复类型">
+            <Option value={0}>素材回复</Option>
+            <Option value={1}>自定义</Option>
+          </Select>
         </Form.Item>
 
+        {form.getFieldValue("replyType") === 1 ? (
+          <Form.Item
+            name="content"
+            label="回复内容"
+            rules={[{ required: true, message: "请输入回复内容" }]}
+          >
+            <TextArea rows={4} placeholder="请输入回复内容" />
+          </Form.Item>
+        ) : (
+          <Form.Item
+            name="materialId"
+            label="回复内容"
+            rules={[{ required: true, message: "请输入回复内容" }]}
+          >
+            <MetailSelection
+              selectedOptions={selectedOptions}
+              onSelect={handSelectMaterial}
+              selectionMode="single"
+              placeholder="选择素材"
+            />
+          </Form.Item>
+        )}
+
         <Form.Item
           name="type"
           label="匹配类型"
@@ -194,17 +258,6 @@ const KeywordModal: React.FC<KeywordModalProps> = ({
           </Select>
         </Form.Item>
 
-        <Form.Item
-          name="replyType"
-          label="回复类型"
-          rules={[{ required: true, message: "请选择回复类型" }]}
-        >
-          <Select placeholder="请选择回复类型">
-            <Option value={0}>素材回复</Option>
-            <Option value={1}>自定义</Option>
-          </Select>
-        </Form.Item>
-
         <Form.Item
           name="status"
           label="状态"