From 0b50724b2f8723cdd370f882378626841bc6a5ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Fri, 26 Sep 2025 17:00:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AA=BF=E6=95=B4Ckbox=E9=A0=81=E9=9D=A2?=
 =?UTF-8?q?=E6=A8=99=E9=A1=8C=E5=8F=8A=E5=84=AA=E5=8C=96CommonConfig?=
 =?UTF-8?q?=E7=B5=84=E4=BB=B6=EF=BC=9A=E5=B0=87=E6=A8=99=E9=A1=8C=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E7=82=BA=E3=80=8C=E8=A7=B8=E5=AE=A2=E5=AF=B6=E3=80=8D?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=A6=E9=87=8D=E6=A7=8B=E6=A8=99=E7=B1=A4=E9=A0=81?=
 =?UTF-8?q?=E5=85=A7=E5=AE=B9=E9=A1=AF=E7=A4=BA=E9=82=8F=E8=BC=AF=EF=BC=8C?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BD=94=E4=BD=8D=E7=AC=A6=E4=BB=A5=E9=A1=AF?=
 =?UTF-8?q?=E7=A4=BA=E6=9C=AA=E9=96=8B=E7=99=BC=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B6=E9=AB=94=E9=A9=97=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReceptionSettings/api.ts       |   9 ++
 .../ReceptionSettings/index.module.scss       |  78 ++++++++++
 .../components/ReceptionSettings/index.tsx    | 114 ++++++++++++++
 .../pc/ckbox/commonConfig/index.module.scss   |  60 ++++---
 .../src/pages/pc/ckbox/commonConfig/index.tsx | 147 +++++-------------
 Touchkebao/src/pages/pc/ckbox/index.tsx       |   6 +-
 6 files changed, 284 insertions(+), 130 deletions(-)
 create mode 100644 Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts
 create mode 100644 Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss
 create mode 100644 Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx

diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts
new file mode 100644
index 00000000..82ed6ff9
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/api.ts
@@ -0,0 +1,9 @@
+import request from "@/api/request";
+
+export const getAiSettings = () => {
+  return request("/v1/kefu/ai/settings/get", "GET");
+};
+
+export const setAiSettings = (data: any) => {
+  return request("/v1/kefu/ai/settings/set", "POST", data);
+};
diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss
new file mode 100644
index 00000000..eff73214
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.module.scss
@@ -0,0 +1,78 @@
+.container {
+  display: flex;
+  gap: 24px;
+  height: 100%;
+
+  .left {
+    flex: 1;
+    min-width: 0;
+
+    .tip {
+      background: #f6f8fa;
+      border: 1px solid #e1e4e8;
+      border-radius: 6px;
+      padding: 12px 16px;
+      margin-bottom: 20px;
+      font-size: 14px;
+      color: #586069;
+      line-height: 1.5;
+    }
+
+    .formItem {
+      margin-bottom: 20px;
+
+      .label {
+        font-size: 14px;
+        font-weight: 500;
+        color: #24292e;
+        margin-bottom: 8px;
+      }
+    }
+
+    .primaryBtn {
+      margin-top: 20px;
+      height: 40px;
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  .right {
+    flex: 1;
+    min-width: 0;
+
+    :global(.ant-list-item) {
+      padding: 16px 0;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    :global(.ant-list-item-meta-title) {
+      font-size: 14px;
+      font-weight: 500;
+      color: #24292e;
+      margin-bottom: 4px;
+    }
+
+    :global(.ant-list-item-meta-description) {
+      font-size: 12px;
+      color: #586069;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    gap: 16px;
+
+    .left,
+    .right {
+      flex: none;
+    }
+  }
+}
diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx
new file mode 100644
index 00000000..8faa9da1
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/components/ReceptionSettings/index.tsx
@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Card, Select, Button, Space, Tag, List } from "antd";
+import { DatabaseOutlined } from "@ant-design/icons";
+import styles from "./index.module.scss";
+
+const { Option } = Select;
+
+const ReceptionSettings: React.FC = () => {
+  const [pool, setPool] = useState<string | undefined>();
+  const [mode, setMode] = useState<string>("人工接待");
+
+  const pools = ["官网咨询", "朋友推荐", "展会获客"];
+  const typeOptions = [
+    { value: 0, label: "人工接待" },
+    { value: 1, label: "AI辅助" },
+    { value: 2, label: "AI接管" },
+  ];
+  const [currentConfig, setCurrentConfig] = useState<number | null>(null);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.left}>
+        <Card
+          title={
+            <Space size={8}>
+              <DatabaseOutlined />
+              <span>全局接待模式</span>
+            </Space>
+          }
+        >
+          <div className={styles.tip}>
+            支持按流量池批量设置，单个客户设置将覆盖流量池默认配置
+          </div>
+
+          <div className={styles.formItem}>
+            <div className={styles.label}>选择流量池</div>
+            <Select
+              placeholder="请选择流量池"
+              value={pool}
+              onChange={setPool}
+              style={{ width: "100%" }}
+            >
+              {pools.map(p => (
+                <Option key={p} value={p}>
+                  {p}
+                </Option>
+              ))}
+            </Select>
+          </div>
+
+          <div className={styles.formItem}>
+            <div className={styles.label}>接待模式</div>
+            <Select
+              value={mode}
+              onChange={setCurrentConfig}
+              style={{ width: "100%" }}
+            >
+              {typeOptions.map(option => (
+                <Option key={option.value} value={option.value}>
+                  {option.label}
+                </Option>
+              ))}
+            </Select>
+          </div>
+          {JSON.stringify(currentConfig)}
+          <Button type="primary" block className={styles.primaryBtn}>
+            批量设置
+          </Button>
+        </Card>
+      </div>
+
+      <div className={styles.right}>
+        <Card
+          title={
+            <Space size={8}>
+              <DatabaseOutlined />
+              <span>流量池状态</span>
+            </Space>
+          }
+        >
+          <List
+            itemLayout="horizontal"
+            dataSource={pools}
+            renderItem={(item, index) => (
+              <List.Item>
+                <List.Item.Meta
+                  title={item}
+                  description={`${Math.floor(Math.random() * 300) + 50} 个客户`}
+                />
+                <Tag
+                  color={
+                    index % 3 === 0
+                      ? "blue"
+                      : index % 3 === 1
+                        ? "orange"
+                        : "green"
+                  }
+                >
+                  {index % 3 === 0
+                    ? "AI辅助"
+                    : index % 3 === 1
+                      ? "人工接待"
+                      : "AI接管"}
+                </Tag>
+              </List.Item>
+            )}
+          />
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default ReceptionSettings;
diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss
index 2fa1794a..23d55035 100644
--- a/Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss
@@ -1,32 +1,50 @@
 /* common-config page styles */
-.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
+.content {
+  flex: 1;
+  overflow: hidden;
   padding: 16px;
 }
 
 .tabsBar {
-  display: grid;
-  grid-template-columns: repeat(5, max-content);
-  gap: 24px;
-  padding: 12px 16px 0 16px;
-  color: #667085;
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 24px;
+  padding: 0 16px;
+
+  .tab {
+    padding: 12px 24px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    color: #666;
+    font-size: 14px;
+    transition: all 0.3s;
+    user-select: none;
+
+    &:hover {
+      color: #1890ff;
+      background-color: #f5f5f5;
+    }
+  }
+
+  .tabActive {
+    color: #1890ff;
+    border-bottom-color: #1890ff;
+    background-color: #f0f8ff;
+    font-weight: 500;
+  }
 }
 
-.tab {
-  padding: 10px 16px;
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  font-size: 16px;
+  color: #999;
+  background: #fafafa;
   border-radius: 8px;
-  background: #f7f9fc;
-  cursor: pointer;
-}
-
-.tabActive {
-  padding: 10px 16px;
-  border-radius: 8px;
-  background: #eef5ff;
-  color: #1677ff;
-  box-shadow: inset 0 0 0 1px #d6e6ff;
+  border: 1px dashed #d9d9d9;
 }
 
 .left,
diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx
index e483937e..327d942c 100644
--- a/Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx
@@ -1,18 +1,41 @@
 import React, { useState } from "react";
 import Layout from "@/components/Layout/LayoutFiexd";
 import PowerNavigation from "@/components/PowerNavtion";
-import { Card, Select, Button, Space, Tag, List } from "antd";
-import { SettingOutlined, DatabaseOutlined } from "@ant-design/icons";
+import { Button, Space } from "antd";
+import ReceptionSettings from "./components/ReceptionSettings";
 import styles from "./index.module.scss";
 
-const { Option } = Select;
-
 const CommonConfig: React.FC = () => {
-  const [pool, setPool] = useState<string | undefined>();
-  const [mode, setMode] = useState<string>("人工接待");
+  const [activeTab, setActiveTab] = useState<string>("reception");
 
-  const pools = ["官网咨询", "朋友推荐", "展会获客"];
+  const tabs = [
+    { key: "reception", label: "接待设置" },
+    { key: "notification", label: "通知设置" },
+    { key: "system", label: "系统设置" },
+    { key: "security", label: "安全设置" },
+    { key: "advanced", label: "高级设置" },
+  ];
 
+  const handleTabClick = (tabKey: string) => {
+    setActiveTab(tabKey);
+  };
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "reception":
+        return <ReceptionSettings />;
+      case "notification":
+        return <div className={styles.placeholder}>通知设置功能开发中...</div>;
+      case "system":
+        return <div className={styles.placeholder}>系统设置功能开发中...</div>;
+      case "security":
+        return <div className={styles.placeholder}>安全设置功能开发中...</div>;
+      case "advanced":
+        return <div className={styles.placeholder}>高级设置功能开发中...</div>;
+      default:
+        return <ReceptionSettings />;
+    }
+  };
   return (
     <Layout
       header={
@@ -24,114 +47,30 @@ const CommonConfig: React.FC = () => {
             backButtonText="返回功能中心"
           />
           <div className={styles.tabsBar}>
-            <div className={styles.tabActive}>接待设置</div>
-            <div className={styles.tab}>通知设置</div>
-            <div className={styles.tab}>系统设置</div>
-            <div className={styles.tab}>安全设置</div>
-            <div className={styles.tab}>高级设置</div>
+            {tabs.map(tab => (
+              <div
+                key={tab.key}
+                className={`${styles.tab} ${
+                  activeTab === tab.key ? styles.tabActive : ""
+                }`}
+                onClick={() => handleTabClick(tab.key)}
+              >
+                {tab.label}
+              </div>
+            ))}
           </div>
         </>
       }
       footer={
         <div className={styles.actions}>
           <Space>
-            <Button
-              onClick={() => {
-                setPool(undefined);
-                setMode("人工接待");
-              }}
-            >
-              重置设置
-            </Button>
+            <Button onClick={() => setActiveTab("reception")}>重置设置</Button>
             <Button type="primary">保存设置</Button>
           </Space>
         </div>
       }
     >
-      <div className={styles.container}>
-        <div className={styles.left}>
-          <Card
-            title={
-              <Space size={8}>
-                <DatabaseOutlined />
-                <span>全局接待模式</span>
-              </Space>
-            }
-          >
-            <div className={styles.tip}>
-              支持按流量池批量设置，单个客户设置将覆盖流量池默认配置
-            </div>
-
-            <div className={styles.formItem}>
-              <div className={styles.label}>选择流量池</div>
-              <Select
-                placeholder="请选择流量池"
-                value={pool}
-                onChange={setPool}
-                style={{ width: "100%" }}
-              >
-                {pools.map(p => (
-                  <Option key={p} value={p}>
-                    {p}
-                  </Option>
-                ))}
-              </Select>
-            </div>
-
-            <div className={styles.formItem}>
-              <div className={styles.label}>接待模式</div>
-              <Select value={mode} onChange={setMode} style={{ width: "100%" }}>
-                <Option value="人工接待">人工接待</Option>
-                <Option value="AI接待">AI接待</Option>
-                <Option value="AI辅助">AI辅助</Option>
-              </Select>
-            </div>
-
-            <Button type="primary" block className={styles.primaryBtn}>
-              批量设置
-            </Button>
-          </Card>
-        </div>
-
-        <div className={styles.right}>
-          <Card
-            title={
-              <Space size={8}>
-                <SettingOutlined />
-                <span>流量池状态</span>
-              </Space>
-            }
-          >
-            <List
-              itemLayout="horizontal"
-              dataSource={pools}
-              renderItem={(item, index) => (
-                <List.Item>
-                  <List.Item.Meta
-                    title={item}
-                    description={`${Math.floor(Math.random() * 300) + 50} 个客户`}
-                  />
-                  <Tag
-                    color={
-                      index % 3 === 0
-                        ? "blue"
-                        : index % 3 === 1
-                          ? "orange"
-                          : "green"
-                    }
-                  >
-                    {index % 3 === 0
-                      ? "AI辅助"
-                      : index % 3 === 1
-                        ? "人工接待"
-                        : "AI接管"}
-                  </Tag>
-                </List.Item>
-              )}
-            />
-          </Card>
-        </div>
-      </div>
+      <div className={styles.content}>{renderTabContent()}</div>
     </Layout>
   );
 };
diff --git a/Touchkebao/src/pages/pc/ckbox/index.tsx b/Touchkebao/src/pages/pc/ckbox/index.tsx
index 039bac75..a74b6914 100644
--- a/Touchkebao/src/pages/pc/ckbox/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/index.tsx
@@ -4,11 +4,7 @@ import { Outlet } from "react-router-dom";
 import NavCommon from "./components/NavCommon";
 const CkboxPage: React.FC = () => {
   return (
-    <Layout
-      header={
-        <NavCommon title="AI自动聊天，懂业务，会引导，客户不停地聊不停" />
-      }
-    >
+    <Layout header={<NavCommon title="触客宝" />}>
       <Outlet />
     </Layout>
   );