From 3b0b83aae180274be6393fbd5ee90a05a1433d1b 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: Wed, 15 Oct 2025 10:16:12 +0800
Subject: [PATCH 01/19] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=EF=BC=9A=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4BatchAddModal=E3=80=81DataAnalysisPanel=E3=80=81Filter?=
 =?UTF-8?q?Modal=E5=8F=8A=E5=85=B6=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=EF=BC=8C=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E7=BB=B4=E6=8A=A4=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/mine/traffic-pool/list/index.tsx   | 322 ++------------
 .../{list => poolList}/BatchAddModal.tsx      |   0
 .../{list => poolList}/DataAnalysisPanel.tsx  |   0
 .../{list => poolList}/FilterModal.tsx        |   0
 .../mobile/mine/traffic-pool/poolList/api.ts  |  34 ++
 .../mobile/mine/traffic-pool/poolList/data.ts |  51 +++
 .../traffic-pool/poolList/index.module.scss   |  65 +++
 .../mine/traffic-pool/poolList/index.tsx      | 396 ++++++++++++++++++
 Cunkebao/src/router/module/mine.tsx           |   6 +
 9 files changed, 586 insertions(+), 288 deletions(-)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{list => poolList}/BatchAddModal.tsx (100%)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{list => poolList}/DataAnalysisPanel.tsx (100%)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{list => poolList}/FilterModal.tsx (100%)
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/data.ts
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index c5c6306da..16d2abe7b 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -1,29 +1,19 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Layout from "@/components/Layout/Layout";
-import {
-  SearchOutlined,
-  ReloadOutlined,
-  BarChartOutlined,
-} from "@ant-design/icons";
-import { Toast } from "antd-mobile";
-import { Input, Button, Checkbox, Pagination } from "antd";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button, Pagination } from "antd";
 import styles from "./index.module.scss";
 import { Empty, Avatar } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
 import NavCommon from "@/components/NavCommon";
-import { fetchTrafficPoolList, fetchScenarioOptions, addPackage } from "./api";
-import type { TrafficPoolUser, ScenarioOption } from "./data";
-import DataAnalysisPanel from "./DataAnalysisPanel";
-import FilterModal from "./FilterModal";
-import BatchAddModal from "./BatchAddModal";
-import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
+import { fetchTrafficPoolList } from "./api";
+import type { TrafficPoolUser } from "./data";
 const defaultAvatar =
   "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png";
 
 const TrafficPoolList: React.FC = () => {
   const navigate = useNavigate();
 
-  // 基础状态
   const [loading, setLoading] = useState(false);
   const [list, setList] = useState<TrafficPoolUser[]>([]);
   const [page, setPage] = useState(1);
@@ -31,251 +21,57 @@ const TrafficPoolList: React.FC = () => {
   const [total, setTotal] = useState(0);
   const [search, setSearch] = useState("");
 
-  // 筛选相关
-  const [showFilter, setShowFilter] = useState(false);
-  const [scenarioOptions, setScenarioOptions] = useState<ScenarioOption[]>([]);
+  const handleSearch = (value: string) => {
+    setSearch(value);
+    setPage(1);
+  };
 
-  // 公共筛选条件状态
-  const [filterParams, setFilterParams] = useState({
-    selectedDevices: [] as DeviceSelectionItem[],
-    packageId: 0,
-    scenarioId: 0,
-    userValue: 0,
-    userStatus: 0,
-  });
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const params = {
+          page,
+          pageSize,
+          keyword: search,
+        };
 
-  // 批量相关
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const [batchModal, setBatchModal] = useState(false);
-
-  // 数据分析
-  const [showStats, setShowStats] = useState(false);
-
-  // 获取列表
-  const getList = async (customParams?: any) => {
-    setLoading(true);
-    try {
-      const params: any = {
-        page,
-        pageSize,
-        keyword: search,
-        packageld: filterParams.packageId,
-        sceneId: filterParams.scenarioId,
-        userValue: filterParams.userValue,
-        addStatus: filterParams.userStatus,
-        deviceld: filterParams.selectedDevices.map(d => d.id).join(),
-        ...customParams, // 允许传入自定义参数覆盖
-      };
-
-      const res = await fetchTrafficPoolList(params);
-      setList(res.list || []);
-      setTotal(res.total || 0);
-    } catch (error) {
-      // 忽略请求过于频繁的错误，避免页面崩溃
-      if (error !== "请求过于频繁，请稍后再试") {
+        const res = await fetchTrafficPoolList(params);
+        setList(res.list || []);
+        setTotal(res.total || 0);
+      } catch (error) {
         console.error("获取列表失败:", error);
+      } finally {
+        setLoading(false);
       }
-    } finally {
-      setLoading(false);
-    }
-  };
+    };
 
-  // 获取筛选项
-  useEffect(() => {
-    fetchScenarioOptions().then(res => {
-      setScenarioOptions(res.list || []);
-    });
-  }, []);
-
-  // 全选/反选
-  const handleSelectAll = (checked: boolean) => {
-    if (checked) {
-      setSelectedIds(list.map(item => item.id));
-    } else {
-      setSelectedIds([]);
-    }
-  };
-
-  // 单选
-  const handleSelect = (id: number, checked: boolean) => {
-    setSelectedIds(prev =>
-      checked ? [...prev, id] : prev.filter(i => i !== id),
-    );
-  };
-
-  // 批量加入分组/流量池
-  const handleBatchAdd = async options => {
-    try {
-      // 构建请求参数
-      const params = {
-        type: "2", // 2选择用户
-        addPackageId: options.selectedPackageId, // 目标分组ID
-        userIds: selectedIds.map(id => id), // 选中的用户ID数组
-        // 如果有当前筛选条件，也可以传递
-        ...(filterParams.packageId && {
-          packageId: filterParams.packageId,
-        }),
-        ...(filterParams.scenarioId && {
-          taskId: filterParams.scenarioId,
-        }),
-        ...(filterParams.userValue && {
-          userValue: filterParams.userValue,
-        }),
-        ...(filterParams.userStatus && {
-          addStatus: filterParams.userStatus,
-        }),
-        ...(filterParams.selectedDevices.length > 0 && {
-          deviceId: filterParams.selectedDevices.map(d => d.id).join(","),
-        }),
-        ...(search && { keyword: search }),
-      };
-
-      console.log("批量加入请求参数:", params);
-
-      // 调用接口
-      const result = await addPackage(params);
-      console.log("批量加入结果:", result);
-
-      // 成功后刷新列表
-      getList();
-
-      // 关闭弹窗并清空选择
-      setBatchModal(false);
-      setSelectedIds([]);
-
-      // 可以添加成功提示
-      Toast.show({
-        content: `成功将用户加入分组`,
-        position: "top",
-      });
-    } catch (error) {
-      console.error("批量加入失败:", error);
-      // 可以添加错误提示
-      Toast.show({ content: "批量加入失败，请重试", position: "top" });
-    }
-  };
-
-  // 搜索防抖处理
-  const [searchInput, setSearchInput] = useState(search);
-
-  const debouncedSearch = useCallback(() => {
-    const timer = setTimeout(() => {
-      setSearch(searchInput);
-      // 搜索时重置到第一页并请求列表
-      setPage(1);
-      getList({ keyword: searchInput, page: 1 });
-    }, 500); // 500ms 防抖延迟
-
-    return () => clearTimeout(timer);
-  }, [searchInput]);
-
-  useEffect(() => {
-    const cleanup = debouncedSearch();
-    return cleanup;
-  }, [debouncedSearch]);
-
-  const handSearch = (value: string) => {
-    setSearchInput(value);
-    setSelectedIds([]);
-    debouncedSearch();
-  };
+    fetchData();
+  }, [page, pageSize, search]);
 
   return (
     <Layout
       loading={loading}
       header={
         <>
-          <NavCommon
-            title="流量池用户列表"
-            right={
-              <Button
-                onClick={() => setShowStats(s => !s)}
-                style={{ marginLeft: 8 }}
-              >
-                <BarChartOutlined /> {showStats ? "收起分析" : "数据分析"}
-              </Button>
-            }
-          />
-          {/* 搜索栏 */}
+          <NavCommon title="流量池用户列表" />
           <div className="search-bar">
             <div className="search-input-wrapper">
               <Input
-                placeholder="搜索计划名称"
-                value={searchInput}
-                onChange={e => handSearch(e.target.value)}
+                placeholder="搜索用户"
+                value={search}
+                onChange={e => handleSearch(e.target.value)}
                 prefix={<SearchOutlined />}
                 allowClear
                 size="large"
               />
             </div>
             <Button
-              onClick={() => getList()}
+              onClick={() => setPage(1)}
               loading={loading}
               size="large"
               icon={<ReloadOutlined />}
-            ></Button>
-          </div>
-          {/* 数据分析面板 */}
-          <DataAnalysisPanel
-            showStats={showStats}
-            setShowStats={setShowStats}
-            onConfirm={statsData => {
-              // 可以在这里处理统计数据，比如更新本地状态或发送到父组件
-              console.log("收到统计数据:", statsData);
-            }}
-          />
-
-          {/* 批量操作栏 */}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              padding: "8px 12px 8px 26px",
-              background: "#fff",
-              borderBottom: "1px solid #f0f0f0",
-            }}
-          >
-            <Checkbox
-              checked={selectedIds.length === list.length && list.length > 0}
-              onChange={e => handleSelectAll(e.target.checked)}
-              style={{ marginRight: 8 }}
             />
-            <span>全选</span>
-            {selectedIds.length > 0 && (
-              <>
-                <span
-                  style={{ marginLeft: 16, color: "#1677ff" }}
-                >{`已选${selectedIds.length}项`}</span>
-                <Button
-                  size="small"
-                  color="primary"
-                  style={{ marginLeft: 16 }}
-                  onClick={() => setBatchModal(true)}
-                >
-                  批量加入分组
-                </Button>
-              </>
-            )}
-            {searchInput.length > 0 && (
-              <>
-                <Button
-                  size="small"
-                  type="primary"
-                  style={{ marginLeft: 16 }}
-                  onClick={() => setBatchModal(true)}
-                >
-                  导入当前搜索结果
-                </Button>
-              </>
-            )}
-            <div style={{ flex: 1 }} />
-            <Button
-              size="small"
-              style={{ marginLeft: 8 }}
-              onClick={() => setShowFilter(true)}
-            >
-              筛选
-            </Button>
           </div>
         </>
       }
@@ -283,56 +79,14 @@ const TrafficPoolList: React.FC = () => {
         <div className="pagination-container">
           <Pagination
             current={page}
-            pageSize={20}
+            pageSize={pageSize}
             total={total}
             showSizeChanger={false}
-            onChange={newPage => {
-              setPage(newPage);
-              getList({ page: newPage });
-            }}
+            onChange={setPage}
           />
         </div>
       }
     >
-      {/* 批量加入分组弹窗 */}
-      <BatchAddModal
-        visible={batchModal}
-        onClose={() => setBatchModal(false)}
-        selectedCount={selectedIds.length}
-        onConfirm={data => {
-          // 处理批量加入逻辑
-          handleBatchAdd(data);
-        }}
-      />
-      {/* 筛选弹窗 */}
-      <FilterModal
-        visible={showFilter}
-        onClose={() => setShowFilter(false)}
-        onConfirm={filters => {
-          // 更新公共筛选条件状态
-          const newFilterParams = {
-            selectedDevices: filters.selectedDevices,
-            packageId: filters.packageld,
-            scenarioId: filters.sceneId,
-            userValue: filters.userValue,
-            userStatus: filters.addStatus,
-          };
-
-          setFilterParams(newFilterParams);
-          // 重置到第一页并请求列表
-          setPage(1);
-          getList({
-            page: 1,
-            packageld: newFilterParams.packageId,
-            sceneId: newFilterParams.scenarioId,
-            userValue: newFilterParams.userValue,
-            addStatus: newFilterParams.userStatus,
-            deviceld: newFilterParams.selectedDevices.map(d => d.id).join(),
-          });
-        }}
-        scenarioOptions={scenarioOptions}
-        initialFilters={filterParams}
-      />
       <div className={styles.listWrap}>
         {list.length === 0 && !loading ? (
           <Empty description="暂无数据" />
@@ -350,13 +104,6 @@ const TrafficPoolList: React.FC = () => {
                   }
                 >
                   <div className={styles.cardContent}>
-                    <Checkbox
-                      checked={selectedIds.includes(item.id)}
-                      onChange={e => handleSelect(item.id, e.target.checked)}
-                      style={{ marginRight: 8 }}
-                      onClick={e => e.stopPropagation()}
-                      className={styles.checkbox}
-                    />
                     <Avatar
                       src={item.avatar || defaultAvatar}
                       style={{ "--size": "60px" }}
@@ -364,7 +111,6 @@ const TrafficPoolList: React.FC = () => {
                     <div style={{ flex: 1 }}>
                       <div className={styles.title}>
                         {item.nickname || item.identifier}
-                        {/* 性别icon可自行封装 */}
                       </div>
                       <div className={styles.desc}>
                         微信号：{item.wechatId || "-"}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/BatchAddModal.tsx
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/BatchAddModal.tsx
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/DataAnalysisPanel.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/DataAnalysisPanel.tsx
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/list/DataAnalysisPanel.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/DataAnalysisPanel.tsx
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/FilterModal.tsx
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/FilterModal.tsx
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/api.ts
new file mode 100644
index 000000000..9b53c030a
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/api.ts
@@ -0,0 +1,34 @@
+import request from "@/api/request";
+
+// 获取流量池列表
+export function fetchTrafficPoolList(params: {
+  page?: number;
+  pageSize?: number;
+  keyword?: string;
+}) {
+  return request("/v1/traffic/pool", params, "GET");
+}
+
+export async function fetchScenarioOptions() {
+  return request("/v1/plan/scenes", {}, "GET");
+}
+
+export async function fetchPackageOptions() {
+  return request("/v1/traffic/pool/getPackage", {}, "GET");
+}
+
+export async function addPackage(params: {
+  type: string; // 类型 1搜索 2选择用户 3文件上传
+  addPackageId?: number;
+  addStatus?: number;
+  deviceId?: string;
+  keyword?: string;
+  packageId?: number;
+  packageName?: number; // 添加的流量池名称
+  tableFile?: number;
+  taskId?: number; // 任务id j及场景获客id
+  userIds?: number[];
+  userValue?: number;
+}) {
+  return request("/v1/traffic/pool/addPackage", params, "POST");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/data.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/data.ts
new file mode 100644
index 000000000..65ad7f559
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/data.ts
@@ -0,0 +1,51 @@
+// 流量池用户类型
+export interface TrafficPoolUser {
+  id: number;
+  identifier: string;
+  mobile: string;
+  wechatId: string;
+  fromd: string;
+  status: number;
+  createTime: string;
+  companyId: number;
+  sourceId: string;
+  type: number;
+  nickname: string;
+  avatar: string;
+  gender: number;
+  phone: string;
+  packages: string[];
+  tags: string[];
+}
+
+// 列表响应类型
+export interface TrafficPoolUserListResponse {
+  list: TrafficPoolUser[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+// 设备类型
+export interface DeviceOption {
+  id: string;
+  name: string;
+}
+
+// 分组类型
+export interface PackageOption {
+  id: string;
+  name: string;
+}
+
+// 用户价值类型
+export type ValueLevel = "all" | "high" | "medium" | "low";
+
+// 状态类型
+export type UserStatus = "all" | "added" | "pending" | "failed" | "duplicate";
+
+// 获客场景类型
+export interface ScenarioOption {
+  id: string;
+  name: string;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.module.scss
new file mode 100644
index 000000000..2fbee5e38
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.module.scss
@@ -0,0 +1,65 @@
+.listWrap {
+  padding: 12px;
+}
+
+.cardContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+}
+.checkbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.cardWrap {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  margin-bottom: 12px;
+}
+
+.card {
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+}
+
+.desc {
+  font-size: 13px;
+  color: #888;
+  margin: 6px 0 4px 0;
+}
+
+.count {
+  font-size: 13px;
+  color: #1677ff;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.pagination button {
+  background: #f5f5f5;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 12px;
+  color: #1677ff;
+  cursor: pointer;
+}
+
+.pagination button:disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx
new file mode 100644
index 000000000..c5c6306da
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx
@@ -0,0 +1,396 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Layout from "@/components/Layout/Layout";
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  BarChartOutlined,
+} from "@ant-design/icons";
+import { Toast } from "antd-mobile";
+import { Input, Button, Checkbox, Pagination } from "antd";
+import styles from "./index.module.scss";
+import { Empty, Avatar } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+import NavCommon from "@/components/NavCommon";
+import { fetchTrafficPoolList, fetchScenarioOptions, addPackage } from "./api";
+import type { TrafficPoolUser, ScenarioOption } from "./data";
+import DataAnalysisPanel from "./DataAnalysisPanel";
+import FilterModal from "./FilterModal";
+import BatchAddModal from "./BatchAddModal";
+import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
+const defaultAvatar =
+  "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png";
+
+const TrafficPoolList: React.FC = () => {
+  const navigate = useNavigate();
+
+  // 基础状态
+  const [loading, setLoading] = useState(false);
+  const [list, setList] = useState<TrafficPoolUser[]>([]);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [search, setSearch] = useState("");
+
+  // 筛选相关
+  const [showFilter, setShowFilter] = useState(false);
+  const [scenarioOptions, setScenarioOptions] = useState<ScenarioOption[]>([]);
+
+  // 公共筛选条件状态
+  const [filterParams, setFilterParams] = useState({
+    selectedDevices: [] as DeviceSelectionItem[],
+    packageId: 0,
+    scenarioId: 0,
+    userValue: 0,
+    userStatus: 0,
+  });
+
+  // 批量相关
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [batchModal, setBatchModal] = useState(false);
+
+  // 数据分析
+  const [showStats, setShowStats] = useState(false);
+
+  // 获取列表
+  const getList = async (customParams?: any) => {
+    setLoading(true);
+    try {
+      const params: any = {
+        page,
+        pageSize,
+        keyword: search,
+        packageld: filterParams.packageId,
+        sceneId: filterParams.scenarioId,
+        userValue: filterParams.userValue,
+        addStatus: filterParams.userStatus,
+        deviceld: filterParams.selectedDevices.map(d => d.id).join(),
+        ...customParams, // 允许传入自定义参数覆盖
+      };
+
+      const res = await fetchTrafficPoolList(params);
+      setList(res.list || []);
+      setTotal(res.total || 0);
+    } catch (error) {
+      // 忽略请求过于频繁的错误，避免页面崩溃
+      if (error !== "请求过于频繁，请稍后再试") {
+        console.error("获取列表失败:", error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 获取筛选项
+  useEffect(() => {
+    fetchScenarioOptions().then(res => {
+      setScenarioOptions(res.list || []);
+    });
+  }, []);
+
+  // 全选/反选
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(list.map(item => item.id));
+    } else {
+      setSelectedIds([]);
+    }
+  };
+
+  // 单选
+  const handleSelect = (id: number, checked: boolean) => {
+    setSelectedIds(prev =>
+      checked ? [...prev, id] : prev.filter(i => i !== id),
+    );
+  };
+
+  // 批量加入分组/流量池
+  const handleBatchAdd = async options => {
+    try {
+      // 构建请求参数
+      const params = {
+        type: "2", // 2选择用户
+        addPackageId: options.selectedPackageId, // 目标分组ID
+        userIds: selectedIds.map(id => id), // 选中的用户ID数组
+        // 如果有当前筛选条件，也可以传递
+        ...(filterParams.packageId && {
+          packageId: filterParams.packageId,
+        }),
+        ...(filterParams.scenarioId && {
+          taskId: filterParams.scenarioId,
+        }),
+        ...(filterParams.userValue && {
+          userValue: filterParams.userValue,
+        }),
+        ...(filterParams.userStatus && {
+          addStatus: filterParams.userStatus,
+        }),
+        ...(filterParams.selectedDevices.length > 0 && {
+          deviceId: filterParams.selectedDevices.map(d => d.id).join(","),
+        }),
+        ...(search && { keyword: search }),
+      };
+
+      console.log("批量加入请求参数:", params);
+
+      // 调用接口
+      const result = await addPackage(params);
+      console.log("批量加入结果:", result);
+
+      // 成功后刷新列表
+      getList();
+
+      // 关闭弹窗并清空选择
+      setBatchModal(false);
+      setSelectedIds([]);
+
+      // 可以添加成功提示
+      Toast.show({
+        content: `成功将用户加入分组`,
+        position: "top",
+      });
+    } catch (error) {
+      console.error("批量加入失败:", error);
+      // 可以添加错误提示
+      Toast.show({ content: "批量加入失败，请重试", position: "top" });
+    }
+  };
+
+  // 搜索防抖处理
+  const [searchInput, setSearchInput] = useState(search);
+
+  const debouncedSearch = useCallback(() => {
+    const timer = setTimeout(() => {
+      setSearch(searchInput);
+      // 搜索时重置到第一页并请求列表
+      setPage(1);
+      getList({ keyword: searchInput, page: 1 });
+    }, 500); // 500ms 防抖延迟
+
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
+  useEffect(() => {
+    const cleanup = debouncedSearch();
+    return cleanup;
+  }, [debouncedSearch]);
+
+  const handSearch = (value: string) => {
+    setSearchInput(value);
+    setSelectedIds([]);
+    debouncedSearch();
+  };
+
+  return (
+    <Layout
+      loading={loading}
+      header={
+        <>
+          <NavCommon
+            title="流量池用户列表"
+            right={
+              <Button
+                onClick={() => setShowStats(s => !s)}
+                style={{ marginLeft: 8 }}
+              >
+                <BarChartOutlined /> {showStats ? "收起分析" : "数据分析"}
+              </Button>
+            }
+          />
+          {/* 搜索栏 */}
+          <div className="search-bar">
+            <div className="search-input-wrapper">
+              <Input
+                placeholder="搜索计划名称"
+                value={searchInput}
+                onChange={e => handSearch(e.target.value)}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
+              />
+            </div>
+            <Button
+              onClick={() => getList()}
+              loading={loading}
+              size="large"
+              icon={<ReloadOutlined />}
+            ></Button>
+          </div>
+          {/* 数据分析面板 */}
+          <DataAnalysisPanel
+            showStats={showStats}
+            setShowStats={setShowStats}
+            onConfirm={statsData => {
+              // 可以在这里处理统计数据，比如更新本地状态或发送到父组件
+              console.log("收到统计数据:", statsData);
+            }}
+          />
+
+          {/* 批量操作栏 */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              padding: "8px 12px 8px 26px",
+              background: "#fff",
+              borderBottom: "1px solid #f0f0f0",
+            }}
+          >
+            <Checkbox
+              checked={selectedIds.length === list.length && list.length > 0}
+              onChange={e => handleSelectAll(e.target.checked)}
+              style={{ marginRight: 8 }}
+            />
+            <span>全选</span>
+            {selectedIds.length > 0 && (
+              <>
+                <span
+                  style={{ marginLeft: 16, color: "#1677ff" }}
+                >{`已选${selectedIds.length}项`}</span>
+                <Button
+                  size="small"
+                  color="primary"
+                  style={{ marginLeft: 16 }}
+                  onClick={() => setBatchModal(true)}
+                >
+                  批量加入分组
+                </Button>
+              </>
+            )}
+            {searchInput.length > 0 && (
+              <>
+                <Button
+                  size="small"
+                  type="primary"
+                  style={{ marginLeft: 16 }}
+                  onClick={() => setBatchModal(true)}
+                >
+                  导入当前搜索结果
+                </Button>
+              </>
+            )}
+            <div style={{ flex: 1 }} />
+            <Button
+              size="small"
+              style={{ marginLeft: 8 }}
+              onClick={() => setShowFilter(true)}
+            >
+              筛选
+            </Button>
+          </div>
+        </>
+      }
+      footer={
+        <div className="pagination-container">
+          <Pagination
+            current={page}
+            pageSize={20}
+            total={total}
+            showSizeChanger={false}
+            onChange={newPage => {
+              setPage(newPage);
+              getList({ page: newPage });
+            }}
+          />
+        </div>
+      }
+    >
+      {/* 批量加入分组弹窗 */}
+      <BatchAddModal
+        visible={batchModal}
+        onClose={() => setBatchModal(false)}
+        selectedCount={selectedIds.length}
+        onConfirm={data => {
+          // 处理批量加入逻辑
+          handleBatchAdd(data);
+        }}
+      />
+      {/* 筛选弹窗 */}
+      <FilterModal
+        visible={showFilter}
+        onClose={() => setShowFilter(false)}
+        onConfirm={filters => {
+          // 更新公共筛选条件状态
+          const newFilterParams = {
+            selectedDevices: filters.selectedDevices,
+            packageId: filters.packageld,
+            scenarioId: filters.sceneId,
+            userValue: filters.userValue,
+            userStatus: filters.addStatus,
+          };
+
+          setFilterParams(newFilterParams);
+          // 重置到第一页并请求列表
+          setPage(1);
+          getList({
+            page: 1,
+            packageld: newFilterParams.packageId,
+            sceneId: newFilterParams.scenarioId,
+            userValue: newFilterParams.userValue,
+            addStatus: newFilterParams.userStatus,
+            deviceld: newFilterParams.selectedDevices.map(d => d.id).join(),
+          });
+        }}
+        scenarioOptions={scenarioOptions}
+        initialFilters={filterParams}
+      />
+      <div className={styles.listWrap}>
+        {list.length === 0 && !loading ? (
+          <Empty description="暂无数据" />
+        ) : (
+          <div>
+            {list.map(item => (
+              <div key={item.id} className={styles.cardWrap}>
+                <div
+                  className={styles.card}
+                  style={{ cursor: "pointer" }}
+                  onClick={() =>
+                    navigate(
+                      `/mine/traffic-pool/detail/${item.wechatId}/${item.id}`,
+                    )
+                  }
+                >
+                  <div className={styles.cardContent}>
+                    <Checkbox
+                      checked={selectedIds.includes(item.id)}
+                      onChange={e => handleSelect(item.id, e.target.checked)}
+                      style={{ marginRight: 8 }}
+                      onClick={e => e.stopPropagation()}
+                      className={styles.checkbox}
+                    />
+                    <Avatar
+                      src={item.avatar || defaultAvatar}
+                      style={{ "--size": "60px" }}
+                    />
+                    <div style={{ flex: 1 }}>
+                      <div className={styles.title}>
+                        {item.nickname || item.identifier}
+                        {/* 性别icon可自行封装 */}
+                      </div>
+                      <div className={styles.desc}>
+                        微信号：{item.wechatId || "-"}
+                      </div>
+                      <div className={styles.desc}>
+                        来源：{item.fromd || "-"}
+                      </div>
+                      <div className={styles.desc}>
+                        分组：
+                        {item.packages && item.packages.length
+                          ? item.packages.join("，")
+                          : "-"}
+                      </div>
+                      <div className={styles.desc}>
+                        创建时间：{item.createTime}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+};
+
+export default TrafficPoolList;
diff --git a/Cunkebao/src/router/module/mine.tsx b/Cunkebao/src/router/module/mine.tsx
index 0017d157e..e7038ddde 100644
--- a/Cunkebao/src/router/module/mine.tsx
+++ b/Cunkebao/src/router/module/mine.tsx
@@ -2,6 +2,7 @@ import Mine from "@/pages/mobile/mine/main/index";
 import Devices from "@/pages/mobile/mine/devices/index";
 import DeviceDetail from "@/pages/mobile/mine/devices/DeviceDetail";
 import TrafficPool from "@/pages/mobile/mine/traffic-pool/list/index";
+import TrafficPoolList from "@/pages/mobile/mine/traffic-pool/poolList/index";
 import TrafficPoolDetail from "@/pages/mobile/mine/traffic-pool/detail/index";
 import WechatAccounts from "@/pages/mobile/mine/wechat-accounts/list/index";
 import WechatAccountDetail from "@/pages/mobile/mine/wechat-accounts/detail/index";
@@ -34,6 +35,11 @@ const routes = [
     element: <TrafficPool />,
     auth: true,
   },
+  {
+    path: "/mine/traffic-pool/list",
+    element: <TrafficPoolList />,
+    auth: true,
+  },
   {
     path: "/mine/traffic-pool/detail/:wxid/:userId",
     element: <TrafficPoolDetail />,

From ceffea4c5bb5d6aa51193a82244594bd130ad3f0 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: Wed, 15 Oct 2025 15:47:34 +0800
Subject: [PATCH 02/19] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E6=A8=A1=E5=9D=97=EF=BC=9A=E6=9B=B4=E6=96=B0API?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85?=
 =?UTF-8?q?=E8=A6=81=E7=9A=84=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91=EF=BC=8C=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E5=8F=AF=E7=BB=B4=E6=8A=A4=E6=80=A7=E5=92=8C=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/mine/traffic-pool/list/api.ts      |  50 +--
 .../mobile/mine/traffic-pool/list/index.tsx   | 222 ++++++++--
 .../mine/traffic-pool/poolList/index.tsx      | 322 ++------------
 .../{poolList => poolList1}/BatchAddModal.tsx |   0
 .../DataAnalysisPanel.tsx                     |   0
 .../{poolList => poolList1}/FilterModal.tsx   |   0
 .../mobile/mine/traffic-pool/poolList1/api.ts |  34 ++
 .../mine/traffic-pool/poolList1/data.ts       |  51 +++
 .../traffic-pool/poolList1/index.module.scss  |  65 +++
 .../mine/traffic-pool/poolList1/index.tsx     | 396 ++++++++++++++++++
 Cunkebao/src/router/module/mine.tsx           |   2 +-
 11 files changed, 778 insertions(+), 364 deletions(-)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{poolList => poolList1}/BatchAddModal.tsx (100%)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{poolList => poolList1}/DataAnalysisPanel.tsx (100%)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{poolList => poolList1}/FilterModal.tsx (100%)
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/data.ts
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.tsx

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
index 9b53c030a..98d292314 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
@@ -1,34 +1,26 @@
 import request from "@/api/request";
 
-// 获取流量池列表
-export function fetchTrafficPoolList(params: {
-  page?: number;
-  pageSize?: number;
-  keyword?: string;
-}) {
-  return request("/v1/traffic/pool", params, "GET");
+export interface Package {
+  id: number;
+  name: string;
+  description: string;
+  pic: string;
+  type: number;
+  createTime: string;
+  num: number;
+  R: number;
+  F: number;
+  M: number;
+  RFM: number;
 }
-
-export async function fetchScenarioOptions() {
-  return request("/v1/plan/scenes", {}, "GET");
+export interface PackageList {
+  list: Package[];
+  total: number;
 }
-
-export async function fetchPackageOptions() {
-  return request("/v1/traffic/pool/getPackage", {}, "GET");
-}
-
-export async function addPackage(params: {
-  type: string; // 类型 1搜索 2选择用户 3文件上传
-  addPackageId?: number;
-  addStatus?: number;
-  deviceId?: string;
-  keyword?: string;
-  packageId?: number;
-  packageName?: number; // 添加的流量池名称
-  tableFile?: number;
-  taskId?: number; // 任务id j及场景获客id
-  userIds?: number[];
-  userValue?: number;
-}) {
-  return request("/v1/traffic/pool/addPackage", params, "POST");
+export async function getPackage(params: {
+  page: number;
+  pageSize: number;
+  keyword: string;
+}): Promise<PackageList> {
+  return request("/v1/traffic/pool/getPackage", params, "GET");
 }
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index 16d2abe7b..c805ba752 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -1,21 +1,52 @@
 import React, { useEffect, useState } from "react";
 import Layout from "@/components/Layout/Layout";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
-import { Input, Button, Pagination } from "antd";
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  PlusOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
+import { Input, Button, Pagination, Card, Tag } from "antd";
 import styles from "./index.module.scss";
-import { Empty, Avatar } from "antd-mobile";
+import { Empty } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
 import NavCommon from "@/components/NavCommon";
-import { fetchTrafficPoolList } from "./api";
-import type { TrafficPoolUser } from "./data";
-const defaultAvatar =
-  "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png";
+import { getPackage } from "./api";
+import type { Package, PackageList } from "./api";
+
+// 分组图标映射
+const getGroupIcon = (type: number, name?: string) => {
+  if (type === 0 && name) {
+    // type=0时使用分组名称首个字符
+    return name.charAt(0).toUpperCase();
+  }
+
+  const icons = {
+    1: "👥", // 高价值客户池
+    2: "📈", // 潜在客户池
+    3: "💬", // 高互动客户池
+    4: "⭐", // 自定义分组
+  };
+  return icons[type] || "👥";
+};
+
+// 分组颜色映射
+const getGroupColor = (type: number) => {
+  const colors = {
+    0: "#f0f0f0", // 灰色 - 自定义分组（使用名称首字符）
+    1: "#ff4d4f", // 红色
+    2: "#1890ff", // 蓝色
+    3: "#52c41a", // 绿色
+    4: "#722ed1", // 紫色
+  };
+  return colors[type] || "#1890ff";
+};
 
 const TrafficPoolList: React.FC = () => {
   const navigate = useNavigate();
 
   const [loading, setLoading] = useState(false);
-  const [list, setList] = useState<TrafficPoolUser[]>([]);
+  const [list, setList] = useState<Package[]>([]);
   const [page, setPage] = useState(1);
   const [pageSize] = useState(10);
   const [total, setTotal] = useState(0);
@@ -36,9 +67,9 @@ const TrafficPoolList: React.FC = () => {
           keyword: search,
         };
 
-        const res = await fetchTrafficPoolList(params);
-        setList(res.list || []);
-        setTotal(res.total || 0);
+        const res: PackageList = await getPackage(params);
+        setList(res?.list || []);
+        setTotal(res?.total || 0);
       } catch (error) {
         console.error("获取列表失败:", error);
       } finally {
@@ -54,11 +85,27 @@ const TrafficPoolList: React.FC = () => {
       loading={loading}
       header={
         <>
-          <NavCommon title="流量池用户列表" />
+          <NavCommon
+            title="流量池"
+            right={
+              <Button
+                type="primary"
+                size="small"
+                icon={<PlusOutlined />}
+                onClick={() => {
+                  // 新建分组逻辑
+                  console.log("新建分组");
+                }}
+              >
+                新建分组
+              </Button>
+            }
+          />
+
           <div className="search-bar">
             <div className="search-input-wrapper">
               <Input
-                placeholder="搜索用户"
+                placeholder="搜索分组"
                 value={search}
                 onChange={e => handleSearch(e.target.value)}
                 prefix={<SearchOutlined />}
@@ -89,48 +136,131 @@ const TrafficPoolList: React.FC = () => {
     >
       <div className={styles.listWrap}>
         {list.length === 0 && !loading ? (
-          <Empty description="暂无数据" />
+          <Empty description="暂无分组数据" />
         ) : (
           <div>
             {list.map(item => (
-              <div key={item.id} className={styles.cardWrap}>
-                <div
-                  className={styles.card}
-                  style={{ cursor: "pointer" }}
-                  onClick={() =>
-                    navigate(
-                      `/mine/traffic-pool/detail/${item.wechatId}/${item.id}`,
-                    )
-                  }
-                >
-                  <div className={styles.cardContent}>
-                    <Avatar
-                      src={item.avatar || defaultAvatar}
-                      style={{ "--size": "60px" }}
-                    />
-                    <div style={{ flex: 1 }}>
-                      <div className={styles.title}>
-                        {item.nickname || item.identifier}
+              <Card
+                key={item.id}
+                onClick={() => {
+                  // 进入分组管理
+                  navigate(`/mine/traffic-pool/group/${item.id}`);
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "flex-start" }}>
+                  {/* 分组图标 */}
+                  <div
+                    style={{
+                      width: "48px",
+                      height: "48px",
+                      borderRadius: "8px",
+                      background: getGroupColor(item.type),
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: item.type === 0 ? "18px" : "24px",
+                      fontWeight: item.type === 0 ? "bold" : "normal",
+                      color: item.type === 0 ? "#333" : "inherit",
+                      marginRight: "12px",
+                      flexShrink: 0,
+                    }}
+                  >
+                    {getGroupIcon(item.type, item.name)}
+                  </div>
+
+                  {/* 分组信息 */}
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div
+                      style={{
+                        fontSize: "16px",
+                        fontWeight: "bold",
+                        marginBottom: "4px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {item.name}
+                    </div>
+
+                    <div
+                      style={{
+                        fontSize: "12px",
+                        color: "#666",
+                        marginBottom: "8px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {item.description}
+                    </div>
+
+                    <div
+                      style={{
+                        fontSize: "14px",
+                        color: "#333",
+                        marginBottom: "4px",
+                      }}
+                    >
+                      {item.num}人
+                    </div>
+
+                    {/* RFM数据 */}
+                    {item.RFM > 0 ? (
+                      <div
+                        style={{
+                          fontSize: "12px",
+                          color: "#666",
+                          marginBottom: "4px",
+                        }}
+                      >
+                        RFM: {item.RFM} | R:{item.R} F:{item.F} M:{item.M}
                       </div>
-                      <div className={styles.desc}>
-                        微信号：{item.wechatId || "-"}
+                    ) : (
+                      <div
+                        style={{
+                          fontSize: "12px",
+                          color: "#999",
+                          marginBottom: "4px",
+                        }}
+                      >
+                        暂无RFM数据
                       </div>
-                      <div className={styles.desc}>
-                        来源：{item.fromd || "-"}
-                      </div>
-                      <div className={styles.desc}>
-                        分组：
-                        {item.packages && item.packages.length
-                          ? item.packages.join("，")
-                          : "-"}
-                      </div>
-                      <div className={styles.desc}>
-                        创建时间：{item.createTime}
+                    )}
+
+                    {/* 标签和创建时间 */}
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                      }}
+                    >
+                      <Tag
+                        color={item.type === 4 ? "purple" : "blue"}
+                        style={{ fontSize: "10px", padding: "2px 6px" }}
+                      >
+                        {item.type === 4 ? "自定义" : "系统分组"}
+                      </Tag>
+                      <div style={{ fontSize: "10px", color: "#999" }}>
+                        {item.createTime}
                       </div>
                     </div>
                   </div>
+
+                  {/* 右侧箭头 */}
+                  <div
+                    style={{
+                      marginLeft: "8px",
+                      color: "#ccc",
+                      fontSize: "16px",
+                    }}
+                  >
+                    <RightOutlined />
+                  </div>
                 </div>
-              </div>
+              </Card>
             ))}
           </div>
         )}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx
index c5c6306da..16d2abe7b 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx
@@ -1,29 +1,19 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Layout from "@/components/Layout/Layout";
-import {
-  SearchOutlined,
-  ReloadOutlined,
-  BarChartOutlined,
-} from "@ant-design/icons";
-import { Toast } from "antd-mobile";
-import { Input, Button, Checkbox, Pagination } from "antd";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button, Pagination } from "antd";
 import styles from "./index.module.scss";
 import { Empty, Avatar } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
 import NavCommon from "@/components/NavCommon";
-import { fetchTrafficPoolList, fetchScenarioOptions, addPackage } from "./api";
-import type { TrafficPoolUser, ScenarioOption } from "./data";
-import DataAnalysisPanel from "./DataAnalysisPanel";
-import FilterModal from "./FilterModal";
-import BatchAddModal from "./BatchAddModal";
-import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
+import { fetchTrafficPoolList } from "./api";
+import type { TrafficPoolUser } from "./data";
 const defaultAvatar =
   "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png";
 
 const TrafficPoolList: React.FC = () => {
   const navigate = useNavigate();
 
-  // 基础状态
   const [loading, setLoading] = useState(false);
   const [list, setList] = useState<TrafficPoolUser[]>([]);
   const [page, setPage] = useState(1);
@@ -31,251 +21,57 @@ const TrafficPoolList: React.FC = () => {
   const [total, setTotal] = useState(0);
   const [search, setSearch] = useState("");
 
-  // 筛选相关
-  const [showFilter, setShowFilter] = useState(false);
-  const [scenarioOptions, setScenarioOptions] = useState<ScenarioOption[]>([]);
+  const handleSearch = (value: string) => {
+    setSearch(value);
+    setPage(1);
+  };
 
-  // 公共筛选条件状态
-  const [filterParams, setFilterParams] = useState({
-    selectedDevices: [] as DeviceSelectionItem[],
-    packageId: 0,
-    scenarioId: 0,
-    userValue: 0,
-    userStatus: 0,
-  });
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const params = {
+          page,
+          pageSize,
+          keyword: search,
+        };
 
-  // 批量相关
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const [batchModal, setBatchModal] = useState(false);
-
-  // 数据分析
-  const [showStats, setShowStats] = useState(false);
-
-  // 获取列表
-  const getList = async (customParams?: any) => {
-    setLoading(true);
-    try {
-      const params: any = {
-        page,
-        pageSize,
-        keyword: search,
-        packageld: filterParams.packageId,
-        sceneId: filterParams.scenarioId,
-        userValue: filterParams.userValue,
-        addStatus: filterParams.userStatus,
-        deviceld: filterParams.selectedDevices.map(d => d.id).join(),
-        ...customParams, // 允许传入自定义参数覆盖
-      };
-
-      const res = await fetchTrafficPoolList(params);
-      setList(res.list || []);
-      setTotal(res.total || 0);
-    } catch (error) {
-      // 忽略请求过于频繁的错误，避免页面崩溃
-      if (error !== "请求过于频繁，请稍后再试") {
+        const res = await fetchTrafficPoolList(params);
+        setList(res.list || []);
+        setTotal(res.total || 0);
+      } catch (error) {
         console.error("获取列表失败:", error);
+      } finally {
+        setLoading(false);
       }
-    } finally {
-      setLoading(false);
-    }
-  };
+    };
 
-  // 获取筛选项
-  useEffect(() => {
-    fetchScenarioOptions().then(res => {
-      setScenarioOptions(res.list || []);
-    });
-  }, []);
-
-  // 全选/反选
-  const handleSelectAll = (checked: boolean) => {
-    if (checked) {
-      setSelectedIds(list.map(item => item.id));
-    } else {
-      setSelectedIds([]);
-    }
-  };
-
-  // 单选
-  const handleSelect = (id: number, checked: boolean) => {
-    setSelectedIds(prev =>
-      checked ? [...prev, id] : prev.filter(i => i !== id),
-    );
-  };
-
-  // 批量加入分组/流量池
-  const handleBatchAdd = async options => {
-    try {
-      // 构建请求参数
-      const params = {
-        type: "2", // 2选择用户
-        addPackageId: options.selectedPackageId, // 目标分组ID
-        userIds: selectedIds.map(id => id), // 选中的用户ID数组
-        // 如果有当前筛选条件，也可以传递
-        ...(filterParams.packageId && {
-          packageId: filterParams.packageId,
-        }),
-        ...(filterParams.scenarioId && {
-          taskId: filterParams.scenarioId,
-        }),
-        ...(filterParams.userValue && {
-          userValue: filterParams.userValue,
-        }),
-        ...(filterParams.userStatus && {
-          addStatus: filterParams.userStatus,
-        }),
-        ...(filterParams.selectedDevices.length > 0 && {
-          deviceId: filterParams.selectedDevices.map(d => d.id).join(","),
-        }),
-        ...(search && { keyword: search }),
-      };
-
-      console.log("批量加入请求参数:", params);
-
-      // 调用接口
-      const result = await addPackage(params);
-      console.log("批量加入结果:", result);
-
-      // 成功后刷新列表
-      getList();
-
-      // 关闭弹窗并清空选择
-      setBatchModal(false);
-      setSelectedIds([]);
-
-      // 可以添加成功提示
-      Toast.show({
-        content: `成功将用户加入分组`,
-        position: "top",
-      });
-    } catch (error) {
-      console.error("批量加入失败:", error);
-      // 可以添加错误提示
-      Toast.show({ content: "批量加入失败，请重试", position: "top" });
-    }
-  };
-
-  // 搜索防抖处理
-  const [searchInput, setSearchInput] = useState(search);
-
-  const debouncedSearch = useCallback(() => {
-    const timer = setTimeout(() => {
-      setSearch(searchInput);
-      // 搜索时重置到第一页并请求列表
-      setPage(1);
-      getList({ keyword: searchInput, page: 1 });
-    }, 500); // 500ms 防抖延迟
-
-    return () => clearTimeout(timer);
-  }, [searchInput]);
-
-  useEffect(() => {
-    const cleanup = debouncedSearch();
-    return cleanup;
-  }, [debouncedSearch]);
-
-  const handSearch = (value: string) => {
-    setSearchInput(value);
-    setSelectedIds([]);
-    debouncedSearch();
-  };
+    fetchData();
+  }, [page, pageSize, search]);
 
   return (
     <Layout
       loading={loading}
       header={
         <>
-          <NavCommon
-            title="流量池用户列表"
-            right={
-              <Button
-                onClick={() => setShowStats(s => !s)}
-                style={{ marginLeft: 8 }}
-              >
-                <BarChartOutlined /> {showStats ? "收起分析" : "数据分析"}
-              </Button>
-            }
-          />
-          {/* 搜索栏 */}
+          <NavCommon title="流量池用户列表" />
           <div className="search-bar">
             <div className="search-input-wrapper">
               <Input
-                placeholder="搜索计划名称"
-                value={searchInput}
-                onChange={e => handSearch(e.target.value)}
+                placeholder="搜索用户"
+                value={search}
+                onChange={e => handleSearch(e.target.value)}
                 prefix={<SearchOutlined />}
                 allowClear
                 size="large"
               />
             </div>
             <Button
-              onClick={() => getList()}
+              onClick={() => setPage(1)}
               loading={loading}
               size="large"
               icon={<ReloadOutlined />}
-            ></Button>
-          </div>
-          {/* 数据分析面板 */}
-          <DataAnalysisPanel
-            showStats={showStats}
-            setShowStats={setShowStats}
-            onConfirm={statsData => {
-              // 可以在这里处理统计数据，比如更新本地状态或发送到父组件
-              console.log("收到统计数据:", statsData);
-            }}
-          />
-
-          {/* 批量操作栏 */}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              padding: "8px 12px 8px 26px",
-              background: "#fff",
-              borderBottom: "1px solid #f0f0f0",
-            }}
-          >
-            <Checkbox
-              checked={selectedIds.length === list.length && list.length > 0}
-              onChange={e => handleSelectAll(e.target.checked)}
-              style={{ marginRight: 8 }}
             />
-            <span>全选</span>
-            {selectedIds.length > 0 && (
-              <>
-                <span
-                  style={{ marginLeft: 16, color: "#1677ff" }}
-                >{`已选${selectedIds.length}项`}</span>
-                <Button
-                  size="small"
-                  color="primary"
-                  style={{ marginLeft: 16 }}
-                  onClick={() => setBatchModal(true)}
-                >
-                  批量加入分组
-                </Button>
-              </>
-            )}
-            {searchInput.length > 0 && (
-              <>
-                <Button
-                  size="small"
-                  type="primary"
-                  style={{ marginLeft: 16 }}
-                  onClick={() => setBatchModal(true)}
-                >
-                  导入当前搜索结果
-                </Button>
-              </>
-            )}
-            <div style={{ flex: 1 }} />
-            <Button
-              size="small"
-              style={{ marginLeft: 8 }}
-              onClick={() => setShowFilter(true)}
-            >
-              筛选
-            </Button>
           </div>
         </>
       }
@@ -283,56 +79,14 @@ const TrafficPoolList: React.FC = () => {
         <div className="pagination-container">
           <Pagination
             current={page}
-            pageSize={20}
+            pageSize={pageSize}
             total={total}
             showSizeChanger={false}
-            onChange={newPage => {
-              setPage(newPage);
-              getList({ page: newPage });
-            }}
+            onChange={setPage}
           />
         </div>
       }
     >
-      {/* 批量加入分组弹窗 */}
-      <BatchAddModal
-        visible={batchModal}
-        onClose={() => setBatchModal(false)}
-        selectedCount={selectedIds.length}
-        onConfirm={data => {
-          // 处理批量加入逻辑
-          handleBatchAdd(data);
-        }}
-      />
-      {/* 筛选弹窗 */}
-      <FilterModal
-        visible={showFilter}
-        onClose={() => setShowFilter(false)}
-        onConfirm={filters => {
-          // 更新公共筛选条件状态
-          const newFilterParams = {
-            selectedDevices: filters.selectedDevices,
-            packageId: filters.packageld,
-            scenarioId: filters.sceneId,
-            userValue: filters.userValue,
-            userStatus: filters.addStatus,
-          };
-
-          setFilterParams(newFilterParams);
-          // 重置到第一页并请求列表
-          setPage(1);
-          getList({
-            page: 1,
-            packageld: newFilterParams.packageId,
-            sceneId: newFilterParams.scenarioId,
-            userValue: newFilterParams.userValue,
-            addStatus: newFilterParams.userStatus,
-            deviceld: newFilterParams.selectedDevices.map(d => d.id).join(),
-          });
-        }}
-        scenarioOptions={scenarioOptions}
-        initialFilters={filterParams}
-      />
       <div className={styles.listWrap}>
         {list.length === 0 && !loading ? (
           <Empty description="暂无数据" />
@@ -350,13 +104,6 @@ const TrafficPoolList: React.FC = () => {
                   }
                 >
                   <div className={styles.cardContent}>
-                    <Checkbox
-                      checked={selectedIds.includes(item.id)}
-                      onChange={e => handleSelect(item.id, e.target.checked)}
-                      style={{ marginRight: 8 }}
-                      onClick={e => e.stopPropagation()}
-                      className={styles.checkbox}
-                    />
                     <Avatar
                       src={item.avatar || defaultAvatar}
                       style={{ "--size": "60px" }}
@@ -364,7 +111,6 @@ const TrafficPoolList: React.FC = () => {
                     <div style={{ flex: 1 }}>
                       <div className={styles.title}>
                         {item.nickname || item.identifier}
-                        {/* 性别icon可自行封装 */}
                       </div>
                       <div className={styles.desc}>
                         微信号：{item.wechatId || "-"}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/BatchAddModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/BatchAddModal.tsx
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/BatchAddModal.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/BatchAddModal.tsx
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/DataAnalysisPanel.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/DataAnalysisPanel.tsx
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/DataAnalysisPanel.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/DataAnalysisPanel.tsx
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/FilterModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/FilterModal.tsx
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/FilterModal.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/FilterModal.tsx
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/api.ts
new file mode 100644
index 000000000..9b53c030a
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/api.ts
@@ -0,0 +1,34 @@
+import request from "@/api/request";
+
+// 获取流量池列表
+export function fetchTrafficPoolList(params: {
+  page?: number;
+  pageSize?: number;
+  keyword?: string;
+}) {
+  return request("/v1/traffic/pool", params, "GET");
+}
+
+export async function fetchScenarioOptions() {
+  return request("/v1/plan/scenes", {}, "GET");
+}
+
+export async function fetchPackageOptions() {
+  return request("/v1/traffic/pool/getPackage", {}, "GET");
+}
+
+export async function addPackage(params: {
+  type: string; // 类型 1搜索 2选择用户 3文件上传
+  addPackageId?: number;
+  addStatus?: number;
+  deviceId?: string;
+  keyword?: string;
+  packageId?: number;
+  packageName?: number; // 添加的流量池名称
+  tableFile?: number;
+  taskId?: number; // 任务id j及场景获客id
+  userIds?: number[];
+  userValue?: number;
+}) {
+  return request("/v1/traffic/pool/addPackage", params, "POST");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/data.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/data.ts
new file mode 100644
index 000000000..65ad7f559
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/data.ts
@@ -0,0 +1,51 @@
+// 流量池用户类型
+export interface TrafficPoolUser {
+  id: number;
+  identifier: string;
+  mobile: string;
+  wechatId: string;
+  fromd: string;
+  status: number;
+  createTime: string;
+  companyId: number;
+  sourceId: string;
+  type: number;
+  nickname: string;
+  avatar: string;
+  gender: number;
+  phone: string;
+  packages: string[];
+  tags: string[];
+}
+
+// 列表响应类型
+export interface TrafficPoolUserListResponse {
+  list: TrafficPoolUser[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+// 设备类型
+export interface DeviceOption {
+  id: string;
+  name: string;
+}
+
+// 分组类型
+export interface PackageOption {
+  id: string;
+  name: string;
+}
+
+// 用户价值类型
+export type ValueLevel = "all" | "high" | "medium" | "low";
+
+// 状态类型
+export type UserStatus = "all" | "added" | "pending" | "failed" | "duplicate";
+
+// 获客场景类型
+export interface ScenarioOption {
+  id: string;
+  name: string;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.module.scss
new file mode 100644
index 000000000..2fbee5e38
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.module.scss
@@ -0,0 +1,65 @@
+.listWrap {
+  padding: 12px;
+}
+
+.cardContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+}
+.checkbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.cardWrap {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  margin-bottom: 12px;
+}
+
+.card {
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+}
+
+.desc {
+  font-size: 13px;
+  color: #888;
+  margin: 6px 0 4px 0;
+}
+
+.count {
+  font-size: 13px;
+  color: #1677ff;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.pagination button {
+  background: #f5f5f5;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 12px;
+  color: #1677ff;
+  cursor: pointer;
+}
+
+.pagination button:disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.tsx
new file mode 100644
index 000000000..c5c6306da
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList1/index.tsx
@@ -0,0 +1,396 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Layout from "@/components/Layout/Layout";
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  BarChartOutlined,
+} from "@ant-design/icons";
+import { Toast } from "antd-mobile";
+import { Input, Button, Checkbox, Pagination } from "antd";
+import styles from "./index.module.scss";
+import { Empty, Avatar } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+import NavCommon from "@/components/NavCommon";
+import { fetchTrafficPoolList, fetchScenarioOptions, addPackage } from "./api";
+import type { TrafficPoolUser, ScenarioOption } from "./data";
+import DataAnalysisPanel from "./DataAnalysisPanel";
+import FilterModal from "./FilterModal";
+import BatchAddModal from "./BatchAddModal";
+import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
+const defaultAvatar =
+  "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png";
+
+const TrafficPoolList: React.FC = () => {
+  const navigate = useNavigate();
+
+  // 基础状态
+  const [loading, setLoading] = useState(false);
+  const [list, setList] = useState<TrafficPoolUser[]>([]);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [search, setSearch] = useState("");
+
+  // 筛选相关
+  const [showFilter, setShowFilter] = useState(false);
+  const [scenarioOptions, setScenarioOptions] = useState<ScenarioOption[]>([]);
+
+  // 公共筛选条件状态
+  const [filterParams, setFilterParams] = useState({
+    selectedDevices: [] as DeviceSelectionItem[],
+    packageId: 0,
+    scenarioId: 0,
+    userValue: 0,
+    userStatus: 0,
+  });
+
+  // 批量相关
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [batchModal, setBatchModal] = useState(false);
+
+  // 数据分析
+  const [showStats, setShowStats] = useState(false);
+
+  // 获取列表
+  const getList = async (customParams?: any) => {
+    setLoading(true);
+    try {
+      const params: any = {
+        page,
+        pageSize,
+        keyword: search,
+        packageld: filterParams.packageId,
+        sceneId: filterParams.scenarioId,
+        userValue: filterParams.userValue,
+        addStatus: filterParams.userStatus,
+        deviceld: filterParams.selectedDevices.map(d => d.id).join(),
+        ...customParams, // 允许传入自定义参数覆盖
+      };
+
+      const res = await fetchTrafficPoolList(params);
+      setList(res.list || []);
+      setTotal(res.total || 0);
+    } catch (error) {
+      // 忽略请求过于频繁的错误，避免页面崩溃
+      if (error !== "请求过于频繁，请稍后再试") {
+        console.error("获取列表失败:", error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 获取筛选项
+  useEffect(() => {
+    fetchScenarioOptions().then(res => {
+      setScenarioOptions(res.list || []);
+    });
+  }, []);
+
+  // 全选/反选
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(list.map(item => item.id));
+    } else {
+      setSelectedIds([]);
+    }
+  };
+
+  // 单选
+  const handleSelect = (id: number, checked: boolean) => {
+    setSelectedIds(prev =>
+      checked ? [...prev, id] : prev.filter(i => i !== id),
+    );
+  };
+
+  // 批量加入分组/流量池
+  const handleBatchAdd = async options => {
+    try {
+      // 构建请求参数
+      const params = {
+        type: "2", // 2选择用户
+        addPackageId: options.selectedPackageId, // 目标分组ID
+        userIds: selectedIds.map(id => id), // 选中的用户ID数组
+        // 如果有当前筛选条件，也可以传递
+        ...(filterParams.packageId && {
+          packageId: filterParams.packageId,
+        }),
+        ...(filterParams.scenarioId && {
+          taskId: filterParams.scenarioId,
+        }),
+        ...(filterParams.userValue && {
+          userValue: filterParams.userValue,
+        }),
+        ...(filterParams.userStatus && {
+          addStatus: filterParams.userStatus,
+        }),
+        ...(filterParams.selectedDevices.length > 0 && {
+          deviceId: filterParams.selectedDevices.map(d => d.id).join(","),
+        }),
+        ...(search && { keyword: search }),
+      };
+
+      console.log("批量加入请求参数:", params);
+
+      // 调用接口
+      const result = await addPackage(params);
+      console.log("批量加入结果:", result);
+
+      // 成功后刷新列表
+      getList();
+
+      // 关闭弹窗并清空选择
+      setBatchModal(false);
+      setSelectedIds([]);
+
+      // 可以添加成功提示
+      Toast.show({
+        content: `成功将用户加入分组`,
+        position: "top",
+      });
+    } catch (error) {
+      console.error("批量加入失败:", error);
+      // 可以添加错误提示
+      Toast.show({ content: "批量加入失败，请重试", position: "top" });
+    }
+  };
+
+  // 搜索防抖处理
+  const [searchInput, setSearchInput] = useState(search);
+
+  const debouncedSearch = useCallback(() => {
+    const timer = setTimeout(() => {
+      setSearch(searchInput);
+      // 搜索时重置到第一页并请求列表
+      setPage(1);
+      getList({ keyword: searchInput, page: 1 });
+    }, 500); // 500ms 防抖延迟
+
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
+  useEffect(() => {
+    const cleanup = debouncedSearch();
+    return cleanup;
+  }, [debouncedSearch]);
+
+  const handSearch = (value: string) => {
+    setSearchInput(value);
+    setSelectedIds([]);
+    debouncedSearch();
+  };
+
+  return (
+    <Layout
+      loading={loading}
+      header={
+        <>
+          <NavCommon
+            title="流量池用户列表"
+            right={
+              <Button
+                onClick={() => setShowStats(s => !s)}
+                style={{ marginLeft: 8 }}
+              >
+                <BarChartOutlined /> {showStats ? "收起分析" : "数据分析"}
+              </Button>
+            }
+          />
+          {/* 搜索栏 */}
+          <div className="search-bar">
+            <div className="search-input-wrapper">
+              <Input
+                placeholder="搜索计划名称"
+                value={searchInput}
+                onChange={e => handSearch(e.target.value)}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
+              />
+            </div>
+            <Button
+              onClick={() => getList()}
+              loading={loading}
+              size="large"
+              icon={<ReloadOutlined />}
+            ></Button>
+          </div>
+          {/* 数据分析面板 */}
+          <DataAnalysisPanel
+            showStats={showStats}
+            setShowStats={setShowStats}
+            onConfirm={statsData => {
+              // 可以在这里处理统计数据，比如更新本地状态或发送到父组件
+              console.log("收到统计数据:", statsData);
+            }}
+          />
+
+          {/* 批量操作栏 */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              padding: "8px 12px 8px 26px",
+              background: "#fff",
+              borderBottom: "1px solid #f0f0f0",
+            }}
+          >
+            <Checkbox
+              checked={selectedIds.length === list.length && list.length > 0}
+              onChange={e => handleSelectAll(e.target.checked)}
+              style={{ marginRight: 8 }}
+            />
+            <span>全选</span>
+            {selectedIds.length > 0 && (
+              <>
+                <span
+                  style={{ marginLeft: 16, color: "#1677ff" }}
+                >{`已选${selectedIds.length}项`}</span>
+                <Button
+                  size="small"
+                  color="primary"
+                  style={{ marginLeft: 16 }}
+                  onClick={() => setBatchModal(true)}
+                >
+                  批量加入分组
+                </Button>
+              </>
+            )}
+            {searchInput.length > 0 && (
+              <>
+                <Button
+                  size="small"
+                  type="primary"
+                  style={{ marginLeft: 16 }}
+                  onClick={() => setBatchModal(true)}
+                >
+                  导入当前搜索结果
+                </Button>
+              </>
+            )}
+            <div style={{ flex: 1 }} />
+            <Button
+              size="small"
+              style={{ marginLeft: 8 }}
+              onClick={() => setShowFilter(true)}
+            >
+              筛选
+            </Button>
+          </div>
+        </>
+      }
+      footer={
+        <div className="pagination-container">
+          <Pagination
+            current={page}
+            pageSize={20}
+            total={total}
+            showSizeChanger={false}
+            onChange={newPage => {
+              setPage(newPage);
+              getList({ page: newPage });
+            }}
+          />
+        </div>
+      }
+    >
+      {/* 批量加入分组弹窗 */}
+      <BatchAddModal
+        visible={batchModal}
+        onClose={() => setBatchModal(false)}
+        selectedCount={selectedIds.length}
+        onConfirm={data => {
+          // 处理批量加入逻辑
+          handleBatchAdd(data);
+        }}
+      />
+      {/* 筛选弹窗 */}
+      <FilterModal
+        visible={showFilter}
+        onClose={() => setShowFilter(false)}
+        onConfirm={filters => {
+          // 更新公共筛选条件状态
+          const newFilterParams = {
+            selectedDevices: filters.selectedDevices,
+            packageId: filters.packageld,
+            scenarioId: filters.sceneId,
+            userValue: filters.userValue,
+            userStatus: filters.addStatus,
+          };
+
+          setFilterParams(newFilterParams);
+          // 重置到第一页并请求列表
+          setPage(1);
+          getList({
+            page: 1,
+            packageld: newFilterParams.packageId,
+            sceneId: newFilterParams.scenarioId,
+            userValue: newFilterParams.userValue,
+            addStatus: newFilterParams.userStatus,
+            deviceld: newFilterParams.selectedDevices.map(d => d.id).join(),
+          });
+        }}
+        scenarioOptions={scenarioOptions}
+        initialFilters={filterParams}
+      />
+      <div className={styles.listWrap}>
+        {list.length === 0 && !loading ? (
+          <Empty description="暂无数据" />
+        ) : (
+          <div>
+            {list.map(item => (
+              <div key={item.id} className={styles.cardWrap}>
+                <div
+                  className={styles.card}
+                  style={{ cursor: "pointer" }}
+                  onClick={() =>
+                    navigate(
+                      `/mine/traffic-pool/detail/${item.wechatId}/${item.id}`,
+                    )
+                  }
+                >
+                  <div className={styles.cardContent}>
+                    <Checkbox
+                      checked={selectedIds.includes(item.id)}
+                      onChange={e => handleSelect(item.id, e.target.checked)}
+                      style={{ marginRight: 8 }}
+                      onClick={e => e.stopPropagation()}
+                      className={styles.checkbox}
+                    />
+                    <Avatar
+                      src={item.avatar || defaultAvatar}
+                      style={{ "--size": "60px" }}
+                    />
+                    <div style={{ flex: 1 }}>
+                      <div className={styles.title}>
+                        {item.nickname || item.identifier}
+                        {/* 性别icon可自行封装 */}
+                      </div>
+                      <div className={styles.desc}>
+                        微信号：{item.wechatId || "-"}
+                      </div>
+                      <div className={styles.desc}>
+                        来源：{item.fromd || "-"}
+                      </div>
+                      <div className={styles.desc}>
+                        分组：
+                        {item.packages && item.packages.length
+                          ? item.packages.join("，")
+                          : "-"}
+                      </div>
+                      <div className={styles.desc}>
+                        创建时间：{item.createTime}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+};
+
+export default TrafficPoolList;
diff --git a/Cunkebao/src/router/module/mine.tsx b/Cunkebao/src/router/module/mine.tsx
index e7038ddde..b0d6f6e21 100644
--- a/Cunkebao/src/router/module/mine.tsx
+++ b/Cunkebao/src/router/module/mine.tsx
@@ -2,7 +2,7 @@ import Mine from "@/pages/mobile/mine/main/index";
 import Devices from "@/pages/mobile/mine/devices/index";
 import DeviceDetail from "@/pages/mobile/mine/devices/DeviceDetail";
 import TrafficPool from "@/pages/mobile/mine/traffic-pool/list/index";
-import TrafficPoolList from "@/pages/mobile/mine/traffic-pool/poolList/index";
+import TrafficPoolList from "@/pages/mobile/mine/traffic-pool/poolList1/index";
 import TrafficPoolDetail from "@/pages/mobile/mine/traffic-pool/detail/index";
 import WechatAccounts from "@/pages/mobile/mine/wechat-accounts/list/index";
 import WechatAccountDetail from "@/pages/mobile/mine/wechat-accounts/detail/index";

From fc5ae31b2b203ec98adbe0b39b76c9107e7b5835 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: Thu, 16 Oct 2025 14:11:26 +0800
Subject: [PATCH 03/19] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=EF=BC=9A=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E6=8F=90=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=EF=BC=9B?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=8F=AF=E7=BB=B4=E6=8A=A4=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mine/traffic-pool/list/index.module.scss  | 182 ++++++++++++++----
 .../mobile/mine/traffic-pool/list/index.tsx   | 177 +++++++----------
 2 files changed, 217 insertions(+), 142 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
index 2fbee5e38..c0ff2a620 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
@@ -1,65 +1,175 @@
 .listWrap {
   padding: 12px;
+  background: #f5f5f5;
 }
 
-.cardContent {
+/* 美团风格卡片样式 */
+.cardCompact {
+  margin: 0 0 12px 0;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  background: #fff;
+}
+
+.cardBody {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+/* 左侧图片区域 */
+.imageBox {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
-  gap: 12px;
+  justify-content: center;
+  flex-shrink: 0;
   position: relative;
-}
-.checkbox {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.cardWrap {
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  margin-bottom: 12px;
+  overflow: hidden;
 }
 
-.card {
-  margin-bottom: 12px;
+/* 右侧内容区域 */
+.contentArea {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 标题行 */
+.titleRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
 }
 
 .title {
   font-size: 16px;
   font-weight: 600;
-  color: #222;
+  color: #1a1a1a;
+  line-height: 1.3;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.desc {
-  font-size: 13px;
-  color: #888;
-  margin: 6px 0 4px 0;
+/* 右侧标签区域 */
+.rightTags {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
 }
 
-.count {
-  font-size: 13px;
-  color: #1677ff;
+.deliveryTag {
+  background: #fff7e6;
+  color: #d46b08;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid #ffd591;
 }
 
-.pagination {
+.timeTag {
+  color: #ff6b35;
+  font-size: 11px;
+  font-weight: 500;
   display: flex;
   align-items: center;
+  gap: 2px;
+}
+
+/* 评分和销售信息 */
+.ratingRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+}
+
+.rating {
+  color: #ff6b35;
+  font-weight: 600;
+}
+
+.sales {
+  color: #8c8c8c;
+}
+
+.price {
+  color: #8c8c8c;
+}
+
+/* 配送信息 */
+.deliveryInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 11px;
+  color: #8c8c8c;
+}
+
+/* 中间标签 */
+.middleTag {
+  display: flex;
   justify-content: center;
-  gap: 16px;
-  margin: 16px 0;
+  margin: 4px 0;
 }
 
-.pagination button {
-  background: #f5f5f5;
-  border: none;
+.highScoreTag {
+  background: linear-gradient(135deg, #ff6b35, #ff8c42);
+  color: white;
+  font-size: 10px;
+  padding: 4px 8px;
   border-radius: 4px;
-  padding: 4px 12px;
-  color: #1677ff;
-  cursor: pointer;
+  font-weight: 500;
 }
 
-.pagination button:disabled {
-  color: #ccc;
-  cursor: not-allowed;
+/* 底部按钮区域 */
+.bottomActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.dineInBtn {
+  background: transparent;
+  border: 1px solid #52c41a;
+  color: #52c41a;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.couponBtn {
+  background: linear-gradient(135deg, #ff6b35, #ff8c42);
+  color: white;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+  justify-content: center;
+}
+
+.couponText {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-left: 4px;
 }
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index c805ba752..2ed29bfad 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -4,9 +4,8 @@ import {
   SearchOutlined,
   ReloadOutlined,
   PlusOutlined,
-  RightOutlined,
 } from "@ant-design/icons";
-import { Input, Button, Pagination, Card, Tag } from "antd";
+import { Input, Button, Pagination, Card } from "antd";
 import styles from "./index.module.scss";
 import { Empty } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
@@ -57,6 +56,31 @@ const TrafficPoolList: React.FC = () => {
     setPage(1);
   };
 
+  const handleRefresh = () => {
+    setPage(1);
+    // 触发数据重新获取
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const params = {
+          page: 1,
+          pageSize,
+          keyword: search,
+        };
+
+        const res: PackageList = await getPackage(params);
+        setList(res?.list || []);
+        setTotal(res?.total || 0);
+      } catch (error) {
+        console.error("获取列表失败:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
@@ -114,7 +138,7 @@ const TrafficPoolList: React.FC = () => {
               />
             </div>
             <Button
-              onClick={() => setPage(1)}
+              onClick={handleRefresh}
               loading={loading}
               size="large"
               icon={<ReloadOutlined />}
@@ -140,127 +164,68 @@ const TrafficPoolList: React.FC = () => {
         ) : (
           <div>
             {list.map(item => (
-              <Card
+              <div
                 key={item.id}
+                className={styles.cardCompact}
                 onClick={() => {
-                  // 进入分组管理
                   navigate(`/mine/traffic-pool/group/${item.id}`);
                 }}
               >
-                <div style={{ display: "flex", alignItems: "flex-start" }}>
-                  {/* 分组图标 */}
+                <div className={styles.cardBody}>
+                  {/* 左侧图片区域（优先展示 pic，缺省时使用假头像） */}
                   <div
-                    style={{
-                      width: "48px",
-                      height: "48px",
-                      borderRadius: "8px",
-                      background: getGroupColor(item.type),
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: item.type === 0 ? "18px" : "24px",
-                      fontWeight: item.type === 0 ? "bold" : "normal",
-                      color: item.type === 0 ? "#333" : "inherit",
-                      marginRight: "12px",
-                      flexShrink: 0,
-                    }}
+                    className={styles.imageBox}
+                    style={{ background: getGroupColor(item.type) }}
                   >
-                    {getGroupIcon(item.type, item.name)}
-                  </div>
-
-                  {/* 分组信息 */}
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div
-                      style={{
-                        fontSize: "16px",
-                        fontWeight: "bold",
-                        marginBottom: "4px",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      {item.name}
-                    </div>
-
-                    <div
-                      style={{
-                        fontSize: "12px",
-                        color: "#666",
-                        marginBottom: "8px",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      {item.description}
-                    </div>
-
-                    <div
-                      style={{
-                        fontSize: "14px",
-                        color: "#333",
-                        marginBottom: "4px",
-                      }}
-                    >
-                      {item.num}人
-                    </div>
-
-                    {/* RFM数据 */}
-                    {item.RFM > 0 ? (
-                      <div
+                    {item.pic ? (
+                      <img
+                        src={item.pic}
+                        alt={item.name}
                         style={{
-                          fontSize: "12px",
-                          color: "#666",
-                          marginBottom: "4px",
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
                         }}
-                      >
-                        RFM: {item.RFM} | R:{item.R} F:{item.F} M:{item.M}
-                      </div>
+                      />
                     ) : (
-                      <div
+                      <span
                         style={{
-                          fontSize: "12px",
-                          color: "#999",
-                          marginBottom: "4px",
+                          fontSize: 24,
+                          fontWeight: "bold",
+                          color: "#333",
                         }}
                       >
-                        暂无RFM数据
-                      </div>
+                        {getGroupIcon(item.type, item.name)}
+                      </span>
                     )}
-
-                    {/* 标签和创建时间 */}
-                    <div
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                      }}
-                    >
-                      <Tag
-                        color={item.type === 4 ? "purple" : "blue"}
-                        style={{ fontSize: "10px", padding: "2px 6px" }}
-                      >
-                        {item.type === 4 ? "自定义" : "系统分组"}
-                      </Tag>
-                      <div style={{ fontSize: "10px", color: "#999" }}>
-                        {item.createTime}
-                      </div>
-                    </div>
                   </div>
 
-                  {/* 右侧箭头 */}
-                  <div
-                    style={{
-                      marginLeft: "8px",
-                      color: "#ccc",
-                      fontSize: "16px",
-                    }}
-                  >
-                    <RightOutlined />
+                  {/* 右侧仅展示选中字段 */}
+                  <div className={styles.contentArea}>
+                    {/* 标题与人数 */}
+                    <div className={styles.titleRow}>
+                      <div className={styles.title}>{item.name}</div>
+                      <div className={styles.timeTag}>共{item.num}人</div>
+                    </div>
+
+                    {/* RFM 汇总 */}
+                    <div className={styles.ratingRow}>
+                      <span className={styles.rating}>RFM：{item.RFM}</span>
+                      <span className={styles.sales}>
+                        R：{item.R} F：{item.F} M：{item.M}
+                      </span>
+                    </div>
+
+                    {/* 类型与创建时间 */}
+                    <div className={styles.deliveryInfo}>
+                      <span>
+                        类型: {item.type === 0 ? "自定义" : "系统分组"}
+                      </span>
+                      <span>创建:{item.createTime}</span>
+                    </div>
                   </div>
                 </div>
-              </Card>
+              </div>
             ))}
           </div>
         )}

From 3230bbe2e585b65f2c23553f14057ae39ad91cf2 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: Thu, 16 Oct 2025 14:13:36 +0800
Subject: [PATCH 04/19] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E6=A8=A1=E5=9D=97=EF=BC=9A=E6=9B=B4=E6=96=B0=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E9=85=8D=E7=BD=AE=EF=BC=8C=E7=A7=BB=E9=99=A4=E6=B5=81?=
 =?UTF-8?q?=E9=87=8F=E6=B1=A0=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6=E5=8F=8A?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3API=E5=92=8C=E6=A0=B7=E5=BC=8F=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E6=8F=90=E5=8D=87=E5=8F=AF=E7=BB=B4=E6=8A=A4?=
 =?UTF-8?q?=E6=80=A7=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/mine/traffic-pool/{poolList => info}/api.ts |  0
 .../mine/traffic-pool/{poolList => info}/data.ts       |  0
 .../traffic-pool/{poolList => info}/index.module.scss  |  0
 .../mine/traffic-pool/{poolList => info}/index.tsx     |  0
 .../src/pages/mobile/mine/traffic-pool/list/index.tsx  |  2 +-
 .../plan/list/components/AccountListModal.tsx          | 10 +++++++++-
 Cunkebao/src/router/module/mine.tsx                    | 10 +++++++---
 7 files changed, 17 insertions(+), 5 deletions(-)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{poolList => info}/api.ts (100%)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{poolList => info}/data.ts (100%)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{poolList => info}/index.module.scss (100%)
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{poolList => info}/index.tsx (100%)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/info/api.ts
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/api.ts
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/info/api.ts
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/data.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/info/data.ts
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/data.ts
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/info/data.ts
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.module.scss
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.module.scss
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.module.scss
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.tsx
similarity index 100%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/poolList/index.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.tsx
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index 2ed29bfad..a4b5af1d0 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -168,7 +168,7 @@ const TrafficPoolList: React.FC = () => {
                 key={item.id}
                 className={styles.cardCompact}
                 onClick={() => {
-                  navigate(`/mine/traffic-pool/group/${item.id}`);
+                  navigate(`/mine/traffic-pool/info/${item.id}`);
                 }}
               >
                 <div className={styles.cardBody}>
diff --git a/Cunkebao/src/pages/mobile/scenarios/plan/list/components/AccountListModal.tsx b/Cunkebao/src/pages/mobile/scenarios/plan/list/components/AccountListModal.tsx
index 7d16ad61b..0f4217c19 100644
--- a/Cunkebao/src/pages/mobile/scenarios/plan/list/components/AccountListModal.tsx
+++ b/Cunkebao/src/pages/mobile/scenarios/plan/list/components/AccountListModal.tsx
@@ -18,6 +18,7 @@ interface AccountItem {
     wechatId: string;
   };
   phone?: string;
+  fail_reason: string;
 }
 
 interface AccountListModalProps {
@@ -153,11 +154,18 @@ const AccountListModal: React.FC<AccountListModalProps> = ({
                   <div className={style.accountWechatId}>
                     {account.userinfo.wechatId || "未绑定微信号"}
                   </div>
+                  {account.fail_reason && (
+                    <div style={{ fontSize: 12, color: "red", marginTop: 4 }}>
+                      原因：{account.fail_reason}
+                    </div>
+                  )}
                 </div>
                 <div className={style.accountStatus}>
                   <span
                     className={style.statusDot}
-                    style={{ backgroundColor: getStatusColor(account.status) }}
+                    style={{
+                      backgroundColor: getStatusColor(account.status),
+                    }}
                   />
                   <span className={style.statusText}>
                     {getStatusText(Number(account.status))}
diff --git a/Cunkebao/src/router/module/mine.tsx b/Cunkebao/src/router/module/mine.tsx
index b0d6f6e21..bc53e19d0 100644
--- a/Cunkebao/src/router/module/mine.tsx
+++ b/Cunkebao/src/router/module/mine.tsx
@@ -2,7 +2,7 @@ import Mine from "@/pages/mobile/mine/main/index";
 import Devices from "@/pages/mobile/mine/devices/index";
 import DeviceDetail from "@/pages/mobile/mine/devices/DeviceDetail";
 import TrafficPool from "@/pages/mobile/mine/traffic-pool/list/index";
-import TrafficPoolList from "@/pages/mobile/mine/traffic-pool/poolList1/index";
+import TrafficPoolItem from "@/pages/mobile/mine/traffic-pool/info/index";
 import TrafficPoolDetail from "@/pages/mobile/mine/traffic-pool/detail/index";
 import WechatAccounts from "@/pages/mobile/mine/wechat-accounts/list/index";
 import WechatAccountDetail from "@/pages/mobile/mine/wechat-accounts/detail/index";
@@ -30,21 +30,25 @@ const routes = [
     element: <DeviceDetail />,
     auth: true,
   },
+  //流量池列表页面
   {
     path: "/mine/traffic-pool",
     element: <TrafficPool />,
     auth: true,
   },
+  //流量池详情页面
   {
-    path: "/mine/traffic-pool/list",
-    element: <TrafficPoolList />,
+    path: "/mine/traffic-pool/info/:id",
+    element: <TrafficPoolItem />,
     auth: true,
   },
+  //流量池列表详情页面
   {
     path: "/mine/traffic-pool/detail/:wxid/:userId",
     element: <TrafficPoolDetail />,
     auth: true,
   },
+
   // 微信号管理路由
   {
     path: "/wechat-accounts",

From fbb78ebd509fe4f83a6dc47c27a82dfef7fe2f19 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, 17 Oct 2025 18:18:17 +0800
Subject: [PATCH 05/19] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E8=AF=A6=E6=83=85=E5=8F=8A=E7=9B=B8=E5=85=B3=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=9A=E5=88=A0=E9=99=A4=E6=B5=81=E9=87=8F=E6=B1=A0?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E3=80=81API=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=B1=BB=E5=9E=8B=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=EF=BC=8C=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E6=8F=90=E5=8D=87=E5=8F=AF=E7=BB=B4?=
 =?UTF-8?q?=E6=8A=A4=E6=80=A7=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/mine/traffic-pool/detail/api.ts    |  25 -
 .../mobile/mine/traffic-pool/detail/data.ts   | 133 ---
 .../traffic-pool/detail/index.module.scss     | 426 ----------
 .../mobile/mine/traffic-pool/detail/index.tsx | 795 ------------------
 .../mobile/mine/traffic-pool/form/README.md   | 101 +++
 .../mobile/mine/traffic-pool/form/api.ts      |  75 ++
 .../components/AudienceFilter.module.scss     | 121 +++
 .../form/components/AudienceFilter.tsx        | 209 +++++
 .../form/components/BasicInfo.module.scss     |  60 ++
 .../form/components/BasicInfo.tsx             |  65 ++
 .../form/components/ConditionList.module.scss |  52 ++
 .../form/components/ConditionList.tsx         |  67 ++
 .../CustomConditionModal.module.scss          |  80 ++
 .../form/components/CustomConditionModal.tsx  | 242 ++++++
 .../SchemeRecommendation.module.scss          |  92 ++
 .../form/components/SchemeRecommendation.tsx  | 201 +++++
 .../components/UserListPreview.module.scss    | 126 +++
 .../form/components/UserListPreview.tsx       | 155 ++++
 .../mine/traffic-pool/form/index.module.scss  |  49 ++
 .../mobile/mine/traffic-pool/form/index.tsx   | 180 ++++
 .../mobile/mine/traffic-pool/info/api.ts      |  34 -
 .../mine/traffic-pool/info/index.module.scss  |  65 --
 .../mobile/mine/traffic-pool/list/api.ts      |   5 +
 .../mine/traffic-pool/list/index.module.scss  |  25 +-
 .../mobile/mine/traffic-pool/list/index.tsx   | 151 ++--
 .../mobile/mine/traffic-pool/userList/api.ts  |  11 +
 .../traffic-pool/{info => userList}/data.ts   |  24 -
 .../traffic-pool/userList/index.module.scss   |  40 +
 .../traffic-pool/{info => userList}/index.tsx |  97 ++-
 Cunkebao/src/router/module/mine.tsx           |  22 +-
 30 files changed, 2130 insertions(+), 1598 deletions(-)
 delete mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts
 delete mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts
 delete mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.module.scss
 delete mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/README.md
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx
 delete mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/info/api.ts
 delete mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/userList/api.ts
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{info => userList}/data.ts (54%)
 create mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/userList/index.module.scss
 rename Cunkebao/src/pages/mobile/mine/traffic-pool/{info => userList}/index.tsx (63%)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts
deleted file mode 100644
index 3f3341ae9..000000000
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import request from "@/api/request";
-import type { UserTagsResponse } from "./data";
-
-export function getTrafficPoolDetail(wechatId: string) {
-  return request("/v1/traffic/pool/getUserInfo", { wechatId }, "GET");
-}
-
-// 获取用户旅程记录
-export function getUserJourney(params: {
-  page: number;
-  pageSize: number;
-  userId: string;
-}) {
-  return request("/v1/traffic/pool/getUserJourney", params, "GET");
-}
-
-// 获取用户标签
-export function getUserTags(userId: string): Promise<UserTagsResponse> {
-  return request("/v1/traffic/pool/getUserTags", { userId }, "GET");
-}
-
-// 添加用户标签
-export function addUserTag(userId: string, tagData: any): Promise<any> {
-  return request("/v1/user/tags", { userId, ...tagData }, "POST");
-}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts
deleted file mode 100644
index f32ec073d..000000000
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-// 设备信息类型
-export interface DeviceInfo {
-  id: number;
-  memo: string;
-  imei: string;
-  brand: string;
-  alive: number;
-  address: string;
-}
-
-// 来源信息类型
-export interface SourceInfo {
-  nickname: string;
-  avatar: string;
-  gender: number;
-  phone: string;
-  wechatId: string;
-  alias: string;
-  createTime: string;
-  friendId: number;
-  wechatAccountId: number;
-  lastMsgTime: string;
-  device: DeviceInfo;
-}
-
-// 统计总计类型
-export interface TotalStats {
-  msg: number;
-  money: number;
-  isFriend: boolean;
-  percentage: string;
-}
-
-// RMM评分类型
-export interface RmmScore {
-  r: number;
-  f: number;
-  m: number;
-}
-
-// 用户详情类型
-export interface TrafficPoolUserDetail {
-  id: number;
-  identifier: string;
-  wechatId: string;
-  nickname: string;
-  avatar: string;
-  gender: number;
-  phone: string;
-  alias: string;
-  lastMsgTime: string;
-  source: SourceInfo[];
-  packages: any[];
-  total: TotalStats;
-  rmm: RmmScore;
-}
-
-// 扩展的用户详情类型
-export interface ExtendedUserDetail extends TrafficPoolUserDetail {
-  // 保留原有的扩展字段用于向后兼容
-  userInfo?: {
-    nickname: string;
-    avatar: string;
-    wechatId: string;
-    friendShip: {
-      totalFriend: number;
-      maleFriend: number;
-      femaleFriend: number;
-      unknowFriend: number;
-    };
-  };
-  rfmScore?: {
-    recency: number;
-    frequency: number;
-    monetary: number;
-    totalScore: number;
-  };
-  trafficPools?: {
-    currentPool: string;
-    availablePools: string[];
-  };
-  userTags?: Array<{
-    id: string;
-    name: string;
-    color: string;
-    type: string;
-  }>;
-  valueTags?: Array<{
-    id: string;
-    name: string;
-    color: string;
-    icon: string;
-    rfmScore: number;
-    valueLevel: string;
-  }>;
-  restrictions?: Array<{
-    id: string;
-    reason: string;
-    level: number;
-    date: number | null;
-  }>;
-}
-
-// 互动记录类型
-export interface InteractionRecord {
-  id: string;
-  type: string;
-  content: string;
-  timestamp: string;
-  value?: number;
-}
-
-// 用户旅程记录类型
-export interface UserJourneyRecord {
-  id: string;
-  type: number;
-  remark: string;
-  createTime: string;
-}
-
-// 用户标签响应类型
-export interface UserTagsResponse {
-  wechat: string[];
-  siteLabels: UserTagItem[];
-}
-
-// 用户标签项类型
-export interface UserTagItem {
-  id: string;
-  name: string;
-  color?: string;
-  type?: string;
-}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.module.scss
deleted file mode 100644
index 23fd44d2a..000000000
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.module.scss
+++ /dev/null
@@ -1,426 +0,0 @@
-// 头部样式
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  background: #fff;
-  border-bottom: 1px solid #f0f0f0;
-
-  .title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .closeBtn {
-    padding: 8px;
-    border: none;
-    background: transparent;
-    color: #999;
-    font-size: 16px;
-  }
-}
-
-// 用户卡片
-.userCard {
-  margin: 16px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-  .userInfo {
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
-  }
-
-  .avatar {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .avatarFallback {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    font-size: 24px;
-    border-radius: 50%;
-  }
-
-  .userDetails {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .nickname {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 4px;
-  }
-
-  .wechatId {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 8px;
-  }
-
-  .tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .userTag {
-    font-size: 12px;
-    padding: 4px 8px;
-    border-radius: 12px;
-  }
-}
-
-// 标签导航
-.tabNav {
-  display: flex;
-  background: #fff;
-  margin: 0 16px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-  .tabItem {
-    flex: 1;
-    padding: 12px 16px;
-    text-align: center;
-    font-size: 14px;
-    color: #666;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    border-bottom: 2px solid transparent;
-
-    &.active {
-      color: var(--primary-color);
-      border-bottom-color: var(--primary-color);
-      background: rgba(24, 142, 238, 0.05);
-    }
-
-    &:hover {
-      background: rgba(24, 142, 238, 0.05);
-    }
-  }
-}
-
-// 内容区域
-.content {
-  padding: 10px 10px 10px 16px;
-}
-
-.tabContent {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-// 信息卡片
-.infoCard {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-
-  :global(.adm-card-header) {
-    padding: 16px;
-    border-bottom: 1px solid #f0f0f0;
-    font-weight: 600;
-    color: #333;
-  }
-
-  :global(.adm-card-body) {
-    padding: 0;
-  }
-}
-
-// RFM评分网格
-.rfmGrid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  padding: 16px;
-}
-
-.rfmItem {
-  text-align: center;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 8px;
-}
-
-.rfmLabel {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.rfmValue {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-// 流量池区域
-.poolSection {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.currentPool,
-.availablePools {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.poolLabel {
-  font-size: 14px;
-  color: #666;
-  white-space: nowrap;
-}
-
-// 统计数据网格
-.statsGrid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  padding: 16px;
-}
-
-.statItem {
-  text-align: center;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 8px;
-}
-
-.statValue {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.statLabel {
-  font-size: 12px;
-  color: #666;
-}
-
-// 用户旅程
-.journeyItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 12px;
-  color: #666;
-  margin-top: 4px;
-}
-
-.timestamp {
-  color: #999;
-}
-
-// 加载状态
-.loadingContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 16px;
-  text-align: center;
-}
-
-.loadingText {
-  font-size: 14px;
-  color: #999;
-  margin-top: 8px;
-}
-
-.loadingMore {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 16px;
-  color: #666;
-  font-size: 14px;
-}
-
-.loadMoreBtn {
-  display: flex;
-  justify-content: center;
-  padding: 16px;
-}
-
-// 标签区域
-.tagsSection {
-  padding: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.valueTagsSection {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.tagItem {
-  font-size: 12px;
-  padding: 6px 12px;
-  border-radius: 16px;
-}
-
-.valueTagContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.valueTagRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-}
-
-.rfmScoreText {
-  font-size: 12px;
-  color: #666;
-  white-space: nowrap;
-}
-
-.valueLevelLabel {
-  font-size: 12px;
-  color: #666;
-  white-space: nowrap;
-}
-
-.valueTagItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.valueInfo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: #666;
-}
-
-// 添加标签按钮
-.addTagBtn {
-  margin-top: 16px;
-  border-radius: 8px;
-  height: 48px;
-  font-size: 16px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-// 空状态
-.emptyState {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px 16px;
-  text-align: center;
-}
-
-.emptyIcon {
-  margin-bottom: 16px;
-  opacity: 0.6;
-}
-
-.emptyText {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 4px;
-  font-weight: 500;
-}
-
-.emptyDesc {
-  font-size: 12px;
-  color: #999;
-  line-height: 1.4;
-}
-
-// 限制记录样式
-.restrictionTitle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  line-height: 1.4;
-}
-
-.restrictionLevel {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 8px;
-  flex-shrink: 0;
-}
-
-.restrictionContent {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 12px;
-  color: #666;
-  line-height: 1.4;
-  margin-top: 4px;
-}
-
-// 响应式设计
-@media (max-width: 375px) {
-  .rfmGrid,
-  .statsGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .userInfo {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .avatar {
-    align-self: center;
-  }
-
-  .restrictionTitle {
-    font-size: 13px;
-  }
-
-  .restrictionContent {
-    font-size: 11px;
-  }
-}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx
deleted file mode 100644
index ca0242b4c..000000000
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx
+++ /dev/null
@@ -1,795 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { Card, Button, Avatar, Tag, List, SpinLoading } from "antd-mobile";
-import {
-  UserOutlined,
-  CrownOutlined,
-  EyeOutlined,
-  DollarOutlined,
-  MobileOutlined,
-  TagOutlined,
-  FileTextOutlined,
-  UserAddOutlined,
-} from "@ant-design/icons";
-import Layout from "@/components/Layout/Layout";
-import NavCommon from "@/components/NavCommon";
-import { getTrafficPoolDetail, getUserJourney, getUserTags } from "./api";
-import type {
-  ExtendedUserDetail,
-  UserJourneyRecord,
-  UserTagsResponse,
-  UserTagItem,
-} from "./data";
-import styles from "./index.module.scss";
-
-// RMM评分辅助函数
-const getRmmValueLevel = (totalScore: number): string => {
-  if (totalScore >= 12) return "高价值客户";
-  if (totalScore >= 8) return "中等价值客户";
-  if (totalScore >= 4) return "低价值客户";
-  return "潜在客户";
-};
-
-const getRmmColor = (totalScore: number): string => {
-  if (totalScore >= 12) return "danger";
-  if (totalScore >= 8) return "warning";
-  if (totalScore >= 4) return "primary";
-  return "default";
-};
-
-const TrafficPoolDetail: React.FC = () => {
-  const { wxid, userId } = useParams();
-  const [loading, setLoading] = useState(true);
-  const [user, setUser] = useState<ExtendedUserDetail | null>(null);
-  const [activeTab, setActiveTab] = useState("basic");
-
-  // 用户旅程相关状态
-  const [journeyLoading, setJourneyLoading] = useState(false);
-  const [journeyList, setJourneyList] = useState<UserJourneyRecord[]>([]);
-  const [journeyPage, setJourneyPage] = useState(1);
-  const [journeyTotal, setJourneyTotal] = useState(0);
-  const pageSize = 10;
-
-  // 用户标签相关状态
-  const [tagsLoading, setTagsLoading] = useState(false);
-  const [userTagsList, setUserTagsList] = useState<UserTagItem[]>([]);
-  const [wechatTagsList, setWechatTagsList] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (!wxid) return;
-    setLoading(true);
-    getTrafficPoolDetail(wxid as string)
-      .then(res => {
-        // 直接使用API返回的数据结构
-        const extendedUser: ExtendedUserDetail = {
-          ...res,
-          // 根据新数据结构构建userInfo
-          userInfo: {
-            nickname: res.nickname,
-            avatar: res.avatar,
-            wechatId: res.wechatId,
-            friendShip: {
-              totalFriend: res.source?.length || 0,
-              maleFriend: res.source?.filter(s => s.gender === 1).length || 0,
-              femaleFriend: res.source?.filter(s => s.gender === 2).length || 0,
-              unknowFriend: res.source?.filter(s => s.gender === 0).length || 0,
-            },
-          },
-          // 使用API返回的RMM数据
-          rfmScore: {
-            recency: res.rmm.r,
-            frequency: res.rmm.f,
-            monetary: res.rmm.m,
-            totalScore: res.rmm.r + res.rmm.f + res.rmm.m,
-          },
-          // 根据数据推断流量池信息
-          trafficPools: {
-            currentPool: res.total.isFriend ? "已添加好友池" : "待添加池",
-            availablePools: ["高价值客户池", "活跃用户池", "新用户池"],
-          },
-          // 基于数据生成用户标签
-          userTags: [
-            ...(res.total.isFriend
-              ? [
-                  {
-                    id: "friend",
-                    name: "已添加好友",
-                    color: "success",
-                    type: "status",
-                  },
-                ]
-              : []),
-            ...(res.total.money > 0
-              ? [
-                  {
-                    id: "paid",
-                    name: "付费用户",
-                    color: "warning",
-                    type: "value",
-                  },
-                ]
-              : []),
-            ...(res.total.msg > 10
-              ? [
-                  {
-                    id: "active",
-                    name: "高频互动",
-                    color: "primary",
-                    type: "behavior",
-                  },
-                ]
-              : []),
-            ...(res.source?.length > 1
-              ? [
-                  {
-                    id: "multi",
-                    name: "多设备用户",
-                    color: "danger",
-                    type: "device",
-                  },
-                ]
-              : []),
-          ],
-          // 基于RMM评分生成价值标签
-          valueTags: [
-            {
-              id: "rmm",
-              name: getRmmValueLevel(res.rmm.r + res.rmm.f + res.rmm.m),
-              color: getRmmColor(res.rmm.r + res.rmm.f + res.rmm.m),
-              icon: "crown",
-              rfmScore: res.rmm.r + res.rmm.f + res.rmm.m,
-              valueLevel: getRmmValueLevel(res.rmm.r + res.rmm.f + res.rmm.m),
-            },
-          ],
-        };
-        console.log("用户详情数据:", extendedUser);
-
-        setUser(extendedUser);
-      })
-      .finally(() => setLoading(false));
-  }, [wxid]);
-
-  // 获取用户旅程数据
-  const fetchUserJourney = async (page: number = 1) => {
-    if (!userId) return;
-
-    setJourneyLoading(true);
-    try {
-      const response = await getUserJourney({
-        page,
-        pageSize,
-        userId: userId,
-      });
-
-      if (page === 1) {
-        setJourneyList(response.list);
-      } else {
-        setJourneyList(prev => [...prev, ...response.list]);
-      }
-      setJourneyTotal(response.total);
-      setJourneyPage(page);
-    } catch (error) {
-      console.error("获取用户旅程失败:", error);
-    } finally {
-      setJourneyLoading(false);
-    }
-  };
-
-  // 获取用户标签数据
-  const fetchUserTags = async () => {
-    if (!userId) return;
-
-    setTagsLoading(true);
-    try {
-      const response: UserTagsResponse = await getUserTags(userId);
-      setUserTagsList(response.siteLabels || []);
-      setWechatTagsList(response.wechat || []);
-    } catch (error) {
-      console.error("获取用户标签失败:", error);
-    } finally {
-      setTagsLoading(false);
-    }
-  };
-
-  // 标签切换处理
-  const handleTabChange = (tab: string) => {
-    setActiveTab(tab);
-    if (tab === "journey" && journeyList.length === 0) {
-      fetchUserJourney(1);
-    }
-    if (tab === "tags" && userTagsList.length === 0) {
-      fetchUserTags();
-    }
-  };
-
-  const getJourneyTypeIcon = (type: number) => {
-    switch (type) {
-      case 0: // 浏览
-        return <EyeOutlined style={{ color: "#722ed1" }} />;
-      case 2: // 提交订单
-        return <FileTextOutlined style={{ color: "#52c41a" }} />;
-      case 3: // 注册
-        return <UserAddOutlined style={{ color: "#1677ff" }} />;
-      default:
-        return <MobileOutlined style={{ color: "#999" }} />;
-    }
-  };
-
-  const getJourneyTypeText = (type: number) => {
-    switch (type) {
-      case 0:
-        return "浏览行为";
-      case 2:
-        return "提交订单";
-      case 3:
-        return "注册行为";
-      default:
-        return "其他行为";
-    }
-  };
-
-  const formatDateTime = (dateTime: string) => {
-    try {
-      const date = new Date(dateTime);
-      return date.toLocaleString("zh-CN", {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
-    } catch (error) {
-      return dateTime;
-    }
-  };
-
-  const getActionIcon = (type: string) => {
-    switch (type) {
-      case "click":
-        return <MobileOutlined style={{ color: "#1677ff" }} />;
-      case "view":
-        return <EyeOutlined style={{ color: "#722ed1" }} />;
-      case "purchase":
-        return <DollarOutlined style={{ color: "#52c41a" }} />;
-      default:
-        return <MobileOutlined style={{ color: "#999" }} />;
-    }
-  };
-
-  const getRestrictionLevelText = (level: number) => {
-    switch (level) {
-      case 1:
-        return "轻微";
-      case 2:
-        return "中等";
-      case 3:
-        return "严重";
-      default:
-        return "未知";
-    }
-  };
-
-  const getRestrictionLevelColor = (level: number) => {
-    switch (level) {
-      case 1:
-        return "warning";
-      case 2:
-        return "danger";
-      case 3:
-        return "danger";
-      default:
-        return "default";
-    }
-  };
-
-  const formatDate = (timestamp: number | null) => {
-    if (!timestamp) return "--";
-    try {
-      const date = new Date(timestamp * 1000);
-      return date.toLocaleDateString("zh-CN");
-    } catch (error) {
-      return "--";
-    }
-  };
-
-  // 获取标签颜色
-  const getTagColor = (index: number): string => {
-    const colors = ["primary", "success", "warning", "danger", "default"];
-    return colors[index % colors.length];
-  };
-
-  if (!user) {
-    return (
-      <Layout header={<NavCommon title="用户详情" />} loading={loading}>
-        <div className={styles.emptyState}>
-          <div className={styles.emptyText}>未找到该用户</div>
-        </div>
-      </Layout>
-    );
-  }
-
-  return (
-    <Layout
-      loading={loading}
-      header={
-        <>
-          <NavCommon title="用户详情" />
-          {/* 用户基本信息 */}
-          <Card className={styles.userCard}>
-            <div className={styles.userInfo}>
-              <Avatar
-                src={user.avatar}
-                className={styles.avatar}
-                fallback={
-                  <div className={styles.avatarFallback}>
-                    <UserOutlined />
-                  </div>
-                }
-              />
-              <div className={styles.userDetails}>
-                <div className={styles.nickname}>{user.nickname}</div>
-                <div className={styles.wechatId}>{user.wechatId}</div>
-                <div className={styles.tags}>
-                  {user.valueTags?.map(tag => (
-                    <Tag
-                      key={tag.id}
-                      color={tag.color}
-                      fill="outline"
-                      className={styles.userTag}
-                    >
-                      <CrownOutlined />
-                      {tag.name}
-                    </Tag>
-                  ))}
-                  {user.total.isFriend && (
-                    <Tag
-                      color="success"
-                      fill="outline"
-                      className={styles.userTag}
-                    >
-                      已添加好友
-                    </Tag>
-                  )}
-                </div>
-              </div>
-            </div>
-          </Card>
-          {/* 导航标签 */}
-          <div className={styles.tabNav}>
-            <div
-              className={`${styles.tabItem} ${
-                activeTab === "basic" ? styles.active : ""
-              }`}
-              onClick={() => handleTabChange("basic")}
-            >
-              基本信息
-            </div>
-            <div
-              className={`${styles.tabItem} ${
-                activeTab === "journey" ? styles.active : ""
-              }`}
-              onClick={() => handleTabChange("journey")}
-            >
-              用户旅程
-            </div>
-            <div
-              className={`${styles.tabItem} ${
-                activeTab === "tags" ? styles.active : ""
-              }`}
-              onClick={() => handleTabChange("tags")}
-            >
-              用户标签
-            </div>
-          </div>
-        </>
-      }
-    >
-      <div className={styles.container}>
-        {/* 内容区域 */}
-        <div className={styles.content}>
-          {activeTab === "basic" && (
-            <div className={styles.tabContent}>
-              {/* 关联信息 */}
-              <Card title="关联信息" className={styles.infoCard}>
-                <List>
-                  <List.Item
-                    extra={
-                      user.source?.length
-                        ? `${user.source.length}个设备`
-                        : "无设备"
-                    }
-                  >
-                    设备
-                  </List.Item>
-                  <List.Item extra={user.wechatId || "--"}>微信号</List.Item>
-                  <List.Item extra={user.alias || "--"}>别名</List.Item>
-                  <List.Item
-                    extra={
-                      user.source?.[0]?.createTime
-                        ? formatDateTime(user.source[0].createTime)
-                        : "--"
-                    }
-                  >
-                    添加时间
-                  </List.Item>
-                  <List.Item extra={user.lastMsgTime || "--"}>
-                    最近互动
-                  </List.Item>
-                </List>
-              </Card>
-
-              {/* RFM评分 */}
-              {user.rfmScore && (
-                <Card title="RFM评分" className={styles.infoCard}>
-                  <div className={styles.rfmGrid}>
-                    <div className={styles.rfmItem}>
-                      <div className={styles.rfmLabel}>最近性(R)</div>
-                      <div
-                        className={styles.rfmValue}
-                        style={{ color: "#1677ff" }}
-                      >
-                        {user.rfmScore.recency}
-                      </div>
-                    </div>
-                    <div className={styles.rfmItem}>
-                      <div className={styles.rfmLabel}>频率(F)</div>
-                      <div
-                        className={styles.rfmValue}
-                        style={{ color: "#52c41a" }}
-                      >
-                        {user.rfmScore.frequency}
-                      </div>
-                    </div>
-                    <div className={styles.rfmItem}>
-                      <div className={styles.rfmLabel}>金额(M)</div>
-                      <div
-                        className={styles.rfmValue}
-                        style={{ color: "#722ed1" }}
-                      >
-                        {user.rfmScore.monetary}
-                      </div>
-                    </div>
-                    <div className={styles.rfmItem}>
-                      <div className={styles.rfmLabel}>总分</div>
-                      <div
-                        className={styles.rfmValue}
-                        style={{ color: "#ff4d4f" }}
-                      >
-                        {user.rfmScore.totalScore}/15
-                      </div>
-                    </div>
-                  </div>
-                </Card>
-              )}
-
-              {/* 流量池 */}
-              {user.trafficPools && (
-                <Card title="流量池" className={styles.infoCard}>
-                  <div className={styles.poolSection}>
-                    <div className={styles.currentPool}>
-                      <span className={styles.poolLabel}>当前池：</span>
-                      <Tag color="primary" fill="outline">
-                        {user.trafficPools.currentPool}
-                      </Tag>
-                    </div>
-                    <div className={styles.availablePools}>
-                      <span className={styles.poolLabel}>可选池：</span>
-                      {user.trafficPools.availablePools.map((pool, index) => (
-                        <Tag key={index} color="default" fill="outline">
-                          {pool}
-                        </Tag>
-                      ))}
-                    </div>
-                  </div>
-                </Card>
-              )}
-
-              {/* 统计数据 */}
-              <Card title="统计数据" className={styles.infoCard}>
-                <div className={styles.statsGrid}>
-                  <div className={styles.statItem}>
-                    <div
-                      className={styles.statValue}
-                      style={{ color: "#52c41a" }}
-                    >
-                      ¥{user.total.money || 0}
-                    </div>
-                    <div className={styles.statLabel}>总消费</div>
-                  </div>
-                  <div className={styles.statItem}>
-                    <div
-                      className={styles.statValue}
-                      style={{ color: "#1677ff" }}
-                    >
-                      {user.total.msg || 0}
-                    </div>
-                    <div className={styles.statLabel}>互动次数</div>
-                  </div>
-                  <div className={styles.statItem}>
-                    <div
-                      className={styles.statValue}
-                      style={{ color: "#722ed1" }}
-                    >
-                      {user.total.percentage || "0"}%
-                    </div>
-                    <div className={styles.statLabel}>转化率</div>
-                  </div>
-                  <div className={styles.statItem}>
-                    <div
-                      className={styles.statValue}
-                      style={{
-                        color: user.total.isFriend ? "#52c41a" : "#999",
-                      }}
-                    >
-                      {user.total.isFriend ? "已添加" : "未添加"}
-                    </div>
-                    <div className={styles.statLabel}>添加状态</div>
-                  </div>
-                </div>
-              </Card>
-
-              {/* 好友统计 */}
-              <Card title="好友统计" className={styles.infoCard}>
-                <div className={styles.statsGrid}>
-                  <div className={styles.statItem}>
-                    <div
-                      className={styles.statValue}
-                      style={{ color: "#1677ff" }}
-                    >
-                      {user.userInfo?.friendShip.totalFriend || 0}
-                    </div>
-                    <div className={styles.statLabel}>总好友</div>
-                  </div>
-                  <div className={styles.statItem}>
-                    <div
-                      className={styles.statValue}
-                      style={{ color: "#1677ff" }}
-                    >
-                      {user.userInfo?.friendShip.maleFriend || 0}
-                    </div>
-                    <div className={styles.statLabel}>男性好友</div>
-                  </div>
-                  <div className={styles.statItem}>
-                    <div
-                      className={styles.statValue}
-                      style={{ color: "#eb2f96" }}
-                    >
-                      {user.userInfo?.friendShip.femaleFriend || 0}
-                    </div>
-                    <div className={styles.statLabel}>女性好友</div>
-                  </div>
-                  <div className={styles.statItem}>
-                    <div className={styles.statValue} style={{ color: "#999" }}>
-                      {user.userInfo?.friendShip.unknowFriend || 0}
-                    </div>
-                    <div className={styles.statLabel}>未知性别</div>
-                  </div>
-                </div>
-              </Card>
-
-              {/* 限制记录 */}
-              <Card title="限制记录" className={styles.infoCard}>
-                {user.restrictions && user.restrictions.length > 0 ? (
-                  <List>
-                    {user.restrictions.map(restriction => (
-                      <List.Item
-                        key={restriction.id}
-                        title={
-                          <div className={styles.restrictionTitle}>
-                            <span>{restriction.reason || "未知原因"}</span>
-                            <Tag
-                              color={getRestrictionLevelColor(
-                                restriction.level,
-                              )}
-                              fill="outline"
-                              className={styles.restrictionLevel}
-                            >
-                              {getRestrictionLevelText(restriction.level)}
-                            </Tag>
-                          </div>
-                        }
-                        description={
-                          <div className={styles.restrictionContent}>
-                            <span>限制ID: {restriction.id}</span>
-                            {restriction.date && (
-                              <span>
-                                限制时间: {formatDate(restriction.date)}
-                              </span>
-                            )}
-                          </div>
-                        }
-                      />
-                    ))}
-                  </List>
-                ) : (
-                  <div className={styles.emptyState}>
-                    <div className={styles.emptyIcon}>
-                      <UserOutlined style={{ fontSize: 48, color: "#ccc" }} />
-                    </div>
-                    <div className={styles.emptyText}>暂无限制记录</div>
-                    <div className={styles.emptyDesc}>
-                      该用户没有任何限制记录
-                    </div>
-                  </div>
-                )}
-              </Card>
-            </div>
-          )}
-
-          {activeTab === "journey" && (
-            <div className={styles.tabContent}>
-              <Card title="互动记录" className={styles.infoCard}>
-                {journeyLoading && journeyList.length === 0 ? (
-                  <div className={styles.loadingContainer}>
-                    <SpinLoading color="primary" style={{ fontSize: 24 }} />
-                    <div className={styles.loadingText}>加载中...</div>
-                  </div>
-                ) : journeyList.length === 0 ? (
-                  <div className={styles.emptyState}>
-                    <div className={styles.emptyIcon}>
-                      <EyeOutlined style={{ fontSize: 48, color: "#ccc" }} />
-                    </div>
-                    <div className={styles.emptyText}>暂无互动记录</div>
-                    <div className={styles.emptyDesc}>
-                      该用户还没有任何互动行为
-                    </div>
-                  </div>
-                ) : (
-                  <List>
-                    {journeyList.map(record => (
-                      <List.Item
-                        key={record.id}
-                        prefix={getJourneyTypeIcon(record.type)}
-                        title={getJourneyTypeText(record.type)}
-                        description={
-                          <div className={styles.journeyItem}>
-                            <span>{record.remark}</span>
-                            <span className={styles.timestamp}>
-                              {formatDateTime(record.createTime)}
-                            </span>
-                          </div>
-                        }
-                      />
-                    ))}
-                    {journeyLoading && journeyList.length > 0 && (
-                      <div className={styles.loadingMore}>
-                        <SpinLoading color="primary" style={{ fontSize: 16 }} />
-                        <span>加载更多...</span>
-                      </div>
-                    )}
-                    {!journeyLoading && journeyList.length < journeyTotal && (
-                      <div className={styles.loadMoreBtn}>
-                        <Button
-                          size="small"
-                          fill="outline"
-                          onClick={() => fetchUserJourney(journeyPage + 1)}
-                        >
-                          加载更多
-                        </Button>
-                      </div>
-                    )}
-                  </List>
-                )}
-              </Card>
-            </div>
-          )}
-
-          {activeTab === "tags" && (
-            <div className={styles.tabContent}>
-              {/* 站内标签 */}
-              <Card title="站内标签" className={styles.infoCard}>
-                {tagsLoading && userTagsList.length === 0 ? (
-                  <div className={styles.loadingContainer}>
-                    <SpinLoading color="primary" style={{ fontSize: 20 }} />
-                    <div className={styles.loadingText}>加载中...</div>
-                  </div>
-                ) : userTagsList.length === 0 ? (
-                  <div className={styles.emptyState}>
-                    <div className={styles.emptyIcon}>
-                      <TagOutlined style={{ fontSize: 36, color: "#ccc" }} />
-                    </div>
-                    <div className={styles.emptyText}>暂无站内标签</div>
-                    <div className={styles.emptyDesc}>
-                      该用户还没有任何站内标签
-                    </div>
-                  </div>
-                ) : (
-                  <div className={styles.tagsSection}>
-                    {userTagsList.map((tag, index) => (
-                      <Tag
-                        key={tag.id}
-                        color={getTagColor(index)}
-                        fill="outline"
-                        className={styles.tagItem}
-                      >
-                        {tag.name}
-                      </Tag>
-                    ))}
-                  </div>
-                )}
-              </Card>
-
-              {/* 微信标签 */}
-              <Card title="微信标签" className={styles.infoCard}>
-                {tagsLoading && wechatTagsList.length === 0 ? (
-                  <div className={styles.loadingContainer}>
-                    <SpinLoading color="primary" style={{ fontSize: 24 }} />
-                    <div className={styles.loadingText}>加载中...</div>
-                  </div>
-                ) : wechatTagsList.length === 0 ? (
-                  <div className={styles.emptyState}>
-                    <div className={styles.emptyIcon}>
-                      <TagOutlined style={{ fontSize: 48, color: "#ccc" }} />
-                    </div>
-                    <div className={styles.emptyText}>暂无微信标签</div>
-                    <div className={styles.emptyDesc}>
-                      该用户还没有任何微信标签
-                    </div>
-                  </div>
-                ) : (
-                  <div className={styles.tagsSection}>
-                    {wechatTagsList.map((tag, index) => (
-                      <Tag
-                        key={index}
-                        color="danger"
-                        fill="outline"
-                        className={styles.tagItem}
-                      >
-                        {tag}
-                      </Tag>
-                    ))}
-                  </div>
-                )}
-              </Card>
-
-              {/* 价值标签 */}
-              <Card title="价值标签" className={styles.infoCard}>
-                {user.valueTags && user.valueTags.length > 0 ? (
-                  <div className={styles.valueTagsSection}>
-                    {user.valueTags.map(tag => (
-                      <div key={tag.id} className={styles.valueTagContainer}>
-                        <div className={styles.valueTagRow}>
-                          <Tag
-                            color={tag.color}
-                            fill="outline"
-                            className={styles.tagItem}
-                          >
-                            {tag.icon === "crown" && <CrownOutlined />}
-                            {tag.name}
-                          </Tag>
-                          <span className={styles.rfmScoreText}>
-                            RFM总分: {tag.rfmScore}/15
-                          </span>
-                        </div>
-                        <div className={styles.valueTagRow}>
-                          <span className={styles.valueLevelLabel}>
-                            价值等级:
-                          </span>
-                          <Tag color="danger" fill="outline">
-                            {tag.valueLevel}
-                          </Tag>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className={styles.emptyState}>
-                    <div className={styles.emptyIcon}>
-                      <CrownOutlined style={{ fontSize: 48, color: "#ccc" }} />
-                    </div>
-                    <div className={styles.emptyText}>暂无价值标签</div>
-                    <div className={styles.emptyDesc}>
-                      该用户还没有任何价值标签
-                    </div>
-                  </div>
-                )}
-              </Card>
-            </div>
-          )}
-        </div>
-      </div>
-    </Layout>
-  );
-};
-
-export default TrafficPoolDetail;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/README.md b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/README.md
new file mode 100644
index 000000000..f8b95a7ef
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/README.md
@@ -0,0 +1,101 @@
+# 新建流量包功能
+
+## 功能概述
+
+新建流量包功能是一个完整的用户群体管理工具，允许用户创建和管理基于特定条件的用户分组。
+
+## 页面结构
+
+### 主页面 (`index.tsx`)
+
+- 包含三个标签页：基本信息、人群筛选、用户列表
+- 使用 Tabs 组件进行页面切换
+- 底部固定提交按钮
+
+### 组件结构
+
+#### 1. 基本信息组件 (`BasicInfo.tsx`)
+
+- **流量包名称**：必填字段
+- **描述**：可选字段
+- **备注**：可选字段，支持多行输入
+
+#### 2. 人群筛选组件 (`AudienceFilter.tsx`)
+
+- **RFM分析**：展示最近消费、消费频率、消费金额
+- **年龄层**：显示年龄范围
+- **消费能力**：显示消费能力等级
+- **标签筛选**：预设的8个标签
+- **自定义条件**：支持添加自定义筛选条件
+- **方案推荐**：提供6个预设方案
+
+#### 3. 用户列表预览组件 (`UserListPreview.tsx`)
+
+- 显示筛选后的用户列表
+- 支持全选和批量操作
+- 显示用户详细信息（RFM评分、活跃度、消费金额等）
+- 支持单个用户移除
+
+#### 4. 自定义条件弹窗 (`CustomConditionModal.tsx`)
+
+- 支持10种不同的标签类型
+- 根据标签类型显示不同的输入方式：
+  - 年龄层：两个数字输入框（范围）
+  - 其他标签：下拉选择框
+- 支持条件的添加和删除
+
+#### 5. 方案推荐弹窗 (`SchemeRecommendation.tsx`)
+
+- 提供6个预设方案：
+  - 高价值客户方案
+  - 新用户激活方案
+  - 用户留存方案
+  - 升单转化方案
+  - 价格敏感用户方案
+  - 忠诚客户维护方案
+- 每个方案包含筛选条件和预估用户数量
+
+#### 6. 条件列表组件 (`ConditionList.tsx`)
+
+- 显示已添加的自定义条件
+- 支持条件的删除和编辑
+
+## 数据流
+
+1. **基本信息** → 保存到 `formData` 状态
+2. **筛选条件** → 保存到 `formData.filterConditions`
+3. **生成用户列表** → 调用模拟API生成用户数据
+4. **提交** → 将所有数据提交到后端
+
+## 路由配置
+
+- 路径：`/mine/traffic-pool/create`
+- 组件：`CreateTrafficPackage`
+- 权限：需要登录
+
+## 使用流程
+
+1. 填写基本信息（流量包名称必填）
+2. 在人群筛选页面设置筛选条件：
+   - 使用预设标签
+   - 添加自定义条件
+   - 或选择预设方案
+3. 点击"生成用户列表"查看筛选结果
+4. 在用户列表页面预览和调整用户
+5. 点击"创建流量包"完成创建
+
+## 技术特点
+
+- **模块化设计**：每个功能独立封装为组件
+- **响应式布局**：适配移动端显示
+- **状态管理**：使用React Hooks管理复杂状态
+- **用户体验**：提供丰富的交互反馈
+- **数据模拟**：包含完整的模拟数据用于演示
+
+## 扩展性
+
+- 支持添加新的标签类型
+- 支持添加新的预设方案
+- 支持自定义筛选逻辑
+- 支持导出用户列表
+- 支持批量操作功能
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts
new file mode 100644
index 000000000..398ab2007
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts
@@ -0,0 +1,75 @@
+import request from "@/api/request";
+
+// 创建流量包
+export interface CreateTrafficPackageParams {
+  name: string;
+  description?: string;
+  remarks?: string;
+  filterConditions: any[];
+  userIds: string[];
+}
+
+export interface CreateTrafficPackageResponse {
+  id: string;
+  name: string;
+  success: boolean;
+  message: string;
+}
+
+export async function createTrafficPackage(
+  params: CreateTrafficPackageParams,
+): Promise<CreateTrafficPackageResponse> {
+  return request("/v1/traffic/pool/create", params, "POST");
+}
+
+// 获取用户列表（根据筛选条件）
+export interface GetUsersByFilterParams {
+  conditions: any[];
+  page?: number;
+  pageSize?: number;
+}
+
+export interface User {
+  id: string;
+  name: string;
+  avatar: string;
+  tags: string[];
+  rfmScore: number;
+  lastActive: string;
+  consumption: number;
+}
+
+export interface GetUsersByFilterResponse {
+  list: User[];
+  total: number;
+}
+
+export async function getUsersByFilter(
+  params: GetUsersByFilterParams,
+): Promise<GetUsersByFilterResponse> {
+  return request("/v1/traffic/pool/users/filter", params, "POST");
+}
+
+// 获取预设方案列表
+export interface PresetScheme {
+  id: string;
+  name: string;
+  description: string;
+  conditions: any[];
+  userCount: number;
+  color: string;
+}
+
+export async function getPresetSchemes(): Promise<PresetScheme[]> {
+  return request("/v1/traffic/pool/schemes", {}, "GET");
+}
+
+// 获取行业选项（固定筛选项）
+export interface IndustryOption {
+  label: string;
+  value: string | number;
+}
+
+export async function getIndustryOptions(): Promise<IndustryOption[]> {
+  return request("/v1/traffic/pool/industries", {}, "GET");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss
new file mode 100644
index 000000000..75c1e09ed
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss
@@ -0,0 +1,121 @@
+.container {
+  padding: 0;
+}
+
+.card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.schemeBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  padding: 4px 8px;
+  height: 28px;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+
+.sectionTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.rfmGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
+}
+
+.rfmItem {
+  background: #f8f9fa;
+  border-radius: 6px;
+  padding: 12px;
+  text-align: center;
+}
+
+.rfmLabel {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.rfmValue {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.ageRange {
+  background: #f8f9fa;
+  border-radius: 6px;
+  padding: 12px;
+  text-align: center;
+  font-size: 14px;
+  color: #333;
+}
+
+.consumptionLevel {
+  display: flex;
+  justify-content: center;
+}
+
+.levelTag {
+  background: #52c41a;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.tagGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.tag {
+  padding: 8px 12px;
+  border-radius: 16px;
+  color: white;
+  font-size: 12px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.addConditionBtn {
+  width: 100%;
+  margin: 16px 0;
+  border-style: dashed;
+  border-color: #d9d9d9;
+  color: #666;
+
+  &:hover {
+    border-color: #1677ff;
+    color: #1677ff;
+  }
+}
+
+.generateBtn {
+  margin-top: 16px;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx
new file mode 100644
index 000000000..6cc023fe9
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx
@@ -0,0 +1,209 @@
+import React, { useEffect, useState } from "react";
+import { Card, Button } from "antd-mobile";
+import { Select } from "antd";
+import { EditSOutline } from "antd-mobile-icons";
+import CustomConditionModal from "./CustomConditionModal";
+import SchemeRecommendation from "./SchemeRecommendation";
+import ConditionList from "./ConditionList";
+import styles from "./AudienceFilter.module.scss";
+import { getIndustryOptions, IndustryOption } from "../api";
+
+interface FilterCondition {
+  id: string;
+  type: string;
+  label: string;
+  value: any;
+  operator?: string;
+}
+
+interface AudienceFilterProps {
+  conditions: FilterCondition[];
+  onChange: (conditions: FilterCondition[]) => void;
+  onGenerate: (users: any[]) => void;
+}
+
+const AudienceFilter: React.FC<AudienceFilterProps> = ({
+  conditions,
+  onChange,
+  onGenerate,
+}) => {
+  const [showCustomModal, setShowCustomModal] = useState(false);
+  const [showSchemeModal, setShowSchemeModal] = useState(false);
+  const [industryOptions, setIndustryOptions] = useState<IndustryOption[]>([]);
+  const [selectedIndustry, setSelectedIndustry] = useState<
+    string | number | undefined
+  >(undefined);
+
+  // 加载行业选项（固定筛选项）
+  useEffect(() => {
+    getIndustryOptions()
+      .then(res => setIndustryOptions(res || []))
+      .catch(() => setIndustryOptions([]));
+  }, []);
+
+  const handleAddCondition = (condition: FilterCondition) => {
+    const newConditions = [...conditions, condition];
+    onChange(newConditions);
+  };
+
+  const handleRemoveCondition = (id: string) => {
+    const newConditions = conditions.filter(c => c.id !== id);
+    onChange(newConditions);
+  };
+
+  const handleUpdateCondition = (id: string, value: any) => {
+    const newConditions = conditions.map(c =>
+      c.id === id ? { ...c, value } : c,
+    );
+    onChange(newConditions);
+  };
+
+  const handleApplyScheme = (schemeConditions: FilterCondition[]) => {
+    onChange(schemeConditions);
+    setShowSchemeModal(false);
+  };
+
+  const handleGenerate = () => {
+    // 模拟生成用户数据
+    const mockUsers = generateMockUsers(conditions);
+    onGenerate(mockUsers);
+  };
+
+  return (
+    <div className={styles.container}>
+      <Card className={styles.card}>
+        <div className={styles.header}>
+          <div className={styles.title}>人群筛选</div>
+          <Button
+            size="small"
+            fill="outline"
+            onClick={() => setShowSchemeModal(true)}
+            className={styles.schemeBtn}
+          >
+            <EditSOutline />
+            方案推荐
+          </Button>
+        </div>
+
+        {/* 行业筛选（固定项，接口获取选项） */}
+        <div className={styles.section}>
+          <div className={styles.sectionTitle}>行业</div>
+          <Select
+            style={{ width: "100%" }}
+            placeholder="选择行业"
+            value={selectedIndustry}
+            onChange={value => setSelectedIndustry(value)}
+            options={industryOptions.map(opt => ({
+              label: opt.label,
+              value: opt.value,
+            }))}
+            allowClear
+          />
+        </div>
+
+        {/* 标签筛选 */}
+        <div className={styles.section}>
+          <div className={styles.sectionTitle}>标签筛选</div>
+          <div className={styles.tagGrid}>
+            {[
+              { name: "高价值用户", color: "#1677ff" },
+              { name: "新用户", color: "#52c41a" },
+              { name: "活跃用户", color: "#faad14" },
+              { name: "流失风险", color: "#eb2f96" },
+              { name: "复购率高", color: "#722ed1" },
+              { name: "高潜力", color: "#eb2f96" },
+              { name: "已沉睡", color: "#bfbfbf" },
+              { name: "价格敏感", color: "#13c2c2" },
+            ].map((tag, index) => (
+              <div
+                key={index}
+                className={styles.tag}
+                style={{ backgroundColor: tag.color }}
+              >
+                {tag.name}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 自定义条件列表 */}
+        <ConditionList
+          conditions={conditions}
+          onRemove={handleRemoveCondition}
+          onUpdate={handleUpdateCondition}
+        />
+
+        {/* 添加自定义条件 */}
+        <Button
+          fill="outline"
+          onClick={() => setShowCustomModal(true)}
+          className={styles.addConditionBtn}
+        >
+          + 添加自定义条件
+        </Button>
+
+        {/* 生成按钮 */}
+        <Button
+          color="primary"
+          block
+          onClick={() => {
+            // 将行业条件合并到自定义条件，便于统一生成
+            const mergedConditions =
+              selectedIndustry !== undefined
+                ? [
+                    ...conditions,
+                    {
+                      id: `industry`,
+                      type: "select",
+                      label: "行业",
+                      value: selectedIndustry,
+                    },
+                  ]
+                : conditions;
+            const mockUsers = generateMockUsers(mergedConditions as any);
+            onGenerate(mockUsers);
+          }}
+          className={styles.generateBtn}
+        >
+          生成用户列表
+        </Button>
+      </Card>
+
+      {/* 自定义条件弹窗 */}
+      <CustomConditionModal
+        visible={showCustomModal}
+        onClose={() => setShowCustomModal(false)}
+        onAdd={handleAddCondition}
+      />
+
+      {/* 方案推荐弹窗 */}
+      <SchemeRecommendation
+        visible={showSchemeModal}
+        onClose={() => setShowSchemeModal(false)}
+        onApply={handleApplyScheme}
+      />
+    </div>
+  );
+};
+
+// 模拟生成用户数据
+const generateMockUsers = (conditions: FilterCondition[]) => {
+  const mockUsers = [];
+  const userCount = Math.floor(Math.random() * 1000) + 100; // 100-1100个用户
+
+  for (let i = 1; i <= userCount; i++) {
+    mockUsers.push({
+      id: `U${String(i).padStart(8, "0")}`,
+      name: `用户${i}`,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`,
+      tags: ["高价值用户", "活跃用户"],
+      rfmScore: Math.floor(Math.random() * 15) + 1,
+      lastActive: "7天内",
+      consumption: Math.floor(Math.random() * 5000) + 100,
+    });
+  }
+
+  return mockUsers;
+};
+
+export default AudienceFilter;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.module.scss
new file mode 100644
index 000000000..7691d6c85
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.module.scss
@@ -0,0 +1,60 @@
+.container {
+  padding: 0;
+}
+
+.card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.label {
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.required {
+  color: #ff4d4f;
+  margin-left: 2px;
+}
+
+.input {
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 14px;
+
+  &:focus {
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+  }
+}
+
+.textarea {
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 14px;
+  resize: vertical;
+  min-height: 80px;
+
+  &:focus {
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+  }
+}
+
+:global(.adm-form-item) {
+  margin-bottom: 20px;
+}
+
+:global(.adm-form-item-label) {
+  margin-bottom: 8px;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.tsx
new file mode 100644
index 000000000..37e2a99bb
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/BasicInfo.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { Card, Form, Input } from "antd-mobile";
+import styles from "./BasicInfo.module.scss";
+
+interface BasicInfoProps {
+  data: {
+    name: string;
+    description: string;
+    remarks: string;
+  };
+  onChange: (data: any) => void;
+}
+
+const BasicInfo: React.FC<BasicInfoProps> = ({ data, onChange }) => {
+  const handleChange = (field: string, value: string) => {
+    onChange({ [field]: value });
+  };
+
+  return (
+    <div className={styles.container}>
+      <Card className={styles.card}>
+        <div className={styles.title}>基本信息</div>
+
+        <Form layout="vertical">
+          <Form.Item
+            label={
+              <span className={styles.label}>
+                流量包名称<span className={styles.required}>*</span>
+              </span>
+            }
+            required
+          >
+            <Input
+              placeholder="输入流量包名称"
+              value={data.name}
+              onChange={value => handleChange("name", value)}
+              className={styles.input}
+            />
+          </Form.Item>
+
+          <Form.Item label={<span className={styles.label}>描述</span>}>
+            <Input
+              placeholder="输入流量包描述"
+              value={data.description}
+              onChange={value => handleChange("description", value)}
+              className={styles.input}
+            />
+          </Form.Item>
+
+          <Form.Item label={<span className={styles.label}>备注</span>}>
+            <Input
+              placeholder="输入备注信息 (选填)"
+              value={data.remarks}
+              onChange={value => handleChange("remarks", value)}
+              className={styles.textarea}
+              rows={3}
+            />
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  );
+};
+
+export default BasicInfo;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.module.scss
new file mode 100644
index 000000000..823417b81
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.module.scss
@@ -0,0 +1,52 @@
+.container {
+  margin-bottom: 24px;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.conditionList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.conditionItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+}
+
+.conditionContent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.conditionLabel {
+  font-size: 14px;
+  color: #666;
+}
+
+.conditionValue {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.removeBtn {
+  color: #ff4d4f;
+  padding: 4px;
+
+  &:hover {
+    background-color: #fff2f0;
+  }
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.tsx
new file mode 100644
index 000000000..d0c27e852
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/ConditionList.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { Button } from "antd-mobile";
+import { DeleteOutline } from "antd-mobile-icons";
+import styles from "./ConditionList.module.scss";
+
+interface FilterCondition {
+  id: string;
+  type: string;
+  label: string;
+  value: any;
+  operator?: string;
+}
+
+interface ConditionListProps {
+  conditions: FilterCondition[];
+  onRemove: (id: string) => void;
+  onUpdate: (id: string, value: any) => void;
+}
+
+const ConditionList: React.FC<ConditionListProps> = ({
+  conditions,
+  onRemove,
+  onUpdate,
+}) => {
+  const formatConditionValue = (condition: FilterCondition) => {
+    switch (condition.type) {
+      case "range":
+        return `${condition.value.min || 0}-${condition.value.max || 0}岁`;
+      case "select":
+        return condition.value;
+      default:
+        return condition.value;
+    }
+  };
+
+  if (conditions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>自定义条件</div>
+      <div className={styles.conditionList}>
+        {conditions.map(condition => (
+          <div key={condition.id} className={styles.conditionItem}>
+            <div className={styles.conditionContent}>
+              <span className={styles.conditionLabel}>{condition.label}:</span>
+              <span className={styles.conditionValue}>
+                {formatConditionValue(condition)}
+              </span>
+            </div>
+            <Button
+              size="small"
+              fill="none"
+              onClick={() => onRemove(condition.id)}
+              className={styles.removeBtn}
+            >
+              <DeleteOutline />
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ConditionList;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.module.scss
new file mode 100644
index 000000000..41a71d0b3
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.module.scss
@@ -0,0 +1,80 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+
+.sectionTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.tagList {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.tagItem {
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  text-align: center;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #1677ff;
+    color: #1677ff;
+  }
+
+  &.selected {
+    border-color: #1677ff;
+    background-color: #e6f7ff;
+    color: #1677ff;
+  }
+}
+
+.rangeInputs {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.rangeSeparator {
+  color: #666;
+  font-weight: 500;
+}
+
+.footer {
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.tsx
new file mode 100644
index 000000000..f4ae5e50d
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/CustomConditionModal.tsx
@@ -0,0 +1,242 @@
+import React, { useState } from "react";
+import { Popup, Form, Input, Selector, Button } from "antd-mobile";
+import styles from "./CustomConditionModal.module.scss";
+
+interface CustomConditionModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onAdd: (condition: any) => void;
+}
+
+// 模拟标签数据
+const mockTags = [
+  { id: "age", name: "年龄层", type: "range", options: [] },
+  {
+    id: "consumption",
+    name: "消费能力",
+    type: "select",
+    options: [
+      { label: "高", value: "high" },
+      { label: "中", value: "medium" },
+      { label: "低", value: "low" },
+    ],
+  },
+  {
+    id: "gender",
+    name: "性别",
+    type: "select",
+    options: [
+      { label: "男", value: "male" },
+      { label: "女", value: "female" },
+      { label: "未知", value: "unknown" },
+    ],
+  },
+  {
+    id: "location",
+    name: "所在地区",
+    type: "select",
+    options: [
+      { label: "厦门", value: "xiamen" },
+      { label: "泉州", value: "quanzhou" },
+      { label: "福州", value: "fuzhou" },
+    ],
+  },
+  {
+    id: "source",
+    name: "客户来源",
+    type: "select",
+    options: [
+      { label: "抖音", value: "douyin" },
+      { label: "门店扫码", value: "store" },
+      { label: "朋友推荐", value: "referral" },
+      { label: "广告投放", value: "ad" },
+    ],
+  },
+  {
+    id: "frequency",
+    name: "消费频率",
+    type: "select",
+    options: [
+      { label: "高频(>3次/月)", value: "high" },
+      { label: "中频", value: "medium" },
+      { label: "低频", value: "low" },
+    ],
+  },
+  {
+    id: "sensitivity",
+    name: "优惠敏感度",
+    type: "select",
+    options: [
+      { label: "高", value: "high" },
+      { label: "中", value: "medium" },
+      { label: "低", value: "low" },
+    ],
+  },
+  {
+    id: "category",
+    name: "品类偏好",
+    type: "select",
+    options: [
+      { label: "护肤", value: "skincare" },
+      { label: "茶饮", value: "tea" },
+      { label: "宠物", value: "pet" },
+      { label: "课程", value: "course" },
+    ],
+  },
+  {
+    id: "repurchase",
+    name: "复购行为",
+    type: "select",
+    options: [
+      { label: "有", value: "yes" },
+      { label: "无", value: "no" },
+    ],
+  },
+  {
+    id: "satisfaction",
+    name: "售后满意度",
+    type: "select",
+    options: [
+      { label: "好评", value: "good" },
+      { label: "一般", value: "average" },
+      { label: "差评", value: "bad" },
+    ],
+  },
+];
+
+const CustomConditionModal: React.FC<CustomConditionModalProps> = ({
+  visible,
+  onClose,
+  onAdd,
+}) => {
+  const [selectedTag, setSelectedTag] = useState<any>(null);
+  const [conditionValue, setConditionValue] = useState<any>(null);
+
+  const handleTagSelect = (tag: any) => {
+    setSelectedTag(tag);
+    setConditionValue(null);
+  };
+
+  const handleValueChange = (value: any) => {
+    setConditionValue(value);
+  };
+
+  const handleSubmit = () => {
+    if (!selectedTag || !conditionValue) return;
+
+    const condition = {
+      id: `${selectedTag.id}_${Date.now()}`,
+      type: selectedTag.type,
+      label: selectedTag.name,
+      value: conditionValue,
+    };
+
+    onAdd(condition);
+    onClose();
+    setSelectedTag(null);
+    setConditionValue(null);
+  };
+
+  const renderValueInput = () => {
+    if (!selectedTag) return null;
+
+    switch (selectedTag.type) {
+      case "range":
+        return (
+          <div className={styles.rangeInputs}>
+            <Input
+              placeholder="最小年龄"
+              type="number"
+              onChange={value =>
+                setConditionValue(prev => ({ ...prev, min: value }))
+              }
+            />
+            <span className={styles.rangeSeparator}>-</span>
+            <Input
+              placeholder="最大年龄"
+              type="number"
+              onChange={value =>
+                setConditionValue(prev => ({ ...prev, max: value }))
+              }
+            />
+          </div>
+        );
+
+      case "select":
+        return (
+          <Selector
+            options={selectedTag.options}
+            value={conditionValue ? [conditionValue] : []}
+            onChange={value => handleValueChange(value[0])}
+            multiple={false}
+          />
+        );
+
+      default:
+        return (
+          <Input
+            placeholder="请输入值"
+            value={conditionValue}
+            onChange={handleValueChange}
+          />
+        );
+    }
+  };
+
+  return (
+    <Popup
+      visible={visible}
+      onMaskClick={onClose}
+      position="bottom"
+      bodyStyle={{ height: "70vh" }}
+    >
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.title}>添加自定义条件</div>
+          <Button size="small" fill="none" onClick={onClose}>
+            取消
+          </Button>
+        </div>
+
+        <div className={styles.content}>
+          <div className={styles.section}>
+            <div className={styles.sectionTitle}>选择标签</div>
+            <div className={styles.tagList}>
+              {mockTags.map(tag => (
+                <div
+                  key={tag.id}
+                  className={`${styles.tagItem} ${
+                    selectedTag?.id === tag.id ? styles.selected : ""
+                  }`}
+                  onClick={() => handleTagSelect(tag)}
+                >
+                  {tag.name}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {selectedTag && (
+            <div className={styles.section}>
+              <div className={styles.sectionTitle}>设置条件</div>
+              {renderValueInput()}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.footer}>
+          <Button
+            color="primary"
+            block
+            disabled={!selectedTag || !conditionValue}
+            onClick={handleSubmit}
+          >
+            添加条件
+          </Button>
+        </div>
+      </div>
+    </Popup>
+  );
+};
+
+export default CustomConditionModal;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.module.scss
new file mode 100644
index 000000000..20b5d1575
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.module.scss
@@ -0,0 +1,92 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.schemeList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.schemeCard {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.schemeHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.schemeName {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.schemeBadge {
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.schemeDescription {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 12px;
+  line-height: 1.4;
+}
+
+.schemeConditions {
+  margin-bottom: 16px;
+}
+
+.conditionsTitle {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 8px;
+}
+
+.conditionsList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.conditionTag {
+  background: #f0f0f0;
+  color: #666;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+.applyBtn {
+  width: 100%;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.tsx
new file mode 100644
index 000000000..2e43a5463
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/SchemeRecommendation.tsx
@@ -0,0 +1,201 @@
+import React from "react";
+import { Popup, Card, Button } from "antd-mobile";
+import styles from "./SchemeRecommendation.module.scss";
+
+interface FilterCondition {
+  id: string;
+  type: string;
+  label: string;
+  value: any;
+  operator?: string;
+}
+
+interface SchemeRecommendationProps {
+  visible: boolean;
+  onClose: () => void;
+  onApply: (conditions: FilterCondition[]) => void;
+}
+
+// 预设方案数据
+const presetSchemes = [
+  {
+    id: "high_value",
+    name: "高价值客户方案",
+    description: "针对高消费、高活跃度的优质客户",
+    conditions: [
+      { id: "consumption_1", type: "select", label: "消费能力", value: "high" },
+      { id: "frequency_1", type: "select", label: "消费频率", value: "high" },
+      {
+        id: "satisfaction_1",
+        type: "select",
+        label: "售后满意度",
+        value: "good",
+      },
+    ],
+    userCount: 1250,
+    color: "#1677ff",
+  },
+  {
+    id: "new_user",
+    name: "新用户激活方案",
+    description: "针对新注册用户，提高首次消费转化",
+    conditions: [
+      {
+        id: "age_2",
+        type: "range",
+        label: "年龄层",
+        value: { min: 18, max: 35 },
+      },
+      { id: "source_2", type: "select", label: "客户来源", value: "douyin" },
+      { id: "frequency_2", type: "select", label: "消费频率", value: "low" },
+    ],
+    userCount: 3200,
+    color: "#52c41a",
+  },
+  {
+    id: "retention",
+    name: "用户留存方案",
+    description: "针对有流失风险的客户，进行召回激活",
+    conditions: [
+      { id: "frequency_3", type: "select", label: "消费频率", value: "low" },
+      {
+        id: "satisfaction_3",
+        type: "select",
+        label: "售后满意度",
+        value: "average",
+      },
+      { id: "repurchase_3", type: "select", label: "复购行为", value: "no" },
+    ],
+    userCount: 890,
+    color: "#faad14",
+  },
+  {
+    id: "upsell",
+    name: "升单转化方案",
+    description: "针对有升单潜力的客户，推荐高价值产品",
+    conditions: [
+      {
+        id: "consumption_4",
+        type: "select",
+        label: "消费能力",
+        value: "medium",
+      },
+      { id: "frequency_4", type: "select", label: "消费频率", value: "medium" },
+      {
+        id: "category_4",
+        type: "select",
+        label: "品类偏好",
+        value: "skincare",
+      },
+    ],
+    userCount: 1560,
+    color: "#722ed1",
+  },
+  {
+    id: "price_sensitive",
+    name: "价格敏感用户方案",
+    description: "针对对价格敏感的用户，提供优惠活动",
+    conditions: [
+      {
+        id: "sensitivity_5",
+        type: "select",
+        label: "优惠敏感度",
+        value: "high",
+      },
+      { id: "consumption_5", type: "select", label: "消费能力", value: "low" },
+      { id: "frequency_5", type: "select", label: "消费频率", value: "low" },
+    ],
+    userCount: 2100,
+    color: "#eb2f96",
+  },
+  {
+    id: "loyal_customer",
+    name: "忠诚客户维护方案",
+    description: "针对高忠诚度客户，提供VIP服务",
+    conditions: [
+      { id: "frequency_6", type: "select", label: "消费频率", value: "high" },
+      { id: "repurchase_6", type: "select", label: "复购行为", value: "yes" },
+      {
+        id: "satisfaction_6",
+        type: "select",
+        label: "售后满意度",
+        value: "good",
+      },
+    ],
+    userCount: 680,
+    color: "#13c2c2",
+  },
+];
+
+const SchemeRecommendation: React.FC<SchemeRecommendationProps> = ({
+  visible,
+  onClose,
+  onApply,
+}) => {
+  const handleApplyScheme = (scheme: any) => {
+    onApply(scheme.conditions);
+  };
+
+  return (
+    <Popup
+      visible={visible}
+      onMaskClick={onClose}
+      position="bottom"
+      bodyStyle={{ height: "80vh" }}
+    >
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.title}>方案推荐</div>
+          <Button size="small" fill="none" onClick={onClose}>
+            关闭
+          </Button>
+        </div>
+
+        <div className={styles.content}>
+          <div className={styles.schemeList}>
+            {presetSchemes.map(scheme => (
+              <Card key={scheme.id} className={styles.schemeCard}>
+                <div className={styles.schemeHeader}>
+                  <div className={styles.schemeName}>{scheme.name}</div>
+                  <div
+                    className={styles.schemeBadge}
+                    style={{ backgroundColor: scheme.color }}
+                  >
+                    {scheme.userCount}人
+                  </div>
+                </div>
+
+                <div className={styles.schemeDescription}>
+                  {scheme.description}
+                </div>
+
+                <div className={styles.schemeConditions}>
+                  <div className={styles.conditionsTitle}>筛选条件：</div>
+                  <div className={styles.conditionsList}>
+                    {scheme.conditions.map((condition, index) => (
+                      <span key={index} className={styles.conditionTag}>
+                        {condition.label}: {condition.value}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+
+                <Button
+                  size="small"
+                  color="primary"
+                  fill="outline"
+                  onClick={() => handleApplyScheme(scheme)}
+                  className={styles.applyBtn}
+                >
+                  应用此方案
+                </Button>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Popup>
+  );
+};
+
+export default SchemeRecommendation;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.module.scss
new file mode 100644
index 000000000..ff7e0adbf
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.module.scss
@@ -0,0 +1,126 @@
+.container {
+  padding: 0;
+}
+
+.card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.userCount {
+  font-size: 14px;
+  color: #1677ff;
+  font-weight: 500;
+}
+
+.batchActions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+}
+
+.selectAllCheckbox {
+  font-size: 14px;
+  color: #333;
+}
+
+.removeSelectedBtn {
+  font-size: 12px;
+  padding: 4px 8px;
+  height: 28px;
+}
+
+.userList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.userItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+
+.userCheckbox {
+  margin-top: 4px;
+}
+
+.userAvatar {
+  flex-shrink: 0;
+}
+
+.userInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.userName {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.userId {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.userTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.tag {
+  background: #e6f7ff;
+  color: #1677ff;
+  padding: 2px 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.userStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.statItem {
+  font-size: 12px;
+  color: #666;
+}
+
+.removeBtn {
+  color: #ff4d4f;
+  padding: 4px;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: #fff2f0;
+  }
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.tsx
new file mode 100644
index 000000000..7e7279481
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/UserListPreview.tsx
@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { Card, Avatar, Button, Checkbox, Empty } from "antd-mobile";
+import { DeleteOutline } from "antd-mobile-icons";
+import styles from "./UserListPreview.module.scss";
+
+interface User {
+  id: string;
+  name: string;
+  avatar: string;
+  tags: string[];
+  rfmScore: number;
+  lastActive: string;
+  consumption: number;
+}
+
+interface UserListPreviewProps {
+  users: User[];
+  onRemoveUser: (userId: string) => void;
+}
+
+const UserListPreview: React.FC<UserListPreviewProps> = ({
+  users,
+  onRemoveUser,
+}) => {
+  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedUsers(users.map(user => user.id));
+    } else {
+      setSelectedUsers([]);
+    }
+  };
+
+  const handleSelectUser = (userId: string, checked: boolean) => {
+    if (checked) {
+      setSelectedUsers(prev => [...prev, userId]);
+    } else {
+      setSelectedUsers(prev => prev.filter(id => id !== userId));
+    }
+  };
+
+  const handleRemoveSelected = () => {
+    selectedUsers.forEach(userId => onRemoveUser(userId));
+    setSelectedUsers([]);
+  };
+
+  const getRfmLevel = (score: number) => {
+    if (score >= 12) return { level: "高价值", color: "#ff4d4f" };
+    if (score >= 8) return { level: "中等价值", color: "#faad14" };
+    if (score >= 4) return { level: "低价值", color: "#52c41a" };
+    return { level: "潜在客户", color: "#bfbfbf" };
+  };
+
+  if (users.length === 0) {
+    return (
+      <div className={styles.container}>
+        <Card className={styles.card}>
+          <Empty description="暂无用户数据" />
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <Card className={styles.card}>
+        <div className={styles.header}>
+          <div className={styles.title}>用户列表预览</div>
+          <div className={styles.userCount}>共 {users.length} 个用户</div>
+        </div>
+
+        {users.length > 0 && (
+          <div className={styles.batchActions}>
+            <Checkbox
+              checked={
+                selectedUsers.length === users.length && users.length > 0
+              }
+              onChange={handleSelectAll}
+              className={styles.selectAllCheckbox}
+            >
+              全选
+            </Checkbox>
+            {selectedUsers.length > 0 && (
+              <Button
+                size="small"
+                color="danger"
+                fill="outline"
+                onClick={handleRemoveSelected}
+                className={styles.removeSelectedBtn}
+              >
+                移除选中 ({selectedUsers.length})
+              </Button>
+            )}
+          </div>
+        )}
+
+        <div className={styles.userList}>
+          {users.map(user => {
+            const rfmInfo = getRfmLevel(user.rfmScore);
+
+            return (
+              <div key={user.id} className={styles.userItem}>
+                <Checkbox
+                  checked={selectedUsers.includes(user.id)}
+                  onChange={checked => handleSelectUser(user.id, checked)}
+                  className={styles.userCheckbox}
+                />
+
+                <Avatar src={user.avatar} className={styles.userAvatar} />
+
+                <div className={styles.userInfo}>
+                  <div className={styles.userName}>{user.name}</div>
+                  <div className={styles.userId}>ID: {user.id}</div>
+                  <div className={styles.userTags}>
+                    {user.tags.map((tag, index) => (
+                      <span key={index} className={styles.tag}>
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  <div className={styles.userStats}>
+                    <span className={styles.statItem}>
+                      RFM:{" "}
+                      <span style={{ color: rfmInfo.color }}>
+                        {rfmInfo.level}
+                      </span>
+                    </span>
+                    <span className={styles.statItem}>
+                      活跃: {user.lastActive}
+                    </span>
+                    <span className={styles.statItem}>
+                      消费: ¥{user.consumption}
+                    </span>
+                  </div>
+                </div>
+
+                <Button
+                  size="small"
+                  fill="none"
+                  onClick={() => onRemoveUser(user.id)}
+                  className={styles.removeBtn}
+                >
+                  <DeleteOutline />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default UserListPreview;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.module.scss
new file mode 100644
index 000000000..1712b8d45
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.module.scss
@@ -0,0 +1,49 @@
+.tabsContainer {
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.tabs {
+  :global(.adm-tabs-header) {
+    border-bottom: none;
+  }
+
+  :global(.adm-tabs-tab) {
+    font-size: 14px;
+    padding: 12px 16px;
+  }
+
+  :global(.adm-tabs-tab-active) {
+    color: #1677ff;
+    font-weight: 500;
+  }
+}
+
+.content {
+  padding: 16px;
+  min-height: calc(100vh - 200px);
+}
+
+.footer {
+  padding: 16px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.prevButton {
+  flex: 1;
+}
+
+.nextButton {
+  flex: 1;
+}
+
+.submitButton {
+  flex: 1;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx
new file mode 100644
index 000000000..e6bd5433b
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx
@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { Button } from "antd-mobile";
+import Layout from "@/components/Layout/Layout";
+import NavCommon from "@/components/NavCommon";
+import BasicInfo from "./components/BasicInfo";
+import AudienceFilter from "./components/AudienceFilter";
+import UserListPreview from "./components/UserListPreview";
+import styles from "./index.module.scss";
+import StepIndicator from "@/components/StepIndicator";
+
+const CreateTrafficPackage: React.FC = () => {
+  const [currentStep, setCurrentStep] = useState(1); // 1 基础信息 2 人群筛选 3 用户列表
+  const [formData, setFormData] = useState({
+    // 基本信息
+    name: "",
+    description: "",
+    remarks: "",
+    // 筛选条件
+    filterConditions: [],
+    // 用户列表
+    filteredUsers: [],
+  });
+
+  const steps = [
+    { id: 1, title: "basic", subtitle: "基本信息" },
+    { id: 2, title: "filter", subtitle: "人群筛选" },
+    { id: 3, title: "users", subtitle: "预览" },
+  ];
+
+  const handleBasicInfoChange = (data: any) => {
+    setFormData(prev => ({ ...prev, ...data }));
+  };
+
+  const handleFilterChange = (conditions: any[]) => {
+    setFormData(prev => ({ ...prev, filterConditions: conditions }));
+  };
+
+  const handleGenerateUsers = (users: any[]) => {
+    setFormData(prev => ({ ...prev, filteredUsers: users }));
+    setCurrentStep(3);
+  };
+
+  // 初始化模拟数据
+  React.useEffect(() => {
+    if (currentStep === 3 && formData.filteredUsers.length === 0) {
+      const mockUsers = [
+        {
+          id: "U00000001",
+          name: "张三",
+          avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=1",
+          tags: ["高价值用户", "活跃用户"],
+          rfmScore: 12,
+          lastActive: "7天内",
+          consumption: 2500,
+        },
+        {
+          id: "U00000002",
+          name: "李四",
+          avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=2",
+          tags: ["新用户", "价格敏感"],
+          rfmScore: 6,
+          lastActive: "3天内",
+          consumption: 800,
+        },
+        {
+          id: "U00000003",
+          name: "王五",
+          avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=3",
+          tags: ["复购率高", "高潜力"],
+          rfmScore: 14,
+          lastActive: "1天内",
+          consumption: 3200,
+        },
+        {
+          id: "U00000004",
+          name: "赵六",
+          avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=4",
+          tags: ["已沉睡", "流失风险"],
+          rfmScore: 3,
+          lastActive: "30天内",
+          consumption: 200,
+        },
+        {
+          id: "U00000005",
+          name: "钱七",
+          avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=5",
+          tags: ["高价值用户", "复购率高"],
+          rfmScore: 15,
+          lastActive: "2天内",
+          consumption: 4500,
+        },
+      ];
+      setFormData(prev => ({ ...prev, filteredUsers: mockUsers }));
+    }
+  }, [currentStep, formData.filteredUsers.length]);
+
+  const handleSubmit = () => {
+    // 提交逻辑
+    console.log("提交数据:", formData);
+  };
+
+  const canSubmit = formData.name && formData.filterConditions.length > 0;
+
+  const renderFooter = () => {
+    return (
+      <div className={styles.footer}>
+        <div className={styles.buttonGroup}>
+          {currentStep > 1 && (
+            <Button
+              className={styles.prevButton}
+              onClick={() => setCurrentStep(s => Math.max(1, s - 1))}
+            >
+              上一步
+            </Button>
+          )}
+          {currentStep < 3 ? (
+            <Button
+              color="primary"
+              className={styles.nextButton}
+              onClick={() => setCurrentStep(s => Math.min(3, s + 1))}
+            >
+              下一步
+            </Button>
+          ) : (
+            <Button
+              color="primary"
+              className={styles.submitButton}
+              disabled={!canSubmit}
+              onClick={handleSubmit}
+            >
+              创建流量包
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Layout
+      header={
+        <>
+          <NavCommon title="新建流量包" />
+          <StepIndicator currentStep={currentStep} steps={steps} />
+        </>
+      }
+      footer={renderFooter()}
+    >
+      <div className={styles.content}>
+        {currentStep === 1 && (
+          <BasicInfo data={formData} onChange={handleBasicInfoChange} />
+        )}
+
+        {currentStep === 2 && (
+          <AudienceFilter
+            conditions={formData.filterConditions}
+            onChange={handleFilterChange}
+            onGenerate={handleGenerateUsers}
+          />
+        )}
+
+        {currentStep === 3 && (
+          <UserListPreview
+            users={formData.filteredUsers}
+            onRemoveUser={userId => {
+              setFormData(prev => ({
+                ...prev,
+                filteredUsers: prev.filteredUsers.filter(
+                  (user: any) => user.id !== userId,
+                ),
+              }));
+            }}
+          />
+        )}
+      </div>
+    </Layout>
+  );
+};
+
+export default CreateTrafficPackage;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/info/api.ts
deleted file mode 100644
index 9b53c030a..000000000
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/api.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import request from "@/api/request";
-
-// 获取流量池列表
-export function fetchTrafficPoolList(params: {
-  page?: number;
-  pageSize?: number;
-  keyword?: string;
-}) {
-  return request("/v1/traffic/pool", params, "GET");
-}
-
-export async function fetchScenarioOptions() {
-  return request("/v1/plan/scenes", {}, "GET");
-}
-
-export async function fetchPackageOptions() {
-  return request("/v1/traffic/pool/getPackage", {}, "GET");
-}
-
-export async function addPackage(params: {
-  type: string; // 类型 1搜索 2选择用户 3文件上传
-  addPackageId?: number;
-  addStatus?: number;
-  deviceId?: string;
-  keyword?: string;
-  packageId?: number;
-  packageName?: number; // 添加的流量池名称
-  tableFile?: number;
-  taskId?: number; // 任务id j及场景获客id
-  userIds?: number[];
-  userValue?: number;
-}) {
-  return request("/v1/traffic/pool/addPackage", params, "POST");
-}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.module.scss
deleted file mode 100644
index 2fbee5e38..000000000
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.module.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.listWrap {
-  padding: 12px;
-}
-
-.cardContent {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  position: relative;
-}
-.checkbox {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.cardWrap {
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  margin-bottom: 12px;
-}
-
-.card {
-  margin-bottom: 12px;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #222;
-}
-
-.desc {
-  font-size: 13px;
-  color: #888;
-  margin: 6px 0 4px 0;
-}
-
-.count {
-  font-size: 13px;
-  color: #1677ff;
-}
-
-.pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  margin: 16px 0;
-}
-
-.pagination button {
-  background: #f5f5f5;
-  border: none;
-  border-radius: 4px;
-  padding: 4px 12px;
-  color: #1677ff;
-  cursor: pointer;
-}
-
-.pagination button:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
index 98d292314..9171337aa 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
@@ -24,3 +24,8 @@ export async function getPackage(params: {
 }): Promise<PackageList> {
   return request("/v1/traffic/pool/getPackage", params, "GET");
 }
+
+// 删除数据包
+export async function deletePackage(id: number): Promise<{ success: boolean }> {
+  return request("/v1/traffic/pool/deletePackage", { id }, "POST");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
index c0ff2a620..4d4936292 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
@@ -14,10 +14,33 @@
 }
 
 .cardBody {
-  padding: 16px;
+  padding: 16px 16px 16px 16px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
+  position: relative;
+}
+
+/* 三点菜单按钮 */
+.menuButton {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #fff;
+    border-color: #d9d9d9;
+    color: #333;
+  }
 }
 
 /* 左侧图片区域 */
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index a4b5af1d0..aa92817aa 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -4,13 +4,14 @@ import {
   SearchOutlined,
   ReloadOutlined,
   PlusOutlined,
+  MoreOutlined,
 } from "@ant-design/icons";
-import { Input, Button, Pagination, Card } from "antd";
+import { Input, Button, Pagination, Dropdown, message } from "antd";
 import styles from "./index.module.scss";
 import { Empty } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
 import NavCommon from "@/components/NavCommon";
-import { getPackage } from "./api";
+import { getPackage, deletePackage } from "./api";
 import type { Package, PackageList } from "./api";
 
 // 分组图标映射
@@ -81,6 +82,19 @@ const TrafficPoolList: React.FC = () => {
     fetchData();
   };
 
+  const handleDelete = async (id: number, name: string) => {
+    try {
+      // eslint-disable-next-line no-alert
+      if (!confirm(`确认删除数据包“${name}”吗？`)) return;
+      await deletePackage(id);
+      message.success("已删除");
+      handleRefresh();
+    } catch (e) {
+      console.error(e);
+      message.error("删除失败");
+    }
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
@@ -117,8 +131,7 @@ const TrafficPoolList: React.FC = () => {
                 size="small"
                 icon={<PlusOutlined />}
                 onClick={() => {
-                  // 新建分组逻辑
-                  console.log("新建分组");
+                  navigate("/mine/traffic-pool/create");
                 }}
               >
                 新建分组
@@ -164,64 +177,94 @@ const TrafficPoolList: React.FC = () => {
         ) : (
           <div>
             {list.map(item => (
-              <div
-                key={item.id}
-                className={styles.cardCompact}
-                onClick={() => {
-                  navigate(`/mine/traffic-pool/info/${item.id}`);
-                }}
-              >
+              <div key={item.id} className={styles.cardCompact}>
                 <div className={styles.cardBody}>
-                  {/* 左侧图片区域（优先展示 pic，缺省时使用假头像） */}
                   <div
-                    className={styles.imageBox}
-                    style={{ background: getGroupColor(item.type) }}
+                    className={styles.menuButton}
+                    onClick={e => e.stopPropagation()}
                   >
-                    {item.pic ? (
-                      <img
-                        src={item.pic}
-                        alt={item.name}
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          objectFit: "cover",
-                        }}
-                      />
-                    ) : (
-                      <span
-                        style={{
-                          fontSize: 24,
-                          fontWeight: "bold",
-                          color: "#333",
-                        }}
-                      >
-                        {getGroupIcon(item.type, item.name)}
-                      </span>
-                    )}
+                    <Dropdown
+                      menu={{
+                        items: [
+                          {
+                            key: "preview",
+                            label: "预览用户",
+                            onClick: () =>
+                              navigate(
+                                `/mine/traffic-pool/userList/${item.id}`,
+                              ),
+                          },
+                          {
+                            key: "delete",
+                            danger: true,
+                            label: "删除数据包",
+                            onClick: () => handleDelete(item.id, item.name),
+                          },
+                        ],
+                      }}
+                      trigger={["click"]}
+                    >
+                      <MoreOutlined />
+                    </Dropdown>
                   </div>
 
-                  {/* 右侧仅展示选中字段 */}
-                  <div className={styles.contentArea}>
-                    {/* 标题与人数 */}
-                    <div className={styles.titleRow}>
-                      <div className={styles.title}>{item.name}</div>
-                      <div className={styles.timeTag}>共{item.num}人</div>
+                  <div
+                    style={{ display: "flex", gap: 10 }}
+                    onClick={() =>
+                      navigate(`/mine/traffic-pool/userList/${item.id}`)
+                    }
+                  >
+                    {/* 左侧图片区域（优先展示 pic，缺省时使用假头像） */}
+                    <div
+                      className={styles.imageBox}
+                      style={{ background: getGroupColor(item.type) }}
+                    >
+                      {item.pic ? (
+                        <img
+                          src={item.pic}
+                          alt={item.name}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "cover",
+                          }}
+                        />
+                      ) : (
+                        <span
+                          style={{
+                            fontSize: 24,
+                            fontWeight: "bold",
+                            color: "#333",
+                          }}
+                        >
+                          {getGroupIcon(item.type, item.name)}
+                        </span>
+                      )}
                     </div>
 
-                    {/* RFM 汇总 */}
-                    <div className={styles.ratingRow}>
-                      <span className={styles.rating}>RFM：{item.RFM}</span>
-                      <span className={styles.sales}>
-                        R：{item.R} F：{item.F} M：{item.M}
-                      </span>
-                    </div>
+                    {/* 右侧仅展示选中字段 */}
+                    <div className={styles.contentArea}>
+                      {/* 标题与人数 */}
+                      <div className={styles.titleRow}>
+                        <div className={styles.title}>{item.name}</div>
+                        <div className={styles.timeTag}>共{item.num}人</div>
+                      </div>
 
-                    {/* 类型与创建时间 */}
-                    <div className={styles.deliveryInfo}>
-                      <span>
-                        类型: {item.type === 0 ? "自定义" : "系统分组"}
-                      </span>
-                      <span>创建:{item.createTime}</span>
+                      {/* RFM 汇总 */}
+                      <div className={styles.ratingRow}>
+                        <span className={styles.rating}>RFM：{item.RFM}</span>
+                        <span className={styles.sales}>
+                          R：{item.R} F：{item.F} M：{item.M}
+                        </span>
+                      </div>
+
+                      {/* 类型与创建时间 */}
+                      <div className={styles.deliveryInfo}>
+                        <span>
+                          类型: {item.type === 0 ? "自定义" : "系统分组"}
+                        </span>
+                        <span>创建:{item.createTime || "-"}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/api.ts
new file mode 100644
index 000000000..7d4efe7d8
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/api.ts
@@ -0,0 +1,11 @@
+import request from "@/api/request";
+
+// 获取流量包用户列表
+export function fetchTrafficPoolList(params: {
+  page?: number;
+  pageSize?: number;
+  keyword?: string;
+  packageId?: string;
+}) {
+  return request("/v1/traffic/pool/users", params, "GET");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/data.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/data.ts
similarity index 54%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/info/data.ts
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/userList/data.ts
index 65ad7f559..204547faf 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/data.ts
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/data.ts
@@ -25,27 +25,3 @@ export interface TrafficPoolUserListResponse {
   page: number;
   pageSize: number;
 }
-
-// 设备类型
-export interface DeviceOption {
-  id: string;
-  name: string;
-}
-
-// 分组类型
-export interface PackageOption {
-  id: string;
-  name: string;
-}
-
-// 用户价值类型
-export type ValueLevel = "all" | "high" | "medium" | "low";
-
-// 状态类型
-export type UserStatus = "all" | "added" | "pending" | "failed" | "duplicate";
-
-// 获客场景类型
-export interface ScenarioOption {
-  id: string;
-  name: string;
-}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/index.module.scss
new file mode 100644
index 000000000..68ecdca15
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/index.module.scss
@@ -0,0 +1,40 @@
+.listWrap {
+  padding: 16px;
+}
+
+.cardWrap {
+  margin-bottom: 12px;
+}
+
+.card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  transition: all 0.2s;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.cardContent {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 12px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.desc {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/index.tsx
similarity index 63%
rename from Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.tsx
rename to Cunkebao/src/pages/mobile/mine/traffic-pool/userList/index.tsx
index 16d2abe7b..823ccf655 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/info/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/userList/index.tsx
@@ -1,19 +1,22 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
 import Layout from "@/components/Layout/Layout";
 import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
 import { Input, Button, Pagination } from "antd";
 import styles from "./index.module.scss";
 import { Empty, Avatar } from "antd-mobile";
-import { useNavigate } from "react-router-dom";
 import NavCommon from "@/components/NavCommon";
 import { fetchTrafficPoolList } from "./api";
 import type { TrafficPoolUser } from "./data";
+
 const defaultAvatar =
   "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png";
 
-const TrafficPoolList: React.FC = () => {
+const TrafficPoolUserList: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
 
+  // 基础状态
   const [loading, setLoading] = useState(false);
   const [list, setList] = useState<TrafficPoolUser[]>([]);
   const [page, setPage] = useState(1);
@@ -21,53 +24,80 @@ const TrafficPoolList: React.FC = () => {
   const [total, setTotal] = useState(0);
   const [search, setSearch] = useState("");
 
-  const handleSearch = (value: string) => {
-    setSearch(value);
-    setPage(1);
+  // 获取列表
+  const getList = async (customParams?: any) => {
+    setLoading(true);
+    try {
+      const params: any = {
+        page,
+        pageSize,
+        keyword: search,
+        packageId: id, // 根据流量包ID筛选用户
+        ...customParams, // 允许传入自定义参数覆盖
+      };
+
+      const res = await fetchTrafficPoolList(params);
+      setList(res.list || []);
+      setTotal(res.total || 0);
+    } catch (error) {
+      // 忽略请求过于频繁的错误，避免页面崩溃
+      if (error !== "请求过于频繁，请稍后再试") {
+        console.error("获取列表失败:", error);
+      }
+    } finally {
+      setLoading(false);
+    }
   };
 
+  // 搜索防抖处理
+  const [searchInput, setSearchInput] = useState(search);
+
+  const debouncedSearch = useCallback(() => {
+    const timer = setTimeout(() => {
+      setSearch(searchInput);
+      // 搜索时重置到第一页并请求列表
+      setPage(1);
+      getList({ keyword: searchInput, page: 1 });
+    }, 500); // 500ms 防抖延迟
+
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
   useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
-      try {
-        const params = {
-          page,
-          pageSize,
-          keyword: search,
-        };
+    const cleanup = debouncedSearch();
+    return cleanup;
+  }, [debouncedSearch]);
 
-        const res = await fetchTrafficPoolList(params);
-        setList(res.list || []);
-        setTotal(res.total || 0);
-      } catch (error) {
-        console.error("获取列表失败:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const handSearch = (value: string) => {
+    setSearchInput(value);
+    debouncedSearch();
+  };
 
-    fetchData();
-  }, [page, pageSize, search]);
+  // 初始加载和参数变化时重新获取数据
+  useEffect(() => {
+    getList();
+  }, [page, pageSize, search, id]);
 
   return (
     <Layout
       loading={loading}
       header={
         <>
-          <NavCommon title="流量池用户列表" />
+          <NavCommon title="用户列表" />
+          {/* 搜索栏 */}
           <div className="search-bar">
             <div className="search-input-wrapper">
               <Input
                 placeholder="搜索用户"
-                value={search}
-                onChange={e => handleSearch(e.target.value)}
+                value={searchInput}
+                onChange={e => handSearch(e.target.value)}
                 prefix={<SearchOutlined />}
                 allowClear
                 size="large"
               />
             </div>
             <Button
-              onClick={() => setPage(1)}
+              onClick={() => getList()}
               loading={loading}
               size="large"
               icon={<ReloadOutlined />}
@@ -82,14 +112,17 @@ const TrafficPoolList: React.FC = () => {
             pageSize={pageSize}
             total={total}
             showSizeChanger={false}
-            onChange={setPage}
+            onChange={newPage => {
+              setPage(newPage);
+              getList({ page: newPage });
+            }}
           />
         </div>
       }
     >
       <div className={styles.listWrap}>
         {list.length === 0 && !loading ? (
-          <Empty description="暂无数据" />
+          <Empty description="暂无用户数据" />
         ) : (
           <div>
             {list.map(item => (
@@ -139,4 +172,4 @@ const TrafficPoolList: React.FC = () => {
   );
 };
 
-export default TrafficPoolList;
+export default TrafficPoolUserList;
diff --git a/Cunkebao/src/router/module/mine.tsx b/Cunkebao/src/router/module/mine.tsx
index bc53e19d0..9346afa6c 100644
--- a/Cunkebao/src/router/module/mine.tsx
+++ b/Cunkebao/src/router/module/mine.tsx
@@ -2,8 +2,9 @@ import Mine from "@/pages/mobile/mine/main/index";
 import Devices from "@/pages/mobile/mine/devices/index";
 import DeviceDetail from "@/pages/mobile/mine/devices/DeviceDetail";
 import TrafficPool from "@/pages/mobile/mine/traffic-pool/list/index";
-import TrafficPoolItem from "@/pages/mobile/mine/traffic-pool/info/index";
-import TrafficPoolDetail from "@/pages/mobile/mine/traffic-pool/detail/index";
+import TrafficPool2 from "@/pages/mobile/mine/traffic-pool/poolList1/index";
+import TrafficPoolUserList from "@/pages/mobile/mine/traffic-pool/userList/index";
+import CreateTrafficPackage from "@/pages/mobile/mine/traffic-pool/form/index";
 import WechatAccounts from "@/pages/mobile/mine/wechat-accounts/list/index";
 import WechatAccountDetail from "@/pages/mobile/mine/wechat-accounts/detail/index";
 import Recharge from "@/pages/mobile/mine/recharge/index";
@@ -13,7 +14,6 @@ import SecuritySetting from "@/pages/mobile/mine/setting/SecuritySetting";
 import About from "@/pages/mobile/mine/setting/About";
 import Privacy from "@/pages/mobile/mine/setting/Privacy";
 import UserSetting from "@/pages/mobile/mine/setting/UserSetting";
-
 const routes = [
   {
     path: "/mine",
@@ -36,16 +36,20 @@ const routes = [
     element: <TrafficPool />,
     auth: true,
   },
-  //流量池详情页面
   {
-    path: "/mine/traffic-pool/info/:id",
-    element: <TrafficPoolItem />,
+    path: "/mine/traffic-pool/list2",
+    element: <TrafficPool2 />,
     auth: true,
   },
-  //流量池列表详情页面
+  //新建流量包页面
   {
-    path: "/mine/traffic-pool/detail/:wxid/:userId",
-    element: <TrafficPoolDetail />,
+    path: "/mine/traffic-pool/create",
+    element: <CreateTrafficPackage />,
+    auth: true,
+  },
+  {
+    path: "/mine/traffic-pool/userList/:id",
+    element: <TrafficPoolUserList />,
     auth: true,
   },
 

From 3fbf54df9912645742af5afa16f1996109f15f33 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, 17 Oct 2025 18:22:38 +0800
Subject: [PATCH 06/19] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=EF=BC=9A=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=A7=84=E5=88=99=EF=BC=8C=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E6=8F=90=E5=8D=87=E5=8F=AF=E7=BB=B4?=
 =?UTF-8?q?=E6=8A=A4=E6=80=A7=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/mine/traffic-pool/list/index.module.scss | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
index 4d4936292..fb01dcec5 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
@@ -27,20 +27,7 @@
   right: 8px;
   top: 8px;
   z-index: 10;
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid #f0f0f0;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 14px;
-  color: #666;
   cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: #fff;
-    border-color: #d9d9d9;
-    color: #333;
-  }
 }
 
 /* 左侧图片区域 */

From a775596719f91db2eefd101b80811de8ca55ea66 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, 17 Oct 2025 18:24:50 +0800
Subject: [PATCH 07/19] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=EF=BC=9A=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=8D=A1=E7=89=87=E5=86=85=E8=BE=B9=E8=B7=9D=E5=92=8C?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E5=B8=83=E5=B1=80=E7=BE=8E=E8=A7=82=E6=80=A7?=
 =?UTF-8?q?=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/mobile/mine/traffic-pool/list/index.module.scss | 4 ++--
 Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
index fb01dcec5..c24427b2f 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
@@ -14,7 +14,7 @@
 }
 
 .cardBody {
-  padding: 16px 16px 16px 16px;
+  padding: 16px 30px 16px 16px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
@@ -25,7 +25,7 @@
 .menuButton {
   position: absolute;
   right: 8px;
-  top: 8px;
+  top: 10px;
   z-index: 10;
   cursor: pointer;
 }
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index aa92817aa..34f162129 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -209,7 +209,7 @@ const TrafficPoolList: React.FC = () => {
                   </div>
 
                   <div
-                    style={{ display: "flex", gap: 10 }}
+                    style={{ display: "flex", gap: 10, flex: 1 }}
                     onClick={() =>
                       navigate(`/mine/traffic-pool/userList/${item.id}`)
                     }

From 4df670d1c946565d8b67cd788f4e6363593d500d 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: Mon, 20 Oct 2025 15:04:41 +0800
Subject: [PATCH 08/19] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E6=B1=A0=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6=EF=BC=9A=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=A2=84=E8=AE=BE=E6=96=B9=E6=A1=88=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=94=9F=E6=88=90=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E6=8F=90=E4=BA=A4=E7=8A=B6=E6=80=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E5=92=8C=E4=BB=A3=E7=A0=81=E5=8F=AF=E7=BB=B4=E6=8A=A4?=
 =?UTF-8?q?=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/mine/traffic-pool/form/api.ts      |  57 ++++-
 .../components/AudienceFilter.module.scss     |  12 +-
 .../form/components/AudienceFilter.tsx        | 239 +++++++++---------
 .../mobile/mine/traffic-pool/form/index.tsx   |  67 ++++-
 .../pages/mobile/scenarios/plan/new/index.tsx |  31 ++-
 5 files changed, 266 insertions(+), 140 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts
index 398ab2007..781ebe281 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/api.ts
@@ -61,7 +61,62 @@ export interface PresetScheme {
 }
 
 export async function getPresetSchemes(): Promise<PresetScheme[]> {
-  return request("/v1/traffic/pool/schemes", {}, "GET");
+  // 模拟数据
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: "scheme_1",
+          name: "高价值客户方案",
+          description: "针对高消费、高活跃度的客户群体",
+          conditions: [
+            { id: "rfm_high", type: "rfm", label: "RFM评分", value: "high" },
+            {
+              id: "consumption_high",
+              type: "consumption",
+              label: "消费能力",
+              value: "high",
+            },
+          ],
+          userCount: 1250,
+          color: "#ff4d4f",
+        },
+        {
+          id: "scheme_2",
+          name: "新用户激活方案",
+          description: "针对新注册用户的激活策略",
+          conditions: [
+            { id: "new_user", type: "tag", label: "新用户", value: true },
+            {
+              id: "low_activity",
+              type: "activity",
+              label: "活跃度",
+              value: "low",
+            },
+          ],
+          userCount: 890,
+          color: "#52c41a",
+        },
+        {
+          id: "scheme_3",
+          name: "流失挽回方案",
+          description: "针对流失风险用户的挽回策略",
+          conditions: [
+            { id: "churn_risk", type: "tag", label: "流失风险", value: true },
+            {
+              id: "last_active",
+              type: "time",
+              label: "最后活跃",
+              value: "30天前",
+            },
+          ],
+          userCount: 567,
+          color: "#faad14",
+        },
+      ]);
+    }, 500);
+  });
+  // return request("/v1/traffic/pool/schemes", {}, "GET");
 }
 
 // 获取行业选项（固定筛选项）
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss
index 75c1e09ed..c1c7e292c 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.module.scss
@@ -20,13 +20,21 @@
   color: #333;
 }
 
-.schemeBtn {
+.schemeRow {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.addSchemeBtn {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   padding: 4px 8px;
-  height: 28px;
+  height: 32px;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .section {
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx
index 6cc023fe9..c126041c5 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/components/AudienceFilter.tsx
@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { Card, Button } from "antd-mobile";
 import { Select } from "antd";
-import { EditSOutline } from "antd-mobile-icons";
+import { PlusOutlined } from "@ant-design/icons";
 import CustomConditionModal from "./CustomConditionModal";
-import SchemeRecommendation from "./SchemeRecommendation";
 import ConditionList from "./ConditionList";
 import styles from "./AudienceFilter.module.scss";
-import { getIndustryOptions, IndustryOption } from "../api";
+import {
+  getIndustryOptions,
+  getPresetSchemes,
+  IndustryOption,
+  PresetScheme,
+} from "../api";
 
 interface FilterCondition {
   id: string;
@@ -19,26 +23,31 @@ interface FilterCondition {
 interface AudienceFilterProps {
   conditions: FilterCondition[];
   onChange: (conditions: FilterCondition[]) => void;
-  onGenerate: (users: any[]) => void;
 }
 
 const AudienceFilter: React.FC<AudienceFilterProps> = ({
   conditions,
   onChange,
-  onGenerate,
 }) => {
   const [showCustomModal, setShowCustomModal] = useState(false);
-  const [showSchemeModal, setShowSchemeModal] = useState(false);
   const [industryOptions, setIndustryOptions] = useState<IndustryOption[]>([]);
+  const [presetSchemes, setPresetSchemes] = useState<PresetScheme[]>([]);
   const [selectedIndustry, setSelectedIndustry] = useState<
     string | number | undefined
   >(undefined);
+  const [selectedScheme, setSelectedScheme] = useState<string | undefined>(
+    undefined,
+  );
 
-  // 加载行业选项（固定筛选项）
+  // 加载行业选项和方案列表
   useEffect(() => {
     getIndustryOptions()
       .then(res => setIndustryOptions(res || []))
       .catch(() => setIndustryOptions([]));
+
+    getPresetSchemes()
+      .then(res => setPresetSchemes(res || []))
+      .catch(() => setPresetSchemes([]));
   }, []);
 
   const handleAddCondition = (condition: FilterCondition) => {
@@ -58,15 +67,23 @@ const AudienceFilter: React.FC<AudienceFilterProps> = ({
     onChange(newConditions);
   };
 
-  const handleApplyScheme = (schemeConditions: FilterCondition[]) => {
-    onChange(schemeConditions);
-    setShowSchemeModal(false);
+  const handleSchemeChange = (schemeId: string) => {
+    setSelectedScheme(schemeId);
+    if (schemeId) {
+      // 找到选中的方案并应用其条件
+      const scheme = presetSchemes.find(s => s.id === schemeId);
+      if (scheme) {
+        onChange(scheme.conditions);
+      }
+    } else {
+      // 清空方案选择时，清空条件
+      onChange([]);
+    }
   };
 
-  const handleGenerate = () => {
-    // 模拟生成用户数据
-    const mockUsers = generateMockUsers(conditions);
-    onGenerate(mockUsers);
+  const handleAddScheme = () => {
+    // 这里可以打开添加方案的弹窗或跳转到方案管理页面
+    console.log("添加新方案");
   };
 
   return (
@@ -74,99 +91,96 @@ const AudienceFilter: React.FC<AudienceFilterProps> = ({
       <Card className={styles.card}>
         <div className={styles.header}>
           <div className={styles.title}>人群筛选</div>
-          <Button
-            size="small"
-            fill="outline"
-            onClick={() => setShowSchemeModal(true)}
-            className={styles.schemeBtn}
-          >
-            <EditSOutline />
-            方案推荐
-          </Button>
         </div>
 
-        {/* 行业筛选（固定项，接口获取选项） */}
+        {/* 方案推荐选择 */}
         <div className={styles.section}>
-          <div className={styles.sectionTitle}>行业</div>
-          <Select
-            style={{ width: "100%" }}
-            placeholder="选择行业"
-            value={selectedIndustry}
-            onChange={value => setSelectedIndustry(value)}
-            options={industryOptions.map(opt => ({
-              label: opt.label,
-              value: opt.value,
-            }))}
-            allowClear
-          />
-        </div>
-
-        {/* 标签筛选 */}
-        <div className={styles.section}>
-          <div className={styles.sectionTitle}>标签筛选</div>
-          <div className={styles.tagGrid}>
-            {[
-              { name: "高价值用户", color: "#1677ff" },
-              { name: "新用户", color: "#52c41a" },
-              { name: "活跃用户", color: "#faad14" },
-              { name: "流失风险", color: "#eb2f96" },
-              { name: "复购率高", color: "#722ed1" },
-              { name: "高潜力", color: "#eb2f96" },
-              { name: "已沉睡", color: "#bfbfbf" },
-              { name: "价格敏感", color: "#13c2c2" },
-            ].map((tag, index) => (
-              <div
-                key={index}
-                className={styles.tag}
-                style={{ backgroundColor: tag.color }}
-              >
-                {tag.name}
-              </div>
-            ))}
+          <div className={styles.sectionTitle}>方案推荐</div>
+          <div className={styles.schemeRow}>
+            <Select
+              style={{ flex: 1 }}
+              placeholder="选择预设方案"
+              value={selectedScheme}
+              onChange={handleSchemeChange}
+              options={presetSchemes.map(scheme => ({
+                label: `${scheme.name} (${scheme.userCount}人)`,
+                value: scheme.id,
+              }))}
+              allowClear
+            />
+            <Button
+              size="small"
+              fill="outline"
+              onClick={handleAddScheme}
+              className={styles.addSchemeBtn}
+            >
+              <PlusOutlined />
+              添加方案
+            </Button>
           </div>
         </div>
 
-        {/* 自定义条件列表 */}
-        <ConditionList
-          conditions={conditions}
-          onRemove={handleRemoveCondition}
-          onUpdate={handleUpdateCondition}
-        />
+        {/* 条件筛选区域 - 当未选择方案时显示 */}
+        {!selectedScheme && (
+          <>
+            {/* 行业筛选（固定项，接口获取选项） */}
+            <div className={styles.section}>
+              <div className={styles.sectionTitle}>行业</div>
+              <Select
+                style={{ width: "100%" }}
+                placeholder="选择行业"
+                value={selectedIndustry}
+                onChange={value => setSelectedIndustry(value)}
+                options={industryOptions.map(opt => ({
+                  label: opt.label,
+                  value: opt.value,
+                }))}
+                allowClear
+              />
+            </div>
 
-        {/* 添加自定义条件 */}
-        <Button
-          fill="outline"
-          onClick={() => setShowCustomModal(true)}
-          className={styles.addConditionBtn}
-        >
-          + 添加自定义条件
-        </Button>
+            {/* 标签筛选 */}
+            <div className={styles.section}>
+              <div className={styles.sectionTitle}>标签筛选</div>
+              <div className={styles.tagGrid}>
+                {[
+                  { name: "高价值用户", color: "#1677ff" },
+                  { name: "新用户", color: "#52c41a" },
+                  { name: "活跃用户", color: "#faad14" },
+                  { name: "流失风险", color: "#eb2f96" },
+                  { name: "复购率高", color: "#722ed1" },
+                  { name: "高潜力", color: "#eb2f96" },
+                  { name: "已沉睡", color: "#bfbfbf" },
+                  { name: "价格敏感", color: "#13c2c2" },
+                ].map((tag, index) => (
+                  <div
+                    key={index}
+                    className={styles.tag}
+                    style={{ backgroundColor: tag.color }}
+                  >
+                    {tag.name}
+                  </div>
+                ))}
+              </div>
+            </div>
 
-        {/* 生成按钮 */}
-        <Button
-          color="primary"
-          block
-          onClick={() => {
-            // 将行业条件合并到自定义条件，便于统一生成
-            const mergedConditions =
-              selectedIndustry !== undefined
-                ? [
-                    ...conditions,
-                    {
-                      id: `industry`,
-                      type: "select",
-                      label: "行业",
-                      value: selectedIndustry,
-                    },
-                  ]
-                : conditions;
-            const mockUsers = generateMockUsers(mergedConditions as any);
-            onGenerate(mockUsers);
-          }}
-          className={styles.generateBtn}
-        >
-          生成用户列表
-        </Button>
+            {/* 自定义条件列表 */}
+            <ConditionList
+              conditions={conditions}
+              onRemove={handleRemoveCondition}
+              onUpdate={handleUpdateCondition}
+            />
+
+            {/* 添加自定义条件 */}
+            <Button
+              fill="outline"
+              onClick={() => setShowCustomModal(true)}
+              className={styles.addConditionBtn}
+            >
+              + 添加自定义条件
+            </Button>
+          </>
+        )}
       </Card>
 
       {/* 自定义条件弹窗 */}
@@ -175,35 +189,8 @@ const AudienceFilter: React.FC<AudienceFilterProps> = ({
         onClose={() => setShowCustomModal(false)}
         onAdd={handleAddCondition}
       />
-
-      {/* 方案推荐弹窗 */}
-      <SchemeRecommendation
-        visible={showSchemeModal}
-        onClose={() => setShowSchemeModal(false)}
-        onApply={handleApplyScheme}
-      />
     </div>
   );
 };
 
-// 模拟生成用户数据
-const generateMockUsers = (conditions: FilterCondition[]) => {
-  const mockUsers = [];
-  const userCount = Math.floor(Math.random() * 1000) + 100; // 100-1100个用户
-
-  for (let i = 1; i <= userCount; i++) {
-    mockUsers.push({
-      id: `U${String(i).padStart(8, "0")}`,
-      name: `用户${i}`,
-      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`,
-      tags: ["高价值用户", "活跃用户"],
-      rfmScore: Math.floor(Math.random() * 15) + 1,
-      lastActive: "7天内",
-      consumption: Math.floor(Math.random() * 5000) + 100,
-    });
-  }
-
-  return mockUsers;
-};
-
 export default AudienceFilter;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx
index e6bd5433b..5d2c828a5 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/form/index.tsx
@@ -10,6 +10,7 @@ import StepIndicator from "@/components/StepIndicator";
 
 const CreateTrafficPackage: React.FC = () => {
   const [currentStep, setCurrentStep] = useState(1); // 1 基础信息 2 人群筛选 3 用户列表
+  const [submitting, setSubmitting] = useState(false); // 添加提交状态
   const [formData, setFormData] = useState({
     // 基本信息
     name: "",
@@ -37,7 +38,6 @@ const CreateTrafficPackage: React.FC = () => {
 
   const handleGenerateUsers = (users: any[]) => {
     setFormData(prev => ({ ...prev, filteredUsers: users }));
-    setCurrentStep(3);
   };
 
   // 初始化模拟数据
@@ -94,13 +94,53 @@ const CreateTrafficPackage: React.FC = () => {
     }
   }, [currentStep, formData.filteredUsers.length]);
 
-  const handleSubmit = () => {
-    // 提交逻辑
-    console.log("提交数据:", formData);
+  const handleSubmit = async () => {
+    // 防止重复提交
+    if (submitting) {
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      // 提交逻辑
+      console.log("提交数据:", formData);
+      // 这里可以调用实际的 API
+      // await createTrafficPackage(formData);
+
+      // 模拟 API 调用
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      // 提交成功后可以跳转或显示成功消息
+      console.log("流量包创建成功");
+    } catch (error) {
+      console.error("创建流量包失败:", error);
+    } finally {
+      setSubmitting(false);
+    }
   };
 
   const canSubmit = formData.name && formData.filterConditions.length > 0;
 
+  // 模拟生成用户数据
+  const generateMockUsers = (conditions: any[]) => {
+    const mockUsers = [];
+    const userCount = Math.floor(Math.random() * 1000) + 100; // 100-1100个用户
+
+    for (let i = 1; i <= userCount; i++) {
+      mockUsers.push({
+        id: `U${String(i).padStart(8, "0")}`,
+        name: `用户${i}`,
+        avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`,
+        tags: ["高价值用户", "活跃用户"],
+        rfmScore: Math.floor(Math.random() * 15) + 1,
+        lastActive: "7天内",
+        consumption: Math.floor(Math.random() * 5000) + 100,
+      });
+    }
+
+    return mockUsers;
+  };
+
   const renderFooter = () => {
     return (
       <div className={styles.footer}>
@@ -109,6 +149,7 @@ const CreateTrafficPackage: React.FC = () => {
             <Button
               className={styles.prevButton}
               onClick={() => setCurrentStep(s => Math.max(1, s - 1))}
+              disabled={submitting}
             >
               上一步
             </Button>
@@ -117,7 +158,17 @@ const CreateTrafficPackage: React.FC = () => {
             <Button
               color="primary"
               className={styles.nextButton}
-              onClick={() => setCurrentStep(s => Math.min(3, s + 1))}
+              onClick={() => {
+                if (currentStep === 2) {
+                  // 在第二步时生成用户列表
+                  const mockUsers = generateMockUsers(
+                    formData.filterConditions,
+                  );
+                  handleGenerateUsers(mockUsers);
+                }
+                setCurrentStep(s => Math.min(3, s + 1));
+              }}
+              disabled={submitting}
             >
               下一步
             </Button>
@@ -125,10 +176,11 @@ const CreateTrafficPackage: React.FC = () => {
             <Button
               color="primary"
               className={styles.submitButton}
-              disabled={!canSubmit}
+              disabled={!canSubmit || submitting}
+              loading={submitting}
               onClick={handleSubmit}
             >
-              创建流量包
+              {submitting ? "创建中..." : "创建流量包"}
             </Button>
           )}
         </div>
@@ -155,7 +207,6 @@ const CreateTrafficPackage: React.FC = () => {
           <AudienceFilter
             conditions={formData.filterConditions}
             onChange={handleFilterChange}
-            onGenerate={handleGenerateUsers}
           />
         )}
 
diff --git a/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx b/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx
index 949574a12..e7032d04e 100644
--- a/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx
+++ b/Cunkebao/src/pages/mobile/scenarios/plan/new/index.tsx
@@ -20,6 +20,7 @@ export default function NewPlan() {
   const router = useNavigate();
   const [currentStep, setCurrentStep] = useState(1);
   const [formData, setFormData] = useState<FormData>(defFormData);
+  const [submitting, setSubmitting] = useState(false); // 添加提交状态
 
   const [sceneList, setSceneList] = useState<any[]>([]);
   const [sceneLoading, setSceneLoading] = useState(true);
@@ -110,6 +111,12 @@ export default function NewPlan() {
   };
   // 处理保存
   const handleSave = async () => {
+    // 防止重复提交
+    if (submitting) {
+      return;
+    }
+
+    setSubmitting(true);
     try {
       if (isEdit && planId) {
         // 编辑：拼接后端需要的完整参数
@@ -140,13 +147,18 @@ export default function NewPlan() {
               ? "更新计划失败，请重试"
               : "创建计划失败，请重试",
       );
+    } finally {
+      setSubmitting(false);
     }
   };
 
   // 下一步
   const handleNext = () => {
     if (currentStep === steps.length) {
-      handleSave();
+      // 最后一步时调用保存，防止重复点击
+      if (!submitting) {
+        handleSave();
+      }
     } else {
       setCurrentStep(prev => prev + 1);
     }
@@ -186,7 +198,12 @@ export default function NewPlan() {
     return (
       <div style={{ padding: "16px", display: "flex", gap: "12px" }}>
         {currentStep > 1 && (
-          <Button onClick={handlePrev} size="large" style={{ flex: 1 }}>
+          <Button
+            onClick={handlePrev}
+            size="large"
+            style={{ flex: 1 }}
+            disabled={submitting}
+          >
             上一步
           </Button>
         )}
@@ -195,8 +212,16 @@ export default function NewPlan() {
           size="large"
           onClick={handleNext}
           style={{ flex: 1 }}
+          loading={submitting}
+          disabled={submitting}
         >
-          {currentStep === steps.length ? "完成" : "下一步"}
+          {submitting
+            ? isEdit
+              ? "更新中..."
+              : "创建中..."
+            : currentStep === steps.length
+              ? "完成"
+              : "下一步"}
         </Button>
       </div>
     );

From b6b1d581a334729336d13c5d6aac335395dfec17 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: Wed, 22 Oct 2025 10:03:25 +0800
Subject: [PATCH 09/19] 1

---
 Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index 34f162129..dbea85c80 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -276,5 +276,5 @@ const TrafficPoolList: React.FC = () => {
     </Layout>
   );
 };
-
+//EEws
 export default TrafficPoolList;

From 6a64e3854ce702a26cf1d98cd381d074b2cff9cf 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: Wed, 29 Oct 2025 17:49:51 +0800
Subject: [PATCH 10/19] Refactor Recharge component to support custom recharge
 amounts and quick selection options. Remove version package data and enhance
 payment handling with improved user feedback. Add AI knowledge management
 routes and UI elements in the workspace section.

---
 .../mobile/mine/recharge/index/index.tsx      | 374 ++++++----
 .../mobile/workspace/ai-knowledge/api 文档    | 168 +++++
 .../workspace/ai-knowledge/detail/api.ts      | 109 +++
 .../workspace/ai-knowledge/detail/data.ts     |  48 ++
 .../ai-knowledge/detail/index.module.scss     | 481 +++++++++++++
 .../workspace/ai-knowledge/detail/index.tsx   | 648 ++++++++++++++++++
 .../mobile/workspace/ai-knowledge/form/api.ts |   4 +
 .../workspace/ai-knowledge/form/data.ts       |   2 +
 .../ai-knowledge/form/index.module.scss       | 318 +++++++++
 .../workspace/ai-knowledge/form/index.tsx     | 307 +++++++++
 .../mobile/workspace/ai-knowledge/list/api.ts |  90 +++
 .../list/components/GlobalPromptModal.tsx     | 139 ++++
 .../workspace/ai-knowledge/list/data.ts       |  75 ++
 .../ai-knowledge/list/index.module.scss       | 435 ++++++++++++
 .../workspace/ai-knowledge/list/index.tsx     | 358 ++++++++++
 .../workspace/ai-knowledge/接口对接说明.md    | 183 +++++
 .../src/pages/mobile/workspace/main/index.tsx |  17 +-
 Cunkebao/src/router/module/workspace.tsx      |  24 +
 18 files changed, 3635 insertions(+), 145 deletions(-)
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/api 文档
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/data.ts
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.tsx
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/data.ts
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
 create mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md

diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
index c0a493b12..ac5ef9e51 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
@@ -44,49 +44,8 @@ const aiServices = [
   },
 ];
 
-// 版本套餐数据
-const versionPackages = [
-  {
-    id: 1,
-    name: "普通版本",
-    icon: "📦",
-    price: "免费",
-    description: "充值即可使用,包含基础AI功能",
-    features: ["基础AI服务", "标准客服支持", "基础数据统计"],
-    status: "当前使用中",
-    buttonText: null,
-    tagColor: undefined,
-  },
-  {
-    id: 2,
-    name: "标准版本",
-    icon: "👑",
-    price: "¥98/月",
-    tag: "推荐",
-    tagColor: "blue",
-    description: "适合中小企业,AI功能更丰富",
-    features: ["高级AI服务", "优先客服支持", "详细数据分析", "API接口访问"],
-    status: null,
-    buttonText: "立即升级",
-  },
-  {
-    id: 3,
-    name: "企业版本",
-    icon: "🏢",
-    price: "¥1980/月",
-    description: "适合大型企业,提供专属服务",
-    features: [
-      "专属AI服务",
-      "24小时专属客服",
-      "高级数据分析",
-      "API接口访问",
-      "专属技术支持",
-    ],
-    status: null,
-    buttonText: "立即升级",
-    tagColor: undefined,
-  },
-];
+// 快捷金额选项（可选）
+const quickAmounts = [50, 100, 200, 500, 1000, 2000];
 
 const Recharge: React.FC = () => {
   const navigate = useNavigate();
@@ -96,6 +55,7 @@ const Recharge: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [activeTab, setActiveTab] = useState("account");
   const [taocanList, setTaocanList] = useState<any[]>([]);
+  const [customAmount, setCustomAmount] = useState(""); // 自定义充值金额
 
   // 加载套餐列表
   useEffect(() => {
@@ -113,8 +73,68 @@ const Recharge: React.FC = () => {
     loadTaocanList();
   }, []);
 
-  // 充值操作
-  const handleRecharge = async () => {
+  // 账户充值操作（自定义金额）
+  const handleCustomRecharge = async () => {
+    const amount = parseFloat(customAmount);
+    if (!customAmount || isNaN(amount) || amount <= 0) {
+      Toast.show({ content: "请输入有效的充值金额", position: "top" });
+      return;
+    }
+    if (amount < 1) {
+      Toast.show({ content: "充值金额不能小于1元", position: "top" });
+      return;
+    }
+    if (amount > 100000) {
+      Toast.show({ content: "单次充值金额不能超过10万元", position: "top" });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await pay({
+        id: "", // 自定义充值不需要套餐ID
+        price: Math.round(amount * 100), // 转换为分
+      });
+      // 假设返回的是二维码链接，存储在res中
+      if (res) {
+        // 显示二维码弹窗
+        Dialog.show({
+          content: (
+            <div style={{ textAlign: "center", padding: "20px" }}>
+              <div
+                style={{
+                  marginBottom: "16px",
+                  fontSize: "16px",
+                  fontWeight: "500",
+                }}
+              >
+                请使用微信扫码支付
+              </div>
+              <img
+                src={res.code_url as any}
+                alt="支付二维码"
+                style={{ width: "250px", height: "250px", margin: "0 auto" }}
+              />
+              <div
+                style={{ marginTop: "16px", color: "#666", fontSize: "14px" }}
+              >
+                支付金额: ¥{amount.toFixed(2)}
+              </div>
+            </div>
+          ),
+          closeOnMaskClick: true,
+        });
+      }
+    } catch (error) {
+      console.error("支付失败:", error);
+      Toast.show({ content: "支付失败，请重试", position: "top" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 版本套餐充值操作
+  const handlePackageRecharge = async () => {
     if (!selected) {
       Toast.show({ content: "请选择充值套餐", position: "top" });
       return;
@@ -177,98 +197,121 @@ const Recharge: React.FC = () => {
           </div>
         </div>
       </Card>
+
       <Card className={style["quick-card"]}>
-        <div className={style["quick-title"]}>选择套餐</div>
-        <div className={style["quick-list"]}>
-          {taocanList.map(item => (
-            <Button
-              key={item.id}
-              color={selected?.id === item.id ? "primary" : "default"}
-              className={
-                selected?.id === item.id
-                  ? style["quick-btn-active"]
-                  : style["quick-btn"]
-              }
-              onClick={() => setSelected(item)}
-            >
-              <div>
-                <div>￥{item.price / 100}</div>
-                {item.discount && (
-                  <div style={{ fontSize: "12px", color: "#999" }}>
-                    {item.discount}折
-                  </div>
-                )}
-              </div>
-            </Button>
-          ))}
+        <div className={style["quick-title"]}>充值金额</div>
+
+        {/* 快捷金额选择 */}
+        <div style={{ marginBottom: "16px" }}>
+          <div style={{ marginBottom: "8px", fontSize: "14px", color: "#666" }}>
+            快捷选择
+          </div>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
+            {quickAmounts.map(amount => (
+              <Button
+                key={amount}
+                color={
+                  customAmount === amount.toString() ? "primary" : "default"
+                }
+                onClick={() => setCustomAmount(amount.toString())}
+                style={{ flex: "0 0 calc(33.333% - 6px)" }}
+              >
+                ¥{amount}
+              </Button>
+            ))}
+          </div>
         </div>
-        {selected && (
+
+        {/* 自定义金额输入 */}
+        <div style={{ marginBottom: "16px" }}>
+          <div style={{ marginBottom: "8px", fontSize: "14px", color: "#666" }}>
+            或输入自定义金额（元）
+          </div>
+          <input
+            type="number"
+            placeholder="请输入充值金额"
+            value={customAmount}
+            onChange={e => setCustomAmount(e.target.value)}
+            style={{
+              width: "100%",
+              padding: "12px 16px",
+              border: "1px solid #e5e5e5",
+              borderRadius: "8px",
+              fontSize: "16px",
+              outline: "none",
+            }}
+            min="1"
+            max="100000"
+            step="0.01"
+          />
           <div
             style={{
-              marginBottom: "12px",
-              padding: "12px",
-              background: "#f5f5f5",
-              borderRadius: "8px",
+              marginTop: "8px",
+              fontSize: "12px",
+              color: "#999",
+              lineHeight: "1.5",
             }}
           >
-            <div style={{ marginBottom: "6px" }}>
-              <span style={{ fontWeight: "500" }}>{selected.name}</span>
-              {selected.isRecommend === 1 && (
-                <span
-                  style={{
-                    marginLeft: "8px",
-                    fontSize: "12px",
-                    color: "#1890ff",
-                  }}
-                >
-                  推荐
-                </span>
-              )}
-              {selected.isHot === 1 && (
-                <span
-                  style={{
-                    marginLeft: "8px",
-                    fontSize: "12px",
-                    color: "#ff4d4f",
-                  }}
-                >
-                  热门
-                </span>
-              )}
-            </div>
-            <div style={{ fontSize: "14px", color: "#666" }}>
-              包含 {selected.tokens} Tokens
-            </div>
-            {selected.originalPrice && (
-              <div
+            • 最低充值金额：1元
+            <br />
+            • 单次充值上限：100,000元
+            <br />• 支持微信支付
+          </div>
+        </div>
+
+        {customAmount && parseFloat(customAmount) > 0 && (
+          <div
+            style={{
+              marginBottom: "16px",
+              padding: "12px",
+              background: "#e6f7ff",
+              borderRadius: "8px",
+              border: "1px solid #91d5ff",
+            }}
+          >
+            <div
+              style={{ fontSize: "14px", color: "#333", marginBottom: "4px" }}
+            >
+              充值金额：
+              <span
                 style={{
-                  fontSize: "12px",
-                  color: "#999",
-                  textDecoration: "line-through",
+                  fontSize: "20px",
+                  fontWeight: "600",
+                  color: "#1890ff",
                 }}
               >
-                原价: ¥{selected.originalPrice / 100}
-              </div>
-            )}
+                ¥{parseFloat(customAmount).toFixed(2)}
+              </span>
+            </div>
+            <div style={{ fontSize: "12px", color: "#666" }}>
+              到账金额：¥{parseFloat(customAmount).toFixed(2)}
+            </div>
           </div>
         )}
+
         <Button
           block
           color="primary"
           size="large"
           className={style["recharge-main-btn"]}
           loading={loading}
-          onClick={handleRecharge}
+          onClick={handleCustomRecharge}
+          disabled={!customAmount || parseFloat(customAmount) <= 0}
         >
           立即充值
         </Button>
       </Card>
+
       <Card className={style["desc-card"]}>
-        <div className={style["desc-title"]}>服务消耗</div>
+        <div className={style["desc-title"]}>充值说明</div>
         <div className={style["desc-text"]}>
-          使用以下服务将从余额中扣除相应费用。
+          • 充值金额实时到账，可用于购买AI服务和版本套餐
+          <br />
+          • 使用AI服务将从余额中扣除相应费用
+          <br />• 余额支持退款，详情请联系客服
         </div>
       </Card>
+
       {balance < 10 && (
         <Card className={style["warn-card"]}>
           <div className={style["warn-content"]}>
@@ -349,63 +392,106 @@ const Recharge: React.FC = () => {
     <div className={style["tab-content"]}>
       <div className={style["version-header"]}>
         <CrownOutlined className={style["version-icon"]} />
-        <span>存客宝版本套餐</span>
+        <span>充值套餐</span>
       </div>
       <div className={style["version-description"]}>
-        选择适合的版本,享受不同级别的AI服务
+        选择合适的充值套餐，享受更多优惠
       </div>
 
       <div className={style["version-packages"]}>
-        {versionPackages.map(pkg => (
+        {taocanList.map(pkg => (
           <Card key={pkg.id} className={style["version-card"]}>
             <div className={style["package-header"]}>
               <div className={style["package-info"]}>
-                <div className={style["package-icon"]}>{pkg.icon}</div>
+                <div className={style["package-icon"]}>💰</div>
                 <div className={style["package-details"]}>
                   <div className={style["package-name"]}>
                     {pkg.name}
-                    {pkg.tag && (
+                    {pkg.isRecommend === 1 && (
                       <span
-                        className={`${style["package-tag"]} ${style[`tag-${pkg.tagColor || "blue"}`]}`}
+                        className={`${style["package-tag"]} ${style["tag-blue"]}`}
                       >
-                        {pkg.tag}
+                        推荐
+                      </span>
+                    )}
+                    {pkg.isHot === 1 && (
+                      <span
+                        className={`${style["package-tag"]} ${style["tag-red"]}`}
+                      >
+                        热门
                       </span>
                     )}
                   </div>
-                  <div className={style["package-price"]}>{pkg.price}</div>
+                  <div className={style["package-price"]}>
+                    ¥{pkg.price / 100}
+                  </div>
                 </div>
               </div>
             </div>
-            <div className={style["package-description"]}>
-              {pkg.description}
-            </div>
+            {pkg.description && (
+              <div className={style["package-description"]}>
+                {pkg.description}
+              </div>
+            )}
             <div className={style["package-features"]}>
-              <div className={style["features-title"]}>包含功能:</div>
-              {pkg.features.map((feature, index) => (
-                <div key={index} className={style["feature-item"]}>
-                  <span className={style["feature-check"]}>✓</span>
-                  {feature}
+              <div className={style["features-title"]}>套餐内容:</div>
+              <div className={style["feature-item"]}>
+                <span className={style["feature-check"]}>✓</span>
+                包含 {pkg.tokens} Tokens
+              </div>
+              {pkg.originalPrice && (
+                <div
+                  style={{
+                    fontSize: "12px",
+                    color: "#999",
+                    textDecoration: "line-through",
+                    marginTop: "4px",
+                  }}
+                >
+                  原价: ¥{pkg.originalPrice / 100}
                 </div>
-              ))}
+              )}
             </div>
-            {pkg.status && (
-              <div className={style["package-status"]}>{pkg.status}</div>
-            )}
-            {pkg.buttonText && (
-              <Button
-                block
-                color="primary"
-                className={style["upgrade-btn"]}
-                onClick={() => {
-                  Toast.show({ content: "升级功能开发中", position: "top" });
-                }}
-              >
-                {pkg.buttonText}
-              </Button>
-            )}
+            <Button
+              block
+              color={selected?.id === pkg.id ? "primary" : "default"}
+              className={
+                selected?.id === pkg.id
+                  ? style["upgrade-btn-active"]
+                  : style["upgrade-btn"]
+              }
+              onClick={() => setSelected(pkg)}
+            >
+              {selected?.id === pkg.id ? "已选择" : "选择套餐"}
+            </Button>
           </Card>
         ))}
       </div>
+
+      {selected && (
+        <div
+          style={{
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            padding: "16px",
+            background: "#fff",
+            borderTop: "1px solid #f0f0f0",
+            boxShadow: "0 -2px 8px rgba(0,0,0,0.08)",
+          }}
+        >
+          <Button
+            block
+            color="primary"
+            size="large"
+            loading={loading}
+            onClick={handlePackageRecharge}
+          >
+            立即购买 ¥{selected.price / 100}
+          </Button>
+        </div>
+      )}
     </div>
   );
 
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/api 文档 b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/api 文档
new file mode 100644
index 000000000..1659a0c3c
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/api 文档	
@@ -0,0 +1,168 @@
+初始化AI功能（每次都得执行）
+	GET /v1/knowledge/init
+
+
+
+
+发布并应用AI工具（修改知识库需要重新发布）
+	GET /v1/knowledge/release
+	传参：
+	{
+		id:number
+	}
+
+	返回参数：
+	{
+        "id": 1,
+        "companyId": 2130,
+        "userId": 128,
+        "config": {
+            "name": "魔兽世界",
+            "model_id": "1737521813",
+            "prompt_info": "# 角色\r\n你是一位全能知识客服，作为专业的客服智能体，具备全面的知识储备，能够回答用户提出的各类问题。在回答问题前，会仔细查阅知识库内容，并且始终严格遵守中国法律法规。\r\n\r\n## 技能\r\n### 技能 1: 回答用户问题\r\n1. 当用户提出问题时，首先在知识库中进行搜索查找相关信息。\r\n2. 依据知识库中的内容，为用户提供准确、清晰、完整的回答。\r\n                \r\n## 限制\r\n- 仅依据知识库内容回答问题，对于知识库中没有的信息，如实告知用户无法回答。\r\n- 回答必须严格遵循中国法律法规，不得出现任何违法违规内容。\r\n- 回答需简洁明了，避免冗长复杂的表述。"
+        },
+        "createTime": "2025-10-24 16:55:08",
+        "updateTime": "2025-10-24 16:56:28",
+        "isRelease": 1,
+        "releaseTime": 1761296188,
+        "botId": "7564707767488610345",
+        "datasetId": "7564708881499619366"
+    }
+
+
+
+知识库类型 - 列表
+	GET /v1/knowledge/typeList
+	传参：
+	{
+		page:number
+		limit:number
+	}
+	返回参数：
+	"total": 5,
+        "per_page": 20,
+        "current_page": 1,
+        "last_page": 1,
+        "data": [
+            {
+                "id": 1,
+                "type": 0,
+                "name": "产品介绍库",
+                "description": "包含所有产品相关的介绍文档、图片和视频资料",
+                "label": [
+                    "产品",
+                    "营销"
+                ],
+                "prompt": null,
+                "companyId": 0,
+                "userId": 0,
+                "createTime": null,
+                "updateTime": null,
+                "isDel": 0,
+                "delTime": 0
+            },
+
+        ]
+
+
+知识库类型 - 添加
+	POST /v1/knowledge/addType
+	传参：
+	{
+		name:string
+		description:string
+		label:string[]
+		prompt:string
+	}
+
+
+知识库类型 - 编辑
+	POST /v1/knowledge/editType
+	传参：
+	{
+		id：number
+		name:string
+		description:string
+		label:string[]
+		prompt:string
+	}
+
+
+知识库类型 - 删除
+	DELETE /v1/knowledge/deleteType
+	传参：
+	{
+		id:number
+	}
+
+
+知识库 - 列表
+	GET /v1/knowledge/getList
+	传参：
+	{
+		name:number
+		typeId:number
+		label:string[]
+		fileUrl:string
+	}
+	返回参数：
+	{
+        "total": 1,
+        "per_page": 20,
+        "current_page": 1,
+        "last_page": 1,
+        "data": [
+            {
+                "id": 1,
+                "typeId": 1,
+                "name": "存客宝项目介绍(面向开发人员).docx",
+                "label": [
+                    "1231",
+                    "3453"
+                ],
+                "companyId": 2130,
+                "userId": 128,
+                "createTime": 1761296164,
+                "updateTime": 1761296165,
+                "isDel": 0,
+                "delTime": 0,
+                "documentId": "7564706328503189558",
+                "fileUrl": "http://karuosiyujzk.oss-cn-shenzhen.aliyuncs.com/2025/10/22/9de59fc8723f10973ade586650dfb235.docx",
+                "type": {
+                    "id": 1,
+                    "type": 0,
+                    "name": "产品介绍库",
+                    "description": "包含所有产品相关的介绍文档、图片和视频资料",
+                    "label": [
+                        "产品",
+                        "营销"
+                    ],
+                    "prompt": null,
+                    "companyId": 0,
+                    "userId": 0,
+                    "createTime": null,
+                    "updateTime": null,
+                    "isDel": 0,
+                    "delTime": 0
+                }
+            }
+        ]
+    }
+
+
+知识库 - 添加
+	POST /v1/knowledge/add
+	传参：
+	{
+		name:number
+		typeId:number
+		label:string[]
+		fileUrl:string
+	}
+
+知识库 - 删除
+	DELETE /v1/knowledge/delete
+	传参：
+	{
+		id:number
+	}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/api.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/api.ts
new file mode 100644
index 000000000..aecda9a04
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/api.ts
@@ -0,0 +1,109 @@
+import request from "@/api/request";
+import type {
+  KnowledgeBaseDetailResponse,
+  MaterialListResponse,
+  CallerListResponse,
+} from "./data";
+
+// 获取知识库类型详情（复用列表接口）
+export function getKnowledgeBaseDetail(
+  id: number,
+): Promise<KnowledgeBaseDetailResponse> {
+  // 接口文档中没有单独的详情接口，通过列表接口获取
+  return request("/v1/knowledge/typeList", { page: 1, limit: 100 }, "GET").then(
+    (res: any) => {
+      const item = res.data?.find((item: any) => item.id === id);
+      if (!item) {
+        throw new Error("知识库不存在");
+      }
+      // 转换数据格式
+      return {
+        ...item,
+        tags: item.label || [],
+        useIndependentPrompt: !!item.prompt,
+        independentPrompt: item.prompt || "",
+        materials: [], // 需要单独获取
+        callers: [], // 暂无接口
+      };
+    },
+  );
+}
+
+// 获取知识库素材列表（对应接口的 knowledge/getList）
+export function getMaterialList(params: {
+  knowledgeBaseId: number;
+  page?: number;
+  limit?: number;
+  name?: string;
+  label?: string[];
+}): Promise<MaterialListResponse> {
+  return request(
+    "/v1/knowledge/getList",
+    {
+      typeId: params.knowledgeBaseId,
+      name: params.name,
+      label: params.label,
+      page: params.page || 1,
+      limit: params.limit || 20,
+    },
+    "GET",
+  ).then((res: any) => ({
+    list: res.data || [],
+    total: res.total || 0,
+  }));
+}
+
+// 添加素材
+export function uploadMaterial(data: {
+  typeId: number;
+  name: string;
+  label: string[];
+  fileUrl: string;
+}): Promise<any> {
+  return request("/v1/knowledge/add", data, "POST");
+}
+
+// 删除素材
+export function deleteMaterial(id: number): Promise<any> {
+  return request("/v1/knowledge/delete", { id }, "DELETE");
+}
+
+// 获取调用者列表（接口未提供）
+export function getCallerList(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  params: {
+    knowledgeBaseId: number;
+    page?: number;
+    limit?: number;
+  },
+): Promise<CallerListResponse> {
+  // 注意：实际接口未提供，需要后端补充
+  console.warn("getCallerList 接口未提供");
+  return Promise.resolve({
+    list: [],
+    total: 0,
+  });
+}
+
+// 更新知识库配置（使用编辑接口）
+export function updateKnowledgeBaseConfig(data: {
+  id: number;
+  name?: string;
+  description?: string;
+  label?: string[];
+  aiCallEnabled?: boolean;
+  useIndependentPrompt?: boolean;
+  independentPrompt?: string;
+}): Promise<any> {
+  return request(
+    "/v1/knowledge/editType",
+    {
+      id: data.id,
+      name: data.name || "",
+      description: data.description || "",
+      label: data.label || [],
+      prompt: data.useIndependentPrompt ? data.independentPrompt || "" : "",
+    },
+    "POST",
+  );
+}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts
new file mode 100644
index 000000000..b477d105d
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts
@@ -0,0 +1,48 @@
+// AI知识库详情相关类型定义
+import type { KnowledgeBase, Caller } from "../list/data";
+
+export type { KnowledgeBase, Caller };
+
+// 素材类型（对应接口的 knowledge）
+export interface Material {
+  id: number;
+  typeId: number; // 知识库类型ID
+  name: string; // 文件名
+  label: string[]; // 标签
+  companyId: number;
+  userId: number;
+  createTime: number;
+  updateTime: number;
+  isDel: number;
+  delTime: number;
+  documentId: string; // 文档ID
+  fileUrl: string; // 文件URL
+  type?: KnowledgeBase; // 关联的知识库类型信息
+  // 前端扩展字段
+  fileName?: string; // 映射自 name
+  fileSize?: number; // 文件大小（前端计算）
+  fileType?: string; // 文件类型（从 name 提取）
+  filePath?: string; // 映射自 fileUrl
+  tags?: string[]; // 映射自 label
+  uploadTime?: string; // 映射自 createTime
+  uploaderId?: number; // 映射自 userId
+  uploaderName?: string;
+}
+
+// 知识库详情响应
+export interface KnowledgeBaseDetailResponse extends KnowledgeBase {
+  materials: Material[];
+  callers: Caller[];
+}
+
+// 素材列表响应
+export interface MaterialListResponse {
+  list: Material[];
+  total: number;
+}
+
+// 调用者列表响应
+export interface CallerListResponse {
+  list: Caller[];
+  total: number;
+}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss
new file mode 100644
index 000000000..ed1fbafa1
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss
@@ -0,0 +1,481 @@
+// 详情页容器
+.detailPage {
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+// Tab容器
+.tabContainer {
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.tabs {
+  display: flex;
+  padding: 0 16px;
+}
+
+.tab {
+  flex: 1;
+  padding: 14px 0;
+  text-align: center;
+  font-size: 15px;
+  color: #666;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: none;
+  border: none;
+  outline: none;
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.tabActive {
+  color: #1890ff;
+  font-weight: 600;
+  border-bottom-color: #1890ff;
+}
+
+// 知识库信息卡片
+.infoCard {
+  background: #fff;
+  margin: 12px 16px;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.infoHeader {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.infoIcon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 28px;
+  flex-shrink: 0;
+}
+
+.infoContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.infoName {
+  font-size: 18px;
+  font-weight: 600;
+  color: #222;
+  margin-bottom: 6px;
+}
+
+.infoDescription {
+  font-size: 13px;
+  color: #888;
+  line-height: 1.5;
+}
+
+.infoStats {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-top: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+}
+
+.statItem {
+  flex: 1;
+  text-align: center;
+}
+
+.statValue {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.statValueSuccess {
+  color: #52c41a;
+}
+
+.statLabel {
+  font-size: 12px;
+  color: #888;
+}
+
+.infoTags {
+  margin-bottom: 16px;
+}
+
+.tagTitle {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag {
+  padding: 4px 12px;
+  border-radius: 10px;
+  font-size: 12px;
+  background: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+  border: 1px solid rgba(24, 144, 255, 0.2);
+}
+
+// 配置区域
+.configSection {
+  margin-bottom: 16px;
+}
+
+.configItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.configLabel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #333;
+}
+
+.configIcon {
+  font-size: 16px;
+  color: #1890ff;
+}
+
+.configDescription {
+  font-size: 12px;
+  color: #888;
+  margin-top: 4px;
+}
+
+// 功能说明列表
+.featureList {
+  background: #f9f9f9;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.featureItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.featureIcon {
+  color: #52c41a;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+// 调用者名单
+.callerSection {
+  margin-top: 16px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.sectionCount {
+  font-size: 13px;
+  color: #888;
+  font-weight: normal;
+}
+
+.callerList {
+  background: #f9f9f9;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.callerItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  background: #fff;
+  border-radius: 6px;
+  margin-bottom: 6px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.callerAvatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.callerInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.callerName {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 2px;
+}
+
+.callerRole {
+  font-size: 12px;
+  color: #888;
+}
+
+.callerTime {
+  font-size: 11px;
+  color: #999;
+  white-space: nowrap;
+}
+
+// 素材列表
+.materialSection {
+  padding: 12px 16px;
+}
+
+.uploadButton {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.materialList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.materialItem {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid #ececec;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.materialIcon {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.fileIcon {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+  color: #fff;
+}
+
+.videoIcon {
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  color: #fff;
+}
+
+.docIcon {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: #fff;
+}
+
+.materialContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.materialHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.materialName {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.materialMenu {
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  padding: 2px;
+  flex-shrink: 0;
+}
+
+.materialMeta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: #888;
+}
+
+.materialSize {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.materialDate {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.materialTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.materialTag {
+  padding: 2px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  background: rgba(0, 0, 0, 0.05);
+  color: #666;
+}
+
+// 底部按钮组
+.bottomActions {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+}
+
+.actionButton {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  background: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.editButton {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+
+.deleteButton {
+  color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+
+// 空状态
+.empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: #bbb;
+}
+
+.emptyIcon {
+  font-size: 64px;
+  color: #d9d9d9;
+  margin-bottom: 16px;
+}
+
+.emptyText {
+  font-size: 14px;
+  color: #999;
+}
+
+// 编辑提示词弹窗
+.promptEditModal {
+  .promptTextarea {
+    width: 100%;
+    min-height: 200px;
+    padding: 12px;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 1.6;
+    resize: vertical;
+    font-family: inherit;
+
+    &:focus {
+      outline: none;
+      border-color: #1890ff;
+    }
+  }
+
+  .promptHint {
+    font-size: 12px;
+    color: #888;
+    margin-top: 8px;
+    line-height: 1.5;
+  }
+}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
new file mode 100644
index 000000000..4d2705ed5
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
@@ -0,0 +1,648 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Button,
+  Switch,
+  message,
+  Spin,
+  Dropdown,
+  Modal,
+  Input,
+  Upload,
+} from "antd";
+import {
+  BookOutlined,
+  CheckCircleOutlined,
+  UserOutlined,
+  UploadOutlined,
+  FileOutlined,
+  VideoCameraOutlined,
+  FileTextOutlined,
+  MoreOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SettingOutlined,
+  ApiOutlined,
+  BulbOutlined,
+  CalendarOutlined,
+  DatabaseOutlined,
+} from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
+import NavCommon from "@/components/NavCommon";
+import style from "./index.module.scss";
+import {
+  getKnowledgeBaseDetail,
+  getMaterialList,
+  deleteMaterial,
+  updateKnowledgeBaseConfig,
+  uploadMaterial,
+} from "./api";
+import { deleteKnowledgeBase } from "../list/api";
+import type { KnowledgeBase, Material, Caller } from "./data";
+
+type TabType = "info" | "materials";
+
+const AIKnowledgeDetail: React.FC = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const [activeTab, setActiveTab] = useState<TabType>("info");
+  const [loading, setLoading] = useState(false);
+  const [knowledgeBase, setKnowledgeBase] = useState<KnowledgeBase | null>(
+    null,
+  );
+  const [materials, setMaterials] = useState<Material[]>([]);
+  const [callers, setCallers] = useState<Caller[]>([]);
+  const [promptEditVisible, setPromptEditVisible] = useState(false);
+  const [independentPrompt, setIndependentPrompt] = useState("");
+
+  useEffect(() => {
+    if (id) {
+      fetchDetail();
+    }
+  }, [id]);
+
+  const fetchDetail = async () => {
+    if (!id) return;
+    setLoading(true);
+    try {
+      const detail = await getKnowledgeBaseDetail(Number(id));
+      setKnowledgeBase(detail);
+      setCallers(detail.callers || []);
+      setIndependentPrompt(detail.independentPrompt || "");
+
+      // 获取素材列表
+      const materialRes = await getMaterialList({
+        knowledgeBaseId: Number(id),
+        page: 1,
+        limit: 100,
+      });
+
+      // 转换素材数据格式
+      const transformedMaterials = (materialRes.list || []).map(
+        (item: any) => ({
+          ...item,
+          fileName: item.name,
+          tags: item.label || [],
+          filePath: item.fileUrl,
+          uploadTime: item.createTime
+            ? new Date(item.createTime * 1000).toLocaleDateString("zh-CN")
+            : "-",
+          uploaderId: item.userId,
+          fileType: item.name?.split(".").pop() || "file",
+          fileSize: 0, // 接口未返回，需要前端计算或后端补充
+        }),
+      );
+
+      setMaterials(transformedMaterials);
+
+      // 更新知识库的素材数量
+      if (detail) {
+        setKnowledgeBase({
+          ...detail,
+          materialCount: transformedMaterials.length,
+        });
+      }
+    } catch (error) {
+      message.error("获取详情失败");
+      navigate(-1);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAICallToggle = async (checked: boolean) => {
+    if (!id || !knowledgeBase) return;
+
+    // 系统预设不允许修改
+    if (knowledgeBase.type === 0) {
+      message.warning("系统预设知识库不可修改");
+      return;
+    }
+
+    try {
+      await updateKnowledgeBaseConfig({
+        id: Number(id),
+        name: knowledgeBase.name,
+        description: knowledgeBase.description,
+        label: knowledgeBase.tags || knowledgeBase.label || [],
+        aiCallEnabled: checked,
+        useIndependentPrompt: knowledgeBase.useIndependentPrompt,
+        independentPrompt: knowledgeBase.independentPrompt || "",
+      });
+      message.success(checked ? "已启用AI调用" : "已关闭AI调用");
+      setKnowledgeBase(prev =>
+        prev ? { ...prev, aiCallEnabled: checked } : null,
+      );
+    } catch (error) {
+      message.error("操作失败");
+    }
+  };
+
+  const handleIndependentPromptToggle = async (checked: boolean) => {
+    if (!id || !knowledgeBase) return;
+
+    // 系统预设不允许修改
+    if (knowledgeBase.type === 0) {
+      message.warning("系统预设知识库不可修改");
+      return;
+    }
+
+    if (checked) {
+      // 启用时打开编辑弹窗
+      setPromptEditVisible(true);
+    } else {
+      // 禁用时直接更新
+      try {
+        await updateKnowledgeBaseConfig({
+          id: Number(id),
+          name: knowledgeBase.name,
+          description: knowledgeBase.description,
+          label: knowledgeBase.tags || knowledgeBase.label || [],
+          useIndependentPrompt: false,
+          independentPrompt: "",
+        });
+        message.success("已关闭独立提示词");
+        setKnowledgeBase(prev =>
+          prev
+            ? {
+                ...prev,
+                useIndependentPrompt: false,
+                independentPrompt: "",
+                prompt: null,
+              }
+            : null,
+        );
+      } catch (error) {
+        message.error("操作失败");
+      }
+    }
+  };
+
+  const handlePromptSave = async () => {
+    if (!id || !knowledgeBase) return;
+    if (!independentPrompt.trim()) {
+      message.error("请输入提示词内容");
+      return;
+    }
+
+    try {
+      await updateKnowledgeBaseConfig({
+        id: Number(id),
+        name: knowledgeBase.name,
+        description: knowledgeBase.description,
+        label: knowledgeBase.tags || knowledgeBase.label || [],
+        useIndependentPrompt: true,
+        independentPrompt: independentPrompt.trim(),
+      });
+      message.success("保存成功");
+      setKnowledgeBase(prev =>
+        prev
+          ? {
+              ...prev,
+              useIndependentPrompt: true,
+              independentPrompt: independentPrompt.trim(),
+              prompt: independentPrompt.trim(),
+            }
+          : null,
+      );
+      setPromptEditVisible(false);
+    } catch (error) {
+      message.error("保存失败");
+    }
+  };
+
+  const handleDeleteKnowledge = async () => {
+    if (!id || !knowledgeBase) return;
+
+    // 系统预设不允许删除
+    if (knowledgeBase.type === 0) {
+      message.warning("系统预设知识库不可删除");
+      return;
+    }
+
+    Modal.confirm({
+      title: "确认删除",
+      content: "删除后数据无法恢复，确定要删除该知识库吗？",
+      okText: "确定",
+      cancelText: "取消",
+      okButtonProps: { danger: true },
+      onOk: async () => {
+        try {
+          await deleteKnowledgeBase(Number(id));
+          message.success("删除成功");
+          navigate(-1);
+        } catch (error) {
+          message.error("删除失败");
+        }
+      },
+    });
+  };
+
+  const handleDeleteMaterial = async (materialId: number) => {
+    Modal.confirm({
+      title: "确认删除",
+      content: "确定要删除该素材吗？",
+      okText: "确定",
+      cancelText: "取消",
+      okButtonProps: { danger: true },
+      onOk: async () => {
+        try {
+          await deleteMaterial(materialId);
+          message.success("删除成功");
+          setMaterials(prev => prev.filter(m => m.id !== materialId));
+        } catch (error) {
+          message.error("删除失败");
+        }
+      },
+    });
+  };
+
+  const handleUpload = async (file: File) => {
+    if (!id) return;
+
+    try {
+      // 注意：这里需要先上传文件获取 fileUrl
+      // 实际项目中应该有单独的文件上传接口
+      // 这里暂时使用占位实现
+      message.loading("正在上传文件...", 0);
+
+      // TODO: 调用文件上传接口获取 fileUrl
+      // const fileUrl = await uploadFile(file);
+
+      // 临时方案：直接使用文件名作为占位
+      const fileUrl = `temp://${file.name}`;
+
+      await uploadMaterial({
+        typeId: Number(id),
+        name: file.name,
+        label: [], // 可以后续添加标签编辑功能
+        fileUrl: fileUrl,
+      });
+
+      message.destroy();
+      message.success("上传成功");
+      fetchDetail();
+    } catch (error) {
+      message.destroy();
+      message.error("上传失败");
+    }
+  };
+
+  const getFileIcon = (fileType: string) => {
+    const type = fileType.toLowerCase();
+    if (["mp4", "avi", "mov", "wmv"].includes(type)) {
+      return (
+        <div className={`${style.materialIcon} ${style.videoIcon}`}>
+          <VideoCameraOutlined />
+        </div>
+      );
+    } else if (["doc", "docx", "pdf", "txt"].includes(type)) {
+      return (
+        <div className={`${style.materialIcon} ${style.docIcon}`}>
+          <FileTextOutlined />
+        </div>
+      );
+    } else {
+      return (
+        <div className={`${style.materialIcon} ${style.fileIcon}`}>
+          <FileOutlined />
+        </div>
+      );
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  };
+
+  const renderInfoTab = () => {
+    if (!knowledgeBase) return null;
+
+    const isSystemPreset = knowledgeBase.type === 0; // 系统预设只读
+
+    return (
+      <>
+        <div className={style.infoCard}>
+          <div className={style.infoHeader}>
+            <div className={style.infoIcon}>
+              <BookOutlined />
+            </div>
+            <div className={style.infoContent}>
+              <div className={style.infoName}>
+                {knowledgeBase.name}
+                {isSystemPreset && (
+                  <span
+                    style={{
+                      marginLeft: "8px",
+                      fontSize: "12px",
+                      color: "#999",
+                      fontWeight: "normal",
+                    }}
+                  >
+                    (系统预设)
+                  </span>
+                )}
+              </div>
+              {knowledgeBase.description && (
+                <div className={style.infoDescription}>
+                  {knowledgeBase.description}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className={style.infoStats}>
+            <div className={style.statItem}>
+              <div className={style.statValue}>
+                {knowledgeBase.materialCount || 0}
+              </div>
+              <div className={style.statLabel}>素材总数</div>
+            </div>
+            <div className={style.statItem}>
+              <div
+                className={`${style.statValue} ${knowledgeBase.aiCallEnabled ? style.statValueSuccess : ""}`}
+              >
+                {knowledgeBase.aiCallEnabled ? "启用" : "关闭"}
+              </div>
+              <div className={style.statLabel}>AI状态</div>
+            </div>
+            <div className={style.statItem}>
+              <div className={style.statValue}>
+                {knowledgeBase.tags?.length || 0}
+              </div>
+              <div className={style.statLabel}>标签数</div>
+            </div>
+          </div>
+
+          {knowledgeBase.tags && knowledgeBase.tags.length > 0 && (
+            <div className={style.infoTags}>
+              <div className={style.tagTitle}>内容库标签</div>
+              <div className={style.tags}>
+                {knowledgeBase.tags.map((tag, index) => (
+                  <span key={index} className={style.tag}>
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className={style.configSection}>
+            <div className={style.configItem}>
+              <div>
+                <div className={style.configLabel}>
+                  <ApiOutlined className={style.configIcon} />
+                  AI调用配置
+                </div>
+                <div className={style.configDescription}>
+                  AI助手可以使用此内容库的素材
+                </div>
+              </div>
+              <Switch
+                checked={knowledgeBase.aiCallEnabled}
+                onChange={handleAICallToggle}
+                disabled={isSystemPreset}
+              />
+            </div>
+
+            <div className={style.configItem}>
+              <div>
+                <div className={style.configLabel}>
+                  <BulbOutlined className={style.configIcon} />
+                  支持智能应答和推荐
+                </div>
+              </div>
+            </div>
+
+            <div className={style.configItem}>
+              <div>
+                <div className={style.configLabel}>
+                  <SettingOutlined className={style.configIcon} />
+                  实时响应用户查询
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className={style.featureList}>
+            <div className={style.featureItem}>
+              <CheckCircleOutlined className={style.featureIcon} />
+              与各知识库的回复基本合用
+            </div>
+            <div className={style.featureItem}>
+              <CheckCircleOutlined className={style.featureIcon} />
+              确保所有知识库回复的一致性和专业度
+            </div>
+          </div>
+
+          {callers.length > 0 && (
+            <div className={style.callerSection}>
+              <div className={style.sectionHeader}>
+                <div className={style.sectionTitle}>
+                  <UserOutlined />
+                  调用者名单
+                  <span className={style.sectionCount}>{callers.length}</span>
+                </div>
+              </div>
+              <div className={style.callerList}>
+                {callers.slice(0, 3).map(caller => (
+                  <div key={caller.id} className={style.callerItem}>
+                    <img
+                      src={caller.avatar}
+                      alt={caller.name}
+                      className={style.callerAvatar}
+                    />
+                    <div className={style.callerInfo}>
+                      <div className={style.callerName}>{caller.name}</div>
+                      <div className={style.callerRole}>{caller.role}</div>
+                    </div>
+                    <div className={style.callerTime}>
+                      调用 {caller.callCount} 次 · {caller.lastCallTime}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 系统预设不显示编辑和删除按钮 */}
+        {!isSystemPreset && (
+          <div className={style.bottomActions}>
+            <button
+              className={`${style.actionButton} ${style.editButton}`}
+              onClick={() => navigate(`/workspace/ai-knowledge/${id}/edit`)}
+            >
+              <EditOutlined /> 编辑库
+            </button>
+            <button
+              className={`${style.actionButton} ${style.deleteButton}`}
+              onClick={handleDeleteKnowledge}
+            >
+              <DeleteOutlined /> 删除库
+            </button>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const renderMaterialsTab = () => {
+    const isSystemPreset = knowledgeBase?.type === 0; // 系统预设只读
+
+    return (
+      <div className={style.materialSection}>
+        {/* 系统预设不显示上传按钮 */}
+        {!isSystemPreset && (
+          <Upload
+            showUploadList={false}
+            beforeUpload={file => {
+              handleUpload(file);
+              return false;
+            }}
+          >
+            <Button
+              type="primary"
+              icon={<UploadOutlined />}
+              className={style.uploadButton}
+              size="large"
+            >
+              上传素材到此库
+            </Button>
+          </Upload>
+        )}
+
+        <div className={style.materialList}>
+          {materials.length > 0 ? (
+            materials.map(material => (
+              <div key={material.id} className={style.materialItem}>
+                {getFileIcon(material.fileType)}
+                <div className={style.materialContent}>
+                  <div className={style.materialHeader}>
+                    <div className={style.materialName}>
+                      {material.fileName}
+                    </div>
+                    {/* 系统预设不显示删除按钮 */}
+                    {!isSystemPreset && (
+                      <Dropdown
+                        menu={{
+                          items: [
+                            {
+                              key: "delete",
+                              icon: <DeleteOutlined />,
+                              label: "删除",
+                              danger: true,
+                            },
+                          ],
+                          onClick: () => handleDeleteMaterial(material.id),
+                        }}
+                        trigger={["click"]}
+                        placement="bottomRight"
+                      >
+                        <MoreOutlined className={style.materialMenu} />
+                      </Dropdown>
+                    )}
+                  </div>
+                  <div className={style.materialMeta}>
+                    <div className={style.materialSize}>
+                      <DatabaseOutlined />
+                      {formatFileSize(material.fileSize)}
+                    </div>
+                    <div className={style.materialDate}>
+                      <CalendarOutlined />
+                      {material.uploadTime}
+                    </div>
+                  </div>
+                  {material.tags && material.tags.length > 0 && (
+                    <div className={style.materialTags}>
+                      {material.tags.map((tag, index) => (
+                        <span key={index} className={style.materialTag}>
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className={style.empty}>
+              <div className={style.emptyIcon}>
+                <FileOutlined />
+              </div>
+              <div className={style.emptyText}>暂无素材</div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Layout
+      header={
+        <>
+          <NavCommon
+            title="AI知识库"
+            backFn={() => navigate("/workspace/ai-knowledge")}
+          />
+          <div className={style.tabContainer}>
+            <div className={style.tabs}>
+              <button
+                className={`${style.tab} ${activeTab === "info" ? style.tabActive : ""}`}
+                onClick={() => setActiveTab("info")}
+              >
+                内容库列表
+              </button>
+              <button
+                className={`${style.tab} ${activeTab === "materials" ? style.tabActive : ""}`}
+                onClick={() => setActiveTab("materials")}
+              >
+                {knowledgeBase?.name || "知识库"}
+              </button>
+            </div>
+          </div>
+        </>
+      }
+    >
+      <div className={style.detailPage}>
+        {loading ? (
+          <div style={{ textAlign: "center", padding: "60px 0" }}>
+            <Spin size="large" />
+          </div>
+        ) : (
+          <>
+            {activeTab === "info" && renderInfoTab()}
+            {activeTab === "materials" && renderMaterialsTab()}
+          </>
+        )}
+      </div>
+
+      {/* 编辑独立提示词弹窗 */}
+      <Modal
+        title="编辑独立提示词"
+        open={promptEditVisible}
+        onCancel={() => setPromptEditVisible(false)}
+        onOk={handlePromptSave}
+        okText="保存"
+        cancelText="取消"
+        className={style.promptEditModal}
+      >
+        <textarea
+          className={style.promptTextarea}
+          value={independentPrompt}
+          onChange={e => setIndependentPrompt(e.target.value)}
+          placeholder="请输入独立提示词..."
+          maxLength={1000}
+        />
+        <div className={style.promptHint}>
+          💡 独立提示词将与统一提示词合并使用，为该知识库提供专业指导
+        </div>
+      </Modal>
+    </Layout>
+  );
+};
+
+export default AIKnowledgeDetail;
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/api.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/api.ts
new file mode 100644
index 000000000..2ab95544f
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/api.ts
@@ -0,0 +1,4 @@
+// 表单页API - 复用列表页的接口
+export { createKnowledgeBase, updateKnowledgeBase } from "../list/api";
+
+export { getKnowledgeBaseDetail } from "../detail/api";
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/data.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/data.ts
new file mode 100644
index 000000000..3e39695bd
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/data.ts
@@ -0,0 +1,2 @@
+// AI知识库表单相关类型定义
+export type { KnowledgeBaseFormData } from "../list/data";
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.module.scss b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.module.scss
new file mode 100644
index 000000000..6abaa0b65
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.module.scss
@@ -0,0 +1,318 @@
+// 表单页容器
+.formPage {
+  padding: 16px;
+  background: #f5f5f5;
+  min-height: calc(100vh - 60px);
+}
+
+.formContainer {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.sectionTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #1890ff;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sectionIcon {
+  color: #1890ff;
+  font-size: 18px;
+}
+
+.formItem {
+  margin-bottom: 20px;
+}
+
+.formLabel {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 8px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.required {
+  color: #ff4d4f;
+  font-size: 14px;
+}
+
+.formTextarea {
+  min-height: 80px;
+  resize: vertical;
+  line-height: 1.6;
+}
+
+.formHint {
+  font-size: 12px;
+  color: #888;
+  margin-top: 6px;
+  line-height: 1.5;
+}
+
+.charCount {
+  text-align: right;
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+
+// 独立提示词区域
+.promptSection {
+  background: #f9f9f9;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.promptHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.promptLabel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.promptIcon {
+  color: #1890ff;
+  font-size: 16px;
+}
+
+.promptDescription {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: #fff;
+  border-radius: 6px;
+  border-left: 3px solid #1890ff;
+}
+
+.promptTextarea {
+  width: 100%;
+  min-height: 160px;
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  resize: vertical;
+  font-family: inherit;
+  outline: none;
+  transition: all 0.2s;
+
+  &:focus {
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+  }
+
+  &::placeholder {
+    color: #bfbfbf;
+  }
+}
+
+.promptDisabled {
+  background: #f5f5f5;
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.promptHint {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #ad6800;
+  line-height: 1.5;
+}
+
+.hintIcon {
+  color: #faad14;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+// AI配置区域
+.configSection {
+  background: #f9f9f9;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.configItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #e8e8e8;
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
+.configLabel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #333;
+}
+
+.configIcon {
+  font-size: 16px;
+  color: #1890ff;
+}
+
+.configDescription {
+  font-size: 12px;
+  color: #888;
+  margin-top: 4px;
+}
+
+// 标签输入
+.tagInput {
+  position: relative;
+}
+
+.tagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.tagItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  background: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+  border: 1px solid rgba(24, 144, 255, 0.2);
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+.tagRemove {
+  cursor: pointer;
+  color: #1890ff;
+  font-size: 14px;
+  transition: color 0.2s;
+
+  &:hover {
+    color: #096dd9;
+  }
+}
+
+// 底部按钮
+.formFooter {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+  position: sticky;
+  bottom: 0;
+}
+
+.footerButton {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  outline: none;
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.cancelButton {
+  background: #f5f5f5;
+  color: #666;
+
+  &:active {
+    background: #e8e8e8;
+  }
+}
+
+.submitButton {
+  background: #1890ff;
+  color: #fff;
+
+  &:active {
+    background: #096dd9;
+  }
+
+  &:disabled {
+    background: #d9d9d9;
+    cursor: not-allowed;
+    transform: none;
+  }
+}
+
+// 加载状态
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+
+// 信息提示卡片
+.infoCard {
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  border: 1px solid #91d5ff;
+}
+
+.infoCardIcon {
+  font-size: 18px;
+  color: #1890ff;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.infoCardContent {
+  flex: 1;
+  font-size: 13px;
+  color: #333;
+  line-height: 1.6;
+}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.tsx
new file mode 100644
index 000000000..b6f9908ca
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/form/index.tsx
@@ -0,0 +1,307 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { message, Spin, Switch, Input } from "antd";
+
+const { TextArea } = Input;
+import {
+  BookOutlined,
+  BulbOutlined,
+  InfoCircleOutlined,
+  CloseOutlined,
+} from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
+import NavCommon from "@/components/NavCommon";
+import style from "./index.module.scss";
+import {
+  createKnowledgeBase,
+  updateKnowledgeBase,
+  getKnowledgeBaseDetail,
+} from "./api";
+import type { KnowledgeBaseFormData } from "./data";
+
+const AIKnowledgeForm: React.FC = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const isEdit = !!id;
+
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  // 表单字段
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [tagInput, setTagInput] = useState("");
+  const [tags, setTags] = useState<string[]>([]);
+  const [useIndependentPrompt, setUseIndependentPrompt] = useState(false);
+  const [independentPrompt, setIndependentPrompt] = useState("");
+
+  useEffect(() => {
+    if (isEdit && id) {
+      fetchDetail();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEdit, id]);
+
+  const fetchDetail = async () => {
+    if (!id) return;
+    setDetailLoading(true);
+    try {
+      const detail = await getKnowledgeBaseDetail(Number(id));
+
+      // 检查是否为系统预设（type === 0），系统预设不允许编辑
+      if (detail.type === 0) {
+        message.warning("系统预设知识库不可编辑");
+        navigate(-1);
+        return;
+      }
+
+      setName(detail.name || "");
+      setDescription(detail.description || "");
+      setTags(detail.tags || []);
+      setTagInput(detail.tags?.join(", ") || "");
+      setUseIndependentPrompt(detail.useIndependentPrompt || false);
+      setIndependentPrompt(detail.independentPrompt || "");
+    } catch (error) {
+      message.error("获取详情失败");
+      navigate(-1);
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  const handleTagInputChange = (value: string) => {
+    setTagInput(value);
+    // 实时解析标签
+    const parsedTags = value
+      .split(/[,，]/)
+      .map(t => t.trim())
+      .filter(Boolean);
+    setTags(parsedTags);
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const newTags = tags.filter(t => t !== tagToRemove);
+    setTags(newTags);
+    setTagInput(newTags.join(", "));
+  };
+
+  const handleSubmit = async () => {
+    // 表单验证
+    if (!name.trim()) {
+      message.error("请输入内容库名称");
+      return;
+    }
+
+    if (name.length > 50) {
+      message.error("名称不能超过50个字符");
+      return;
+    }
+
+    if (description.length > 200) {
+      message.error("描述不能超过200个字符");
+      return;
+    }
+
+    if (useIndependentPrompt && !independentPrompt.trim()) {
+      message.error("启用独立提示词时，请输入提示词内容");
+      return;
+    }
+
+    if (independentPrompt.length > 1000) {
+      message.error("提示词不能超过1000个字符");
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const formData: KnowledgeBaseFormData = {
+        name: name.trim(),
+        description: description.trim(),
+        tags: tags,
+        useIndependentPrompt,
+        independentPrompt: useIndependentPrompt ? independentPrompt.trim() : "",
+      };
+
+      if (isEdit && id) {
+        formData.id = Number(id);
+        await updateKnowledgeBase(formData);
+        message.success("更新成功");
+      } else {
+        await createKnowledgeBase(formData);
+        message.success("创建成功");
+      }
+
+      navigate(-1);
+    } catch (error) {
+      message.error(isEdit ? "更新失败" : "创建失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    navigate(-1);
+  };
+
+  if (detailLoading) {
+    return (
+      <Layout
+        header={<NavCommon title={isEdit ? "编辑内容库" : "新建内容库"} />}
+      >
+        <div className={style.loading}>
+          <Spin size="large" />
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout
+      header={<NavCommon title={isEdit ? "编辑内容库" : "新建内容库"} />}
+      footer={
+        <div className={style.formFooter}>
+          <button
+            className={`${style.footerButton} ${style.cancelButton}`}
+            onClick={handleCancel}
+            disabled={submitting}
+          >
+            取消
+          </button>
+          <button
+            className={`${style.footerButton} ${style.submitButton}`}
+            onClick={handleSubmit}
+            disabled={submitting}
+          >
+            {submitting ? "提交中..." : isEdit ? "更新" : "创建"}
+          </button>
+        </div>
+      }
+    >
+      <div className={style.formPage}>
+        <div className={style.formContainer}>
+          {/* 信息提示 */}
+          <div className={style.infoCard}>
+            <InfoCircleOutlined className={style.infoCardIcon} />
+            <div className={style.infoCardContent}>
+              创建一个新的内容库来组织和管理您的素材，支持配置独立提示词和AI调用设置
+            </div>
+          </div>
+
+          {/* 基本信息 */}
+          <div className={style.sectionTitle}>
+            <BookOutlined className={style.sectionIcon} />
+            基本信息
+          </div>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>
+              <span className={style.required}>*</span>
+              内容库名称
+            </div>
+            <Input
+              placeholder="如：产品介绍库"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              maxLength={50}
+              size="large"
+              count={{
+                show: true,
+                max: 50,
+              }}
+            />
+          </div>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>描述</div>
+            <TextArea
+              placeholder="描述这个内容库的用途..."
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              maxLength={200}
+              rows={4}
+              showCount
+            />
+          </div>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>标签</div>
+            <div className={style.tagInput}>
+              <Input
+                placeholder="多个标签用逗号分隔，如：产品,营销,介绍"
+                value={tagInput}
+                onChange={e => handleTagInputChange(e.target.value)}
+                size="large"
+              />
+              {tags.length > 0 && (
+                <div className={style.tagList}>
+                  {tags.map((tag, index) => (
+                    <span key={index} className={style.tagItem}>
+                      {tag}
+                      <CloseOutlined
+                        className={style.tagRemove}
+                        onClick={() => handleRemoveTag(tag)}
+                      />
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className={style.formHint}>
+              标签用于分类和快速查找，建议使用3-5个关键标签
+            </div>
+          </div>
+
+          {/* 独立提示词 */}
+          <div className={style.sectionTitle}>
+            <BulbOutlined className={style.sectionIcon} />
+            独立提示词配置
+          </div>
+
+          <div className={style.promptSection}>
+            <div className={style.promptHeader}>
+              <div className={style.promptLabel}>
+                <BulbOutlined className={style.promptIcon} />
+                使用独立提示词
+              </div>
+              <Switch
+                checked={useIndependentPrompt}
+                onChange={setUseIndependentPrompt}
+              />
+            </div>
+
+            {useIndependentPrompt && (
+              <>
+                <div className={style.promptDescription}>
+                  设置此知识库的专业指导，将与统一提示词合并使用，为该知识库提供更精准的回答规则
+                </div>
+
+                <TextArea
+                  placeholder="请输入独立提示词内容，例如：
+- 回答风格：专业、友好、简洁
+- 特殊要求：强调产品优势、突出技术细节
+- 回答格式：分点列举、数据支撑..."
+                  value={independentPrompt}
+                  onChange={e => setIndependentPrompt(e.target.value)}
+                  maxLength={1000}
+                  rows={8}
+                  showCount
+                  disabled={!useIndependentPrompt}
+                />
+              </>
+            )}
+
+            <div className={style.promptHint}>
+              <InfoCircleOutlined className={style.hintIcon} />
+              <div>
+                <strong>生效逻辑：</strong>
+                统一提示词（全局规则） + 独立提示词（专业指导） = 最终AI回复内容
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default AIKnowledgeForm;
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
new file mode 100644
index 000000000..f84e30fb2
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
@@ -0,0 +1,90 @@
+import request from "@/api/request";
+import type {
+  KnowledgeBaseListResponse,
+  KnowledgeBaseFormData,
+  GlobalPromptConfig,
+} from "./data";
+
+// 获取知识库列表
+export function updateTypeStatus(params: { id: number; status: number }) {
+  return request("/v1/knowledge/updateTypeStatus", params, "PUT");
+}
+
+// 初始化AI功能
+export function initAIKnowledge(): Promise<any> {
+  return request("/v1/knowledge/init", {}, "GET");
+}
+
+// 发布并应用AI工具
+export function releaseAIKnowledge(id: number): Promise<any> {
+  return request("/v1/knowledge/release", { id }, "GET");
+}
+
+// 获取知识库类型列表
+export function fetchKnowledgeBaseList(params: {
+  page?: number;
+  limit?: number;
+}): Promise<KnowledgeBaseListResponse> {
+  return request("/v1/knowledge/typeList", params, "GET");
+}
+
+// 创建知识库类型
+export function createKnowledgeBase(data: KnowledgeBaseFormData): Promise<any> {
+  return request(
+    "/v1/knowledge/addType",
+    {
+      name: data.name,
+      description: data.description || "",
+      label: data.tags || [],
+      prompt: data.useIndependentPrompt ? data.independentPrompt || "" : "",
+    },
+    "POST",
+  );
+}
+
+// 更新知识库类型
+export function updateKnowledgeBase(data: KnowledgeBaseFormData): Promise<any> {
+  return request(
+    "/v1/knowledge/editType",
+    {
+      id: data.id,
+      name: data.name,
+      description: data.description || "",
+      label: data.tags || [],
+      prompt: data.useIndependentPrompt ? data.independentPrompt || "" : "",
+    },
+    "POST",
+  );
+}
+
+// 删除知识库类型
+export function deleteKnowledgeBase(id: number): Promise<any> {
+  return request("/v1/knowledge/deleteType", { id }, "DELETE");
+}
+
+// 切换知识库状态（启用/禁用）- 注意：实际接口未提供，保留兼容
+export function toggleKnowledgeBaseStatus(
+  id: number,
+  status: 0 | 1,
+): Promise<any> {
+  // 由于接口文档中没有此接口，暂时使用编辑接口实现
+  console.warn("toggleKnowledgeBaseStatus 接口未提供，需要后端补充");
+  return Promise.resolve({ success: true });
+}
+
+// 获取统一提示词配置 - 使用发布接口返回的 prompt_info
+export function getGlobalPrompt(): Promise<GlobalPromptConfig> {
+  // 注意：实际接口未单独提供，需要通过 release 接口获取
+  console.warn("getGlobalPrompt 接口未提供，需要后端补充");
+  return Promise.resolve({
+    enabled: true,
+    content: "",
+  });
+}
+
+// 保存统一提示词配置
+export function saveGlobalPrompt(data: GlobalPromptConfig): Promise<any> {
+  // 注意：实际接口未提供，需要后端补充
+  console.warn("saveGlobalPrompt 接口未提供，需要后端补充");
+  return Promise.resolve({ success: true });
+}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
new file mode 100644
index 000000000..1e71db851
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Switch, message } from "antd";
+import {
+  InfoCircleOutlined,
+  BulbOutlined,
+  ExclamationCircleOutlined,
+} from "@ant-design/icons";
+import { getGlobalPrompt, saveGlobalPrompt } from "../api";
+import type { GlobalPromptConfig } from "../data";
+import style from "../index.module.scss";
+
+interface GlobalPromptModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const DEFAULT_PROMPT = `你是存客宝AI知识库助手。请遵循以下基本原则:
+
+1. 专业性: 使用专业但易懂的语言回答问题
+2. 准确性: 基于知识库内容提供准确的信息
+3. 友好性: 保持友好、耐心的服务态度
+4. 简洁性: 回答简明扼要，重点突出
+5. 引用性: 回答时注明信息来源`;
+
+const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
+  visible,
+  onClose,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [enabled, setEnabled] = useState(true);
+  const [content, setContent] = useState(DEFAULT_PROMPT);
+
+  useEffect(() => {
+    if (visible) {
+      fetchGlobalPrompt();
+    }
+  }, [visible]);
+
+  const fetchGlobalPrompt = async () => {
+    setLoading(true);
+    try {
+      const config = await getGlobalPrompt();
+      setEnabled(config.enabled);
+      setContent(config.content || DEFAULT_PROMPT);
+    } catch (error) {
+      message.error("获取配置失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    if (enabled && !content.trim()) {
+      message.error("启用统一提示词时，请输入提示词内容");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await saveGlobalPrompt({
+        enabled,
+        content: content.trim(),
+      });
+      message.success("保存成功");
+      onClose();
+    } catch (error) {
+      message.error("保存失败");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <InfoCircleOutlined style={{ color: "#1890ff" }} />
+          配置统一提示词
+        </div>
+      }
+      open={visible}
+      onCancel={onClose}
+      onOk={handleSave}
+      confirmLoading={saving}
+      width={600}
+      okText="保存配置"
+      cancelText="取消"
+      className={style.promptModal}
+    >
+      <div className={style.promptContent}>
+        <p style={{ fontSize: 13, color: "#666", marginBottom: 16 }}>
+          设置所有知识库的通用回复规范
+        </p>
+
+        <div className={style.promptToggle}>
+          <span className={style.promptToggleLabel}>启用统一提示词</span>
+          <Switch checked={enabled} onChange={setEnabled} />
+        </div>
+
+        {enabled && (
+          <textarea
+            className={style.promptTextarea}
+            value={content}
+            onChange={e => setContent(e.target.value)}
+            placeholder="请输入统一提示词..."
+            maxLength={2000}
+          />
+        )}
+
+        <div className={style.promptSection}>
+          <div className={style.sectionTitle}>
+            <BulbOutlined className={style.sectionIcon} />
+            统一提示词作用:
+          </div>
+          <div className={style.sectionContent}>
+            <ul>
+              <li>定义AI回复的基本风格和规范</li>
+              <li>确保所有知识库回复的一致性和专业度</li>
+              <li>与各知识库的回复基本合用</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className={style.warningBox}>
+          <div className={style.warningTitle}>
+            <ExclamationCircleOutlined /> 提示词生效逻辑:
+          </div>
+          <div className={style.warningText}>
+            <div>统一提示词（全局规则） + 知识库独立提示词（专业指导）</div>
+            <div style={{ marginTop: 4 }}>= 该终AI回复内容</div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default GlobalPromptModal;
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/data.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/data.ts
new file mode 100644
index 000000000..415140949
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/data.ts
@@ -0,0 +1,75 @@
+// AI知识库相关类型定义
+
+// 知识库类型（对应接口的 type）
+export interface KnowledgeBase {
+  id: number;
+  type: number; // 类型
+  name: string;
+  description: string;
+  label: string[]; // 标签（接口返回的字段名）
+  prompt: string | null; // 独立提示词
+  companyId: number;
+  userId: number;
+  createTime: string | null;
+  updateTime: string | null;
+  isDel: number;
+  delTime: number;
+  // 前端扩展字段
+  tags?: string[]; // 兼容字段，映射自 label
+  status?: number; // 0-禁用 1-启用（前端维护）
+  materialCount?: number; // 素材总数（前端计算）
+  useIndependentPrompt?: boolean; // 是否使用独立提示词（根据 prompt 判断）
+  independentPrompt?: string; // 独立提示词内容（映射自 prompt）
+  aiCallEnabled?: boolean; // AI调用配置（前端维护）
+  creatorName?: string;
+  callerCount?: number; // 调用者数量
+}
+
+// 素材类型
+export interface Material {
+  id: number;
+  knowledgeBaseId: number;
+  fileName: string;
+  fileSize: number; // 字节
+  fileType: string; // 文件扩展名
+  filePath: string;
+  tags: string[];
+  uploadTime: string;
+  uploaderId: number;
+  uploaderName: string;
+}
+
+// 调用者类型
+export interface Caller {
+  id: number;
+  name: string;
+  avatar: string;
+  role: string; // 角色/职位
+  lastCallTime: string;
+  callCount: number;
+}
+
+// 统一提示词配置
+export interface GlobalPromptConfig {
+  enabled: boolean; // 是否启用统一提示词
+  content: string; // 提示词内容
+}
+
+// 知识库列表响应
+export interface KnowledgeBaseListResponse {
+  data: KnowledgeBase[]; // 接口实际返回的是 data 字段
+  total: number;
+  per_page: number;
+  current_page: number;
+  last_page: number;
+}
+
+// 新建/编辑知识库表单数据
+export interface KnowledgeBaseFormData {
+  id?: number;
+  name: string;
+  description?: string;
+  tags: string[];
+  useIndependentPrompt: boolean;
+  independentPrompt?: string;
+}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss
new file mode 100644
index 000000000..20fdc7d54
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss
@@ -0,0 +1,435 @@
+// 页面容器
+.knowledgePage {
+  padding: 16px 10px 0 16px;
+  min-height: 100vh;
+}
+
+// 提示横幅
+.banner {
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid #91d5ff;
+}
+
+.bannerIcon {
+  font-size: 20px;
+  color: #1890ff;
+  flex-shrink: 0;
+}
+
+.bannerContent {
+  flex: 1;
+}
+
+.bannerText {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+
+  a {
+    color: #1890ff;
+    text-decoration: none;
+    font-weight: 500;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+}
+
+// 统计卡片区域
+.statsContainer {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.statCard {
+  flex: 1;
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  text-align: center;
+  border: 1px solid #f0f0f0;
+}
+
+.statValue {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.statLabel {
+  font-size: 13px;
+  color: #888;
+}
+
+.statValueSuccess {
+  color: #52c41a;
+}
+
+// 知识库卡片
+.knowledgeCard {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid #ececec;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.knowledgeCard:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-color: #b3e5fc;
+}
+
+.cardHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.cardLeft {
+  flex: 1;
+  min-width: 0;
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.cardIcon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.cardName {
+  font-size: 17px;
+  font-weight: 600;
+  color: #222;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.cardDescription {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 8px;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cardRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.cardSwitch {
+  margin-right: 4px;
+}
+
+.cardMenu {
+  font-size: 18px;
+  color: #888;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.cardStats {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding: 10px 0;
+  border-top: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.statItem {
+  flex: 1;
+  text-align: center;
+}
+
+.statItemValue {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.statItemLabel {
+  font-size: 12px;
+  color: #888;
+}
+
+.cardTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag {
+  padding: 3px 10px;
+  border-radius: 10px;
+  font-size: 12px;
+  background: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+  border: 1px solid rgba(24, 144, 255, 0.2);
+}
+
+// 空状态
+.empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: #bbb;
+}
+
+.emptyIcon {
+  font-size: 64px;
+  color: #d9d9d9;
+  margin-bottom: 16px;
+}
+
+.emptyText {
+  font-size: 15px;
+  color: #999;
+}
+
+// 新建知识库弹窗样式
+.modalContent {
+  padding: 20px;
+}
+
+.modalTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #222;
+  margin-bottom: 8px;
+}
+
+.modalSubtitle {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 20px;
+}
+
+.formItem {
+  margin-bottom: 20px;
+}
+
+.formLabel {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.formInput {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.2s;
+
+  &:focus {
+    border-color: #1890ff;
+  }
+}
+
+.formTextarea {
+  min-height: 80px;
+  resize: vertical;
+  font-family: inherit;
+}
+
+.checkboxWrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  background: #f9f9f9;
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+
+.checkboxLabel {
+  font-size: 14px;
+  color: #333;
+  flex: 1;
+}
+
+.promptHint {
+  font-size: 12px;
+  color: #888;
+  line-height: 1.5;
+  margin-top: 4px;
+}
+
+.modalFooter {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.modalButton {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cancelButton {
+  background: #f5f5f5;
+  color: #666;
+
+  &:active {
+    background: #e8e8e8;
+  }
+}
+
+.submitButton {
+  background: #1890ff;
+  color: #fff;
+
+  &:active {
+    background: #096dd9;
+  }
+
+  &:disabled {
+    background: #d9d9d9;
+    cursor: not-allowed;
+  }
+}
+
+// 统一提示词弹窗
+.promptModal {
+  .promptContent {
+    padding: 20px;
+  }
+
+  .promptToggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    margin-bottom: 16px;
+  }
+
+  .promptToggleLabel {
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .promptTextarea {
+    width: 100%;
+    min-height: 200px;
+    padding: 12px;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 1.6;
+    resize: vertical;
+    font-family: inherit;
+    margin-bottom: 12px;
+
+    &:focus {
+      outline: none;
+      border-color: #1890ff;
+    }
+  }
+
+  .promptSection {
+    margin-bottom: 16px;
+  }
+
+  .sectionTitle {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sectionIcon {
+    color: #1890ff;
+  }
+
+  .sectionContent {
+    font-size: 13px;
+    color: #666;
+    line-height: 1.6;
+    padding: 10px;
+    background: #f9f9f9;
+    border-radius: 6px;
+
+    ul {
+      margin: 0;
+      padding-left: 20px;
+    }
+
+    li {
+      margin-bottom: 4px;
+    }
+  }
+
+  .warningBox {
+    background: #fffbe6;
+    border: 1px solid #ffe58f;
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 16px;
+  }
+
+  .warningTitle {
+    font-size: 13px;
+    font-weight: 500;
+    color: #d46b08;
+    margin-bottom: 6px;
+  }
+
+  .warningText {
+    font-size: 12px;
+    color: #ad6800;
+    line-height: 1.5;
+  }
+}
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
new file mode 100644
index 000000000..f42ba51bd
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
@@ -0,0 +1,358 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button, Switch, Dropdown, message, Spin, Pagination } from "antd";
+import {
+  MoreOutlined,
+  PlusOutlined,
+  BookOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  GlobalOutlined,
+  InfoCircleOutlined,
+} from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
+import NavCommon from "@/components/NavCommon";
+import style from "./index.module.scss";
+import {
+  fetchKnowledgeBaseList,
+  deleteKnowledgeBase,
+  initAIKnowledge,
+  updateTypeStatus,
+} from "./api";
+import type { KnowledgeBase } from "./data";
+import GlobalPromptModal from "./components/GlobalPromptModal";
+
+const PAGE_SIZE = 10;
+
+const AIKnowledgeList: React.FC = () => {
+  const navigate = useNavigate();
+  const [list, setList] = useState<KnowledgeBase[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+  const [enabledCount, setEnabledCount] = useState(0);
+  const [page, setPage] = useState(1);
+  const [menuLoadingId, setMenuLoadingId] = useState<number | null>(null);
+
+  // 弹窗控制
+  const [globalPromptVisible, setGlobalPromptVisible] = useState(false);
+
+  useEffect(() => {
+    // 初始化AI功能
+    initAIKnowledge().catch(err => {
+      console.warn("初始化AI功能失败", err);
+    });
+    fetchList(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const fetchList = async (pageNum = 1) => {
+    setLoading(true);
+    try {
+      const res = await fetchKnowledgeBaseList({
+        page: pageNum,
+        limit: PAGE_SIZE,
+      });
+      // 转换数据格式，映射接口字段到前端字段
+      const transformedList = (res?.data || []).map((item: any) => ({
+        ...item,
+        tags: item.label || [],
+        useIndependentPrompt: !!item.prompt,
+        independentPrompt: item.prompt || "",
+        status: item.isDel === 0 ? 1 : 0, // 未删除即为启用
+        aiCallEnabled: true, // 默认启用
+        materialCount: 0, // 需要单独统计
+      }));
+      setList(transformedList);
+      setTotal(Number(res?.total) || 0);
+      setEnabledCount(
+        transformedList.filter((item: any) => item.status === 1).length,
+      );
+    } catch (e) {
+      message.error("获取知识库列表失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePageChange = (p: number) => {
+    setPage(p);
+    fetchList(p);
+  };
+
+  const handleRefresh = () => {
+    fetchList(page);
+  };
+
+  // 菜单点击事件
+  const handleMenuClick = async (key: string, item: KnowledgeBase) => {
+    // 系统预设不允许编辑或删除
+    if (item.type === 0) {
+      message.warning("系统预设知识库不可编辑或删除");
+      return;
+    }
+
+    if (key === "edit") {
+      navigate(`/workspace/ai-knowledge/${item.id}/edit`);
+    } else if (key === "delete") {
+      setMenuLoadingId(item.id);
+      try {
+        await deleteKnowledgeBase(item.id);
+        message.success("删除成功");
+        handleRefresh();
+      } catch (e) {
+        message.error("删除失败");
+      } finally {
+        setMenuLoadingId(null);
+      }
+    }
+  };
+
+  // Switch切换状态 - 乐观更新模式
+  const handleSwitchChange = async (checked: boolean, item: KnowledgeBase) => {
+    // 系统预设不允许修改状态
+    if (item.type === 0) {
+      message.warning("系统预设知识库不可修改状态");
+      return;
+    }
+
+    // 保存旧状态用于回滚
+    const oldStatus = item.status;
+    const oldEnabledCount = enabledCount;
+
+    // 立即更新本地UI（乐观更新）
+    setList(prevList =>
+      prevList.map(kb =>
+        kb.id === item.id ? { ...kb, status: checked ? 1 : 0 } : kb,
+      ),
+    );
+    setEnabledCount(prev => (checked ? prev + 1 : prev - 1));
+
+    // 异步请求接口
+    try {
+      await updateTypeStatus({ id: item.id, status: checked ? 1 : 0 });
+      // 成功后显示提示
+      message.success(checked ? "已启用" : "已禁用");
+    } catch (e) {
+      // 失败时回滚状态
+      setList(prevList =>
+        prevList.map(kb =>
+          kb.id === item.id ? { ...kb, status: oldStatus } : kb,
+        ),
+      );
+      setEnabledCount(oldEnabledCount);
+      message.error("操作失败，请重试");
+    }
+  };
+
+  // 打开知识库详情
+  const handleCardClick = (item: KnowledgeBase) => {
+    navigate(`/workspace/ai-knowledge/${item.id}`);
+  };
+
+  // 渲染知识库卡片
+  const renderCard = (item: KnowledgeBase) => {
+    const isSystemPreset = item.type === 0; // 系统预设不可编辑
+
+    return (
+      <div key={item.id} className={style.knowledgeCard}>
+        <div className={style.cardHeader}>
+          <div
+            className={style.cardLeft}
+            onClick={() => handleCardClick(item)}
+            style={{ cursor: "pointer" }}
+          >
+            <div className={style.cardTitle}>
+              <div className={style.cardIcon}>
+                <BookOutlined />
+              </div>
+              <div className={style.cardName}>
+                {item.name}
+                {isSystemPreset && (
+                  <span
+                    style={{
+                      marginLeft: "8px",
+                      fontSize: "12px",
+                      color: "#999",
+                      fontWeight: "normal",
+                    }}
+                  >
+                    (系统预设)
+                  </span>
+                )}
+              </div>
+            </div>
+            {item.description && (
+              <div className={style.cardDescription}>{item.description}</div>
+            )}
+          </div>
+          <div className={style.cardRight}>
+            <Switch
+              className={style.cardSwitch}
+              checked={item.status === 1}
+              size="small"
+              loading={menuLoadingId === item.id}
+              disabled={menuLoadingId === item.id || isSystemPreset}
+              onChange={checked => handleSwitchChange(checked, item)}
+            />
+            {!isSystemPreset && (
+              <Dropdown
+                menu={{
+                  items: [
+                    {
+                      key: "edit",
+                      icon: <EditOutlined />,
+                      label: "编辑",
+                      disabled: menuLoadingId === item.id,
+                    },
+                    {
+                      key: "delete",
+                      icon: <DeleteOutlined />,
+                      label: "删除",
+                      disabled: menuLoadingId === item.id,
+                      danger: true,
+                    },
+                  ],
+                  onClick: ({ key }) => handleMenuClick(key, item),
+                }}
+                trigger={["click"]}
+                placement="bottomRight"
+                disabled={menuLoadingId === item.id}
+              >
+                <MoreOutlined className={style.cardMenu} />
+              </Dropdown>
+            )}
+          </div>
+        </div>
+
+        <div className={style.cardStats}>
+          <div className={style.statItem}>
+            <div className={style.statItemValue}>{item.materialCount || 0}</div>
+            <div className={style.statItemLabel}>素材总数</div>
+          </div>
+          <div className={style.statItem}>
+            <div
+              className={style.statItemValue}
+              style={{ color: item.aiCallEnabled ? "#52c41a" : "#999" }}
+            >
+              {item.aiCallEnabled ? "启用" : "关闭"}
+            </div>
+            <div className={style.statItemLabel}>AI状态</div>
+          </div>
+          <div className={style.statItem}>
+            <div className={style.statItemValue}>{item.tags?.length || 0}</div>
+            <div className={style.statItemLabel}>标签数</div>
+          </div>
+        </div>
+
+        {item.tags && item.tags.length > 0 && (
+          <div className={style.cardTags}>
+            {item.tags.map((tag, index) => (
+              <span key={index} className={style.tag}>
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Layout
+      header={
+        <NavCommon
+          title="AI知识库"
+          backFn={() => navigate("/workspace")}
+          right={
+            <div style={{ display: "flex", gap: 8 }}>
+              <Button onClick={() => setGlobalPromptVisible(true)}>
+                <GlobalOutlined /> 统一提示词
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => navigate("/workspace/ai-knowledge/new")}
+              >
+                <PlusOutlined /> 新建
+              </Button>
+            </div>
+          }
+        />
+      }
+      footer={
+        <div
+          style={{
+            padding: "16px",
+            background: "#fff",
+            borderTop: "1px solid #f0f0f0",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Pagination
+            current={page}
+            pageSize={PAGE_SIZE}
+            total={total}
+            onChange={handlePageChange}
+            showSizeChanger={false}
+            showTotal={total => `共 ${total} 条`}
+            disabled={loading}
+          />
+        </div>
+      }
+    >
+      <div className={style.knowledgePage}>
+        {/* 提示横幅 */}
+        <div className={style.banner}>
+          <InfoCircleOutlined className={style.bannerIcon} />
+          <div className={style.bannerContent}>
+            <div className={style.bannerText}>
+              已启用统一提示词规则 ·{" "}
+              <a onClick={() => setGlobalPromptVisible(true)}>
+                点击&ldquo;统一提示词&rdquo;可查看和编辑
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* 统计卡片 */}
+        <div className={style.statsContainer}>
+          <div className={style.statCard}>
+            <div className={style.statValue}>{total}</div>
+            <div className={style.statLabel}>内容库总数</div>
+          </div>
+          <div className={style.statCard}>
+            <div className={`${style.statValue} ${style.statValueSuccess}`}>
+              {enabledCount}
+            </div>
+            <div className={style.statLabel}>启用中</div>
+          </div>
+        </div>
+
+        {/* 知识库列表 */}
+        {loading ? (
+          <div style={{ textAlign: "center", padding: "40px 0" }}>
+            <Spin />
+          </div>
+        ) : list.length > 0 ? (
+          list.map(renderCard)
+        ) : (
+          <div className={style.empty}>
+            <div className={style.emptyIcon}>
+              <BookOutlined />
+            </div>
+            <div className={style.emptyText}>暂无知识库</div>
+          </div>
+        )}
+      </div>
+
+      {/* 统一提示词弹窗 */}
+      <GlobalPromptModal
+        visible={globalPromptVisible}
+        onClose={() => setGlobalPromptVisible(false)}
+      />
+    </Layout>
+  );
+};
+
+export default AIKnowledgeList;
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md
new file mode 100644
index 000000000..e13400448
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md
@@ -0,0 +1,183 @@
+# AI知识库接口对接说明
+
+## ✅ 已对接接口
+
+### 知识库类型管理
+
+1. **获取知识库类型列表**
+   - 接口：`GET /v1/knowledge/typeList`
+   - 参数：`{ page, limit }`
+   - 状态：✅ 已对接
+
+2. **添加知识库类型**
+   - 接口：`POST /v1/knowledge/addType`
+   - 参数：`{ name, description, label, prompt }`
+   - 状态：✅ 已对接
+
+3. **编辑知识库类型**
+   - 接口：`POST /v1/knowledge/editType`
+   - 参数：`{ id, name, description, label, prompt }`
+   - 状态：✅ 已对接
+
+4. **删除知识库类型**
+   - 接口：`DELETE /v1/knowledge/deleteType`
+   - 参数：`{ id }`
+   - 状态：✅ 已对接
+
+### 知识库（素材）管理
+
+5. **获取知识库列表（素材列表）**
+   - 接口：`GET /v1/knowledge/getList`
+   - 参数：`{ typeId, name, label, fileUrl, page, limit }`
+   - 状态：✅ 已对接
+
+6. **添加知识库（素材）**
+   - 接口：`POST /v1/knowledge/add`
+   - 参数：`{ typeId, name, label, fileUrl }`
+   - 状态：✅ 已对接（需要补充文件上传接口）
+
+7. **删除知识库（素材）**
+   - 接口：`DELETE /v1/knowledge/delete`
+   - 参数：`{ id }`
+   - 状态：✅ 已对接
+
+### AI功能
+
+8. **初始化AI功能**
+   - 接口：`GET /v1/knowledge/init`
+   - 状态：✅ 已对接（页面加载时自动调用）
+
+9. **发布并应用AI工具**
+   - 接口：`GET /v1/knowledge/release`
+   - 参数：`{ id }`
+   - 状态：✅ 已对接（暂未在UI中使用，可在需要时调用）
+
+---
+
+## ⚠️ 需要后端补充的接口
+
+### 1. 知识库状态切换
+
+- **功能**：启用/禁用知识库类型
+- **当前实现**：前端使用 `isDel` 字段判断状态，但没有单独的切换接口
+- **建议**：
+  ```
+  POST /v1/knowledge/toggleStatus
+  参数: { id: number, status: 0 | 1 }
+  ```
+
+### 2. 统一提示词配置
+
+- **功能**：配置全局AI提示词
+- **当前实现**：前端保留了UI，但接口未提供
+- **建议**：
+  ```
+  GET /v1/knowledge/globalPrompt
+  POST /v1/knowledge/globalPrompt
+  参数: { enabled: boolean, content: string }
+  ```
+
+### 3. 调用者列表
+
+- **功能**：显示哪些用户在使用某个知识库
+- **当前实现**：前端已预留UI，但接口未提供
+- **建议**：
+  ```
+  GET /v1/knowledge/callers
+  参数: { typeId: number, page: number, limit: number }
+  返回: { list: [], total: number }
+  ```
+
+### 4. 文件上传
+
+- **功能**：上传素材文件并返回 fileUrl
+- **当前实现**：前端使用临时占位方案
+- **建议**：
+  ```
+  POST /v1/knowledge/uploadFile
+  参数: FormData (file)
+  返回: { fileUrl: string, fileSize: number }
+  ```
+
+### 5. 知识库详情
+
+- **功能**：获取单个知识库类型的详细信息
+- **当前实现**：前端通过列表接口查找
+- **建议**：
+  ```
+  GET /v1/knowledge/typeDetail
+  参数: { id: number }
+  ```
+
+### 6. 素材统计
+
+- **功能**：获取每个知识库类型的素材数量
+- **当前实现**：前端设置为0，需要单独统计
+- **建议**：在 `typeList` 接口返回值中增加 `materialCount` 字段
+
+---
+
+## 📋 数据字段映射说明
+
+### 前端 ➡️ 后端
+
+| 前端字段             | 后端字段         | 说明                     |
+| -------------------- | ---------------- | ------------------------ |
+| tags                 | label            | 标签数组                 |
+| useIndependentPrompt | 根据 prompt 判断 | 是否有独立提示词         |
+| independentPrompt    | prompt           | 独立提示词内容           |
+| status               | isDel 判断       | isDel=0 为启用           |
+| materialCount        | 需补充           | 素材数量                 |
+| fileName             | name             | 文件名                   |
+| filePath             | fileUrl          | 文件路径                 |
+| uploadTime           | createTime       | 上传时间（需转换时间戳） |
+
+### 时间格式转换
+
+- 后端返回：Unix 时间戳（秒）
+- 前端显示：`new Date(timestamp * 1000).toLocaleDateString('zh-CN')`
+
+---
+
+## 🔧 待优化项
+
+1. **文件上传流程**
+   - 当前：上传文件 → 获取URL → 调用添加接口
+   - 建议：合并为一个接口，后端处理文件上传和记录创建
+
+2. **批量操作**
+   - 建议增加批量删除接口
+   - 建议增加批量修改标签接口
+
+3. **发布机制**
+   - 明确发布接口的触发时机
+   - 是否需要在新建/编辑后自动发布
+
+4. **权限控制**
+   - 建议增加知识库的访问权限配置
+   - 建议增加素材的可见性控制
+
+---
+
+## ✨ 功能完成度
+
+- ✅ 知识库类型的增删改查
+- ✅ 素材的增删查（改功能可后续补充）
+- ✅ 独立提示词配置
+- ⚠️ AI调用配置（UI完成，接口需补充）
+- ⚠️ 统一提示词（UI完成，接口需补充）
+- ⚠️ 调用者管理（UI预留，接口需补充）
+- ⚠️ 文件上传（临时方案，需正式接口）
+
+---
+
+## 📝 使用注意事项
+
+1. 初始化AI功能会在页面加载时自动调用
+2. 文件上传当前使用临时方案，实际部署需要对接真实的文件上传接口
+3. 部分接口因后端未提供，使用了 `console.warn` 提示，不影响核心功能
+4. 知识库的启用/禁用状态暂时仅在前端维护
+
+---
+
+**最后更新时间**：2024-10-28
diff --git a/Cunkebao/src/pages/mobile/workspace/main/index.tsx b/Cunkebao/src/pages/mobile/workspace/main/index.tsx
index 6627d6302..afa0c42aa 100644
--- a/Cunkebao/src/pages/mobile/workspace/main/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/main/index.tsx
@@ -8,6 +8,7 @@ import {
   LinkOutlined,
   ClockCircleOutlined,
   ContactsOutlined,
+  BookOutlined,
 } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
 import MeauMobile from "@/components/MeauMobile/MeauMoible";
@@ -75,12 +76,26 @@ const Workspace: React.FC = () => {
       name: "通讯录导入",
       description: "批量导入通讯录联系人",
       icon: (
-        <ContactsOutlined className={styles.icon} style={{ color: "#722ed1" }} />
+        <ContactsOutlined
+          className={styles.icon}
+          style={{ color: "#722ed1" }}
+        />
       ),
       path: "/workspace/contact-import/list",
       bgColor: "#f9f0ff",
       isNew: true,
     },
+    {
+      id: "ai-knowledge",
+      name: "AI知识库",
+      description: "管理和配置内容",
+      icon: (
+        <BookOutlined className={styles.icon} style={{ color: "#fa8c16" }} />
+      ),
+      path: "/workspace/ai-knowledge",
+      bgColor: "#fff7e6",
+      isNew: true,
+    },
   ];
 
   return (
diff --git a/Cunkebao/src/router/module/workspace.tsx b/Cunkebao/src/router/module/workspace.tsx
index a52762df9..f0f36ac34 100644
--- a/Cunkebao/src/router/module/workspace.tsx
+++ b/Cunkebao/src/router/module/workspace.tsx
@@ -20,6 +20,9 @@ import ContactImportForm from "@/pages/mobile/workspace/contact-import/form";
 import ContactImportDetail from "@/pages/mobile/workspace/contact-import/detail";
 import PlaceholderPage from "@/components/PlaceholderPage";
 import AiAnalyzer from "@/pages/mobile/workspace/ai-analyzer";
+import AIKnowledgeList from "@/pages/mobile/workspace/ai-knowledge/list";
+import AIKnowledgeDetail from "@/pages/mobile/workspace/ai-knowledge/detail";
+import AIKnowledgeForm from "@/pages/mobile/workspace/ai-knowledge/form";
 
 const workspaceRoutes = [
   {
@@ -178,6 +181,27 @@ const workspaceRoutes = [
     element: <ContactImportDetail />,
     auth: true,
   },
+  // AI知识库
+  {
+    path: "/workspace/ai-knowledge",
+    element: <AIKnowledgeList />,
+    auth: true,
+  },
+  {
+    path: "/workspace/ai-knowledge/new",
+    element: <AIKnowledgeForm />,
+    auth: true,
+  },
+  {
+    path: "/workspace/ai-knowledge/:id",
+    element: <AIKnowledgeDetail />,
+    auth: true,
+  },
+  {
+    path: "/workspace/ai-knowledge/:id/edit",
+    element: <AIKnowledgeForm />,
+    auth: true,
+  },
 ];
 
 export default workspaceRoutes;

From 6b3948d45486a77072a716fd6b03867faf2117d1 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: Thu, 30 Oct 2025 15:26:48 +0800
Subject: [PATCH 11/19] Refactor Power Management component to enhance user
 experience with improved power package and consumption record management.
 Introduce new API interfaces for power statistics and consumption records,
 and update UI elements for better navigation and interaction.

---
 .../mobile/mine/recharge/buy-power/api.ts     |  46 ++
 .../mine/recharge/buy-power/index.module.scss | 254 ++++++
 .../mobile/mine/recharge/buy-power/index.tsx  | 264 +++++++
 .../pages/mobile/mine/recharge/index/api.ts   | 146 +++-
 .../mine/recharge/index/index.module.scss     | 692 +++++++----------
 .../mobile/mine/recharge/index/index.tsx      | 726 ++++++------------
 .../mobile/mine/recharge/usage-records/api.ts |  46 ++
 .../recharge/usage-records/index.module.scss  | 107 +++
 .../mine/recharge/usage-records/index.tsx     | 225 ++++++
 Cunkebao/src/router/module/mine.tsx           |  12 +
 10 files changed, 1623 insertions(+), 895 deletions(-)
 create mode 100644 Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx
 create mode 100644 Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts
 create mode 100644 Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.module.scss
 create mode 100644 Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.tsx

diff --git a/Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts
new file mode 100644
index 000000000..d067b1a3c
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts
@@ -0,0 +1,46 @@
+import request from "@/api/request";
+
+// 算力包套餐类型（仅 buy-power 页面用到类型定义，须保留）
+export interface PowerPackage {
+  id: number;
+  name: string;
+  tokens: number; // 算力点数
+  price: number; // 价格（分）
+  originalPrice: number; // 原价（分）
+  unitPrice: number; // 单价
+  discount: number; // 折扣百分比
+  isTrial: number; // 是否试用套餐
+  isRecommend: number; // 是否推荐
+  isHot: number; // 是否热门
+  isVip: number; // 是否VIP
+  features: string[]; // 功能特性
+  status: number;
+  createTime: string;
+  updateTime: string;
+}
+
+// 获取套餐列表
+export function getTaocanList(): Promise<{ list: PowerPackage[] }> {
+  return request("/v1/tokens/list", {}, "GET");
+}
+
+export interface BuyPackageParams {
+  /**
+   * 二选一
+   */
+  id?: number;
+  /**
+   * 二选一 自定义购买金额
+   */
+  price?: number;
+  [property: string]: any;
+}
+// 购买套餐
+export function buyPackage(params: BuyPackageParams) {
+  return request("/v1/tokens/pay", params, "POST");
+}
+
+// 自定义购买算力
+export function buyCustomPower(params: { amount: number }) {
+  return request("/v1/power/buy-custom", params, "POST");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.module.scss b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.module.scss
new file mode 100644
index 000000000..5e1ee0839
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.module.scss
@@ -0,0 +1,254 @@
+// 购买算力包页面样式
+.buyPowerPage {
+  padding: 16px;
+  background: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 80px; // 为底部按钮留空间
+}
+
+.sectionTitle {
+  font-size: 17px;
+  font-weight: 600;
+  color: #222;
+  margin-bottom: 16px;
+  padding-left: 4px;
+}
+
+// 套餐列表
+.packageList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.packageCard {
+  padding: 16px;
+  border-radius: 12px;
+  border: 2px solid #e5e5e5;
+  transition: all 0.3s;
+  cursor: pointer;
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.packageCardActive {
+  border-color: #1890ff;
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+.packageHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+
+.packageTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.packageName {
+  font-size: 17px;
+  font-weight: 600;
+  color: #222;
+}
+
+.packageTag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.tag-orange {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.tag-blue {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+
+.tag-green {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.tag-purple {
+  background: #f9f0ff;
+  color: #722ed1;
+}
+
+.packagePrice {
+  text-align: right;
+}
+
+.currentPrice {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-right: 6px;
+}
+
+.originalPrice {
+  font-size: 14px;
+  color: #999;
+  text-decoration: line-through;
+}
+
+.packageTokens {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.packageMeta {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 12px;
+  padding: 10px 0;
+  border-top: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.unitPrice,
+.discount {
+  font-size: 12px;
+  color: #888;
+  line-height: 1.6;
+}
+
+.unitPriceValue,
+.discountValue {
+  font-size: 16px;
+  font-weight: 600;
+  color: #52c41a;
+}
+
+.packageFeatures {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.featureItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #666;
+}
+
+.featureIcon {
+  color: #52c41a;
+  font-size: 14px;
+}
+
+// 自定义购买卡片
+.customCard {
+  padding: 16px;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.customHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.customIcon {
+  font-size: 20px;
+  color: #1890ff;
+}
+
+.customTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+}
+
+.customContent {
+  padding-top: 8px;
+}
+
+.customLabel {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+// 安全保障卡片
+.securityCard {
+  padding: 16px;
+  border-radius: 12px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  box-shadow: none;
+}
+
+.securityHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.securityIcon {
+  font-size: 20px;
+  color: #52c41a;
+}
+
+.securityTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: #166534;
+}
+
+.securityList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.securityItem {
+  font-size: 13px;
+  color: #166534;
+  line-height: 1.6;
+}
+
+// 底部按钮
+.footer {
+  padding: 16px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.buyButton {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 14px;
+  border-radius: 12px;
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    background: #d9d9d9;
+    opacity: 0.6;
+  }
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx
new file mode 100644
index 000000000..e701df6a6
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx
@@ -0,0 +1,264 @@
+import React, { useState, useEffect } from "react";
+import { Card, Button, Toast, Dialog } from "antd-mobile";
+import { Input } from "antd";
+import style from "./index.module.scss";
+import {
+  ThunderboltOutlined,
+  CheckCircleOutlined,
+  SafetyOutlined,
+} from "@ant-design/icons";
+import NavCommon from "@/components/NavCommon";
+import Layout from "@/components/Layout/Layout";
+import { getTaocanList, buyPackage } from "./api";
+import type { PowerPackage } from "./api";
+
+const BuyPowerPage: React.FC = () => {
+  const [packages, setPackages] = useState<PowerPackage[]>([]);
+  const [selectedPackage, setSelectedPackage] = useState<PowerPackage | null>(
+    null,
+  );
+  const [customAmount, setCustomAmount] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetchPackages();
+  }, []);
+
+  const fetchPackages = async () => {
+    try {
+      const res = await getTaocanList();
+      setPackages(res.list || []);
+    } catch (error) {
+      console.error("获取套餐列表失败:", error);
+      Toast.show({ content: "获取套餐列表失败", position: "top" });
+    }
+  };
+
+  const getPackageTag = (pkg: PowerPackage) => {
+    if (pkg.isTrial === 1) return { text: "限购一次", color: "orange" };
+    if (pkg.isRecommend === 1) return { text: "推荐", color: "blue" };
+    if (pkg.isHot === 1) return { text: "热门", color: "green" };
+    if (pkg.isVip === 1) return { text: "VIP", color: "purple" };
+    return null;
+  };
+
+  const handleSelectPackage = (pkg: PowerPackage) => {
+    setSelectedPackage(pkg);
+    setCustomAmount(""); // 清空自定义金额
+  };
+
+  const handleBuy = async () => {
+    if (!selectedPackage && !customAmount) {
+      Toast.show({ content: "请选择套餐或输入自定义金额", position: "top" });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      let res;
+
+      if (customAmount) {
+        // 自定义购买
+        const amount = parseFloat(customAmount);
+        if (isNaN(amount) || amount < 1 || amount > 50000) {
+          Toast.show({ content: "请输入1-50000之间的金额", position: "top" });
+          setLoading(false);
+          return;
+        }
+        res = await buyPackage({ price: amount });
+      } else if (selectedPackage) {
+        // 套餐购买
+        res = await buyPackage({
+          id: selectedPackage.id,
+          price: selectedPackage.price,
+        });
+      }
+
+      if (res?.code_url) {
+        // 显示支付二维码
+        Dialog.show({
+          content: (
+            <div style={{ textAlign: "center", padding: "20px" }}>
+              <div
+                style={{
+                  marginBottom: "16px",
+                  fontSize: "16px",
+                  fontWeight: "500",
+                }}
+              >
+                请使用微信扫码支付
+              </div>
+              <img
+                src={res.code_url}
+                alt="支付二维码"
+                style={{ width: "250px", height: "250px", margin: "0 auto" }}
+              />
+              <div
+                style={{ marginTop: "16px", color: "#666", fontSize: "14px" }}
+              >
+                {selectedPackage
+                  ? `支付金额: ¥${selectedPackage.price / 100}`
+                  : `支付金额: ¥${customAmount}`}
+              </div>
+            </div>
+          ),
+          closeOnMaskClick: true,
+        });
+      }
+    } catch (error) {
+      console.error("购买失败:", error);
+      Toast.show({ content: "购买失败，请重试", position: "top" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Layout
+      header={<NavCommon title="购买算力包" />}
+      footer={
+        <div className={style.footer}>
+          <Button
+            block
+            color="primary"
+            size="large"
+            className={style.buyButton}
+            loading={loading}
+            onClick={handleBuy}
+            disabled={!selectedPackage && !customAmount}
+          >
+            {selectedPackage
+              ? `立即购买 ¥${selectedPackage.price / 100}`
+              : customAmount
+                ? `立即购买 ¥${customAmount}`
+                : "请选择套餐"}
+          </Button>
+        </div>
+      }
+    >
+      <div className={style.buyPowerPage}>
+        {/* 选择套餐标题 */}
+        <div className={style.sectionTitle}>选择套餐</div>
+
+        {/* 套餐列表 */}
+        <div className={style.packageList}>
+          {packages.map(pkg => {
+            const tag = getPackageTag(pkg);
+            const isSelected = selectedPackage?.id === pkg.id;
+
+            return (
+              <Card
+                key={pkg.id}
+                className={`${style.packageCard} ${isSelected ? style.packageCardActive : ""}`}
+                onClick={() => handleSelectPackage(pkg)}
+              >
+                {/* 套餐头部 */}
+                <div className={style.packageHeader}>
+                  <div className={style.packageTitle}>
+                    <span className={style.packageName}>{pkg.name}</span>
+                    {tag && (
+                      <span
+                        className={`${style.packageTag} ${style[`tag-${tag.color}`]}`}
+                      >
+                        {tag.text}
+                      </span>
+                    )}
+                  </div>
+                  <div className={style.packagePrice}>
+                    <span className={style.currentPrice}>
+                      ¥{pkg.price / 100}
+                    </span>
+                    {pkg.originalPrice && (
+                      <span className={style.originalPrice}>
+                        ¥{pkg.originalPrice / 100}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                {/* 算力信息 */}
+                <div className={style.packageTokens}>
+                  {pkg.tokens?.toLocaleString()} 算力点
+                </div>
+
+                {/* 单价和优惠 */}
+                <div className={style.packageMeta}>
+                  <div className={style.unitPrice}>
+                    单价
+                    <br />
+                    <span className={style.unitPriceValue}>
+                      ¥{(pkg.unitPrice / 100).toFixed(4)}/点
+                    </span>
+                  </div>
+                  {pkg.discount > 0 && (
+                    <div className={style.discount}>
+                      优惠幅度
+                      <br />
+                      <span className={style.discountValue}>
+                        {pkg.discount}%
+                      </span>
+                    </div>
+                  )}
+                </div>
+
+                {/* 特性列表 */}
+                {pkg.features && pkg.features.length > 0 && (
+                  <div className={style.packageFeatures}>
+                    {pkg.features.map((feature, index) => (
+                      <div key={index} className={style.featureItem}>
+                        <CheckCircleOutlined className={style.featureIcon} />
+                        {feature}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </Card>
+            );
+          })}
+        </div>
+
+        {/* 自定义购买 */}
+        <Card className={style.customCard}>
+          <div className={style.customHeader}>
+            <ThunderboltOutlined className={style.customIcon} />
+            <span className={style.customTitle}>自定义购买</span>
+          </div>
+          <div className={style.customContent}>
+            <div className={style.customLabel}>自定义金额（1-50000元）</div>
+            <Input
+              type="number"
+              placeholder="请输入金额"
+              value={customAmount}
+              onChange={e => {
+                setCustomAmount(e.target.value);
+                setSelectedPackage(null); // 清空套餐选择
+              }}
+              style={{ fontSize: 16 }}
+            />
+          </div>
+        </Card>
+
+        {/* 安全保障 */}
+        <Card className={style.securityCard}>
+          <div className={style.securityHeader}>
+            <SafetyOutlined className={style.securityIcon} />
+            <span className={style.securityTitle}>安全保障</span>
+          </div>
+          <div className={style.securityList}>
+            <div className={style.securityItem}>
+              • 所有算力永久有效,无使用期限
+            </div>
+            <div className={style.securityItem}>
+              • 支持微信支付、支付宝安全支付
+            </div>
+            <div className={style.securityItem}>
+              • 购买后立即到账,7x24小时客服支持
+            </div>
+          </div>
+        </Card>
+      </div>
+    </Layout>
+  );
+};
+
+export default BuyPowerPage;
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
index c2034d7e3..a7515f22a 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
@@ -1,35 +1,131 @@
 import request from "@/api/request";
 
-interface taocanItem {
-  id: 1;
-  name: "试用套餐";
-  tokens: "2,800";
-  price: 9800;
-  originalPrice: 140;
-  description: ["适合新用户体验", "包含基础AI功能", "永久有效", "客服支持"];
-  sort: 1;
-  isTrial: 1;
-  isRecommend: 0;
-  isHot: 0;
-  isVip: 0;
-  status: 1;
-  isDel: 0;
-  delTime: null;
-  createTime: "2025-09-29 16:53:06";
-  updateTime: "2025-09-29 16:53:06";
-  discount: 30;
-  unitPrice: 3.5;
+// 算力包套餐类型
+export interface PowerPackage {
+  id: number;
+  name: string;
+  tokens: number; // 算力点数
+  price: number; // 价格（分）
+  originalPrice: number; // 原价（分）
+  unitPrice: number; // 单价
+  discount: number; // 折扣百分比
+  isTrial: number; // 是否试用套餐
+  isRecommend: number; // 是否推荐
+  isHot: number; // 是否热门
+  isVip: number; // 是否VIP
+  features: string[]; // 功能特性
+  status: number;
+  createTime: string;
+  updateTime: string;
 }
 
-interface taocanList {
-  list: taocanItem[];
+// 算力统计信息
+export interface PowerStats {
+  balance: number; // 账户余额（元）
+  totalPower: number; // 总算力
+  todayUsed: number; // 今日使用
+  monthUsed: number; // 本月使用
+  remainingPower: number; // 剩余算力
 }
-// 套餐列表
-export function getTaocanList(): Promise<taocanList> {
+
+// 消费记录类型
+export interface ConsumptionRecord {
+  id: number;
+  type: string; // AI分析、内容生成等
+  status: string; // 已完成、进行中等
+  amount: number; // 消费金额（元）
+  power: number; // 消耗算力
+  description: string; // 描述
+  createTime: string;
+}
+
+export interface OrderListParams {
+  /**
+   * 关键词搜索（订单号、商品名称）
+   */
+  keyword?: string;
+  /**
+   * 每页数量（默认10）
+   */
+  limit?: string;
+  /**
+   * 订单类型（1-算力充值）
+   */
+  orderType?: string;
+  /**
+   * 页码
+   */
+  page?: string;
+  /**
+   * 订单状态（0-待支付 1-已支付 2-已取消 3-已退款）
+   */
+  status?: string;
+  [property: string]: any;
+}
+
+interface OrderList {
+  id?: number;
+  mchId?: number;
+  companyId?: number;
+  userId?: number;
+  orderType?: number;
+  status?: number;
+  goodsId?: number;
+  goodsName?: string;
+  goodsSpecs?: {
+    id: number;
+    name: string;
+    price: number;
+    tokens: number;
+  };
+  money?: number;
+  orderNo?: string;
+  ip?: string;
+  nonceStr?: string;
+  createTime?: string;
+  payType?: number;
+  payTime?: string;
+  payInfo?: any;
+  deleteTime?: string;
+  tokens?: string;
+  statusText?: string;
+  orderTypeText?: string;
+  payTypeText?: string;
+}
+
+// 获取订单列表
+export function getOrderList(
+  params: OrderListParams,
+): Promise<{ list: OrderList[]; total: number }> {
+  return request("/v1/tokens/orderList", params, "GET");
+}
+
+// 获取算力统计
+export function getPowerStats(): Promise<PowerStats> {
+  return request("/v1/power/stats", {}, "GET");
+}
+
+// 获取套餐列表
+export function getTaocanList(): Promise<{ list: PowerPackage[] }> {
   return request("/v1/tokens/list", {}, "GET");
 }
 
-// 支付id和price 从套餐列表取对应的价格
-export function pay(params: { id: string; price: number }) {
+// 获取消费记录
+export function getConsumptionRecords(params: {
+  page?: number;
+  limit?: number;
+  type?: string;
+  status?: string;
+}): Promise<{ list: ConsumptionRecord[]; total: number }> {
+  return request("/v1/power/consumption-records", params, "GET");
+}
+
+// 购买套餐
+export function buyPackage(params: { id: number; price: number }) {
   return request("/v1/tokens/pay", params, "POST");
 }
+
+// 自定义购买算力
+export function buyCustomPower(params: { amount: number }) {
+  return request("/v1/power/buy-custom", params, "POST");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
index 46a297c11..78c67f9fd 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
@@ -1,448 +1,340 @@
-.recharge-page {
+// 算力管理页面样式
+.powerPage {
+  background: #f5f5f5;
+  min-height: 100vh;
 }
 
-.record-btn {
-  color: var(--primary-color);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background-color: rgba(24, 142, 238, 0.1);
+.powerTabs {
+  :global {
+    .adm-tabs-header {
+      background: #fff;
+      border-bottom: 1px solid #f0f0f0;
+    }
   }
+}
+
+.refreshBtn {
+  font-size: 18px;
+  color: #666;
+  cursor: pointer;
+  padding: 4px;
 
   &:active {
-    background-color: rgba(24, 142, 238, 0.2);
+    opacity: 0.6;
   }
 }
 
-.recharge-tabs {
-  :global(.adm-tabs-header) {
-    background: #fff;
-    border-bottom: 1px solid #f0f0f0;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  :global(.adm-tabs-tab) {
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  :global(.adm-tabs-tab-active) {
-    color: var(--primary-color);
-  }
-
-  :global(.adm-tabs-tab-line) {
-    background: var(--primary-color);
-  }
+// ==================== 概览Tab ====================
+.overviewContent {
 }
 
-.tab-content {
-}
-
-.balance-card {
+.accountCards {
+  display: flex;
+  gap: 12px;
   margin-bottom: 16px;
-  background: #f6ffed;
-  border: 1px solid #b7eb8f;
-  border-radius: 12px;
-  padding: 18px 0 18px 0;
+}
+
+.balanceCard,
+.powerCard {
+  flex: 1;
+  border-radius: 10px;
+  border: 1px solid #f0f0f0;
+}
+
+.balanceCard {
+  border: 1px solid #cbdbea;
+  background: #edfcff;
+}
+
+.powerCard {
+  border: 1px solid #e3dbf0;
+  background: #f9f0ff;
+}
+.powerCard .iconWrapper {
+  background: #e9d9ff;
+}
+
+.cardContent {
   display: flex;
   align-items: center;
-  .balance-content {
-    display: flex;
-    color: #16b364;
-    padding-left: 30px;
-  }
-  .wallet-icon {
-    color: #16b364;
-    font-size: 30px;
-    flex-shrink: 0;
-  }
-  .balance-info {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .balance-label {
-    font-size: 14px;
-    font-weight: normal;
-    color: #666;
-    margin-bottom: 2px;
-  }
-  .balance-amount {
-    font-size: 24px;
-    font-weight: 700;
-    color: #16b364;
-    line-height: 1.1;
-  }
+  gap: 12px;
 }
 
-.quick-card {
-  margin-bottom: 16px;
-  .quick-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    justify-content: flex-start;
-    margin-bottom: 8px;
-  }
-}
-
-.desc-card {
-  margin: 16px 0px;
-  background: #fffbe6;
-  border: 1px solid #ffe58f;
-}
-
-.warn-card {
-  margin: 16px 0;
-  background: #fff2e8;
-  border: 1px solid #ffbb96;
-}
-
-.quick-title {
-  font-weight: 500;
-  margin-bottom: 8px;
-  font-size: 16px;
-}
-.quick-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: flex-start;
-  margin-bottom: 8px;
-}
-.quick-btn {
-  min-width: 80px;
-  margin: 4px 0;
-  font-size: 16px;
+.iconWrapper {
+  width: 48px;
+  height: 48px;
   border-radius: 8px;
-  padding: 12px 16px;
-
-  div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}
-.quick-btn-active {
-  @extend .quick-btn;
-  font-weight: 600;
-  border: 2px solid var(--primary-color);
-}
-.recharge-main-btn {
-  margin-top: 16px;
-  font-size: 18px;
-  border-radius: 8px;
-}
-.desc-title {
-  font-weight: 500;
-  margin-bottom: 8px;
-  font-size: 16px;
-}
-.desc-text {
-  color: #666;
-  font-size: 14px;
-}
-.warn-content {
   display: flex;
   align-items: center;
-  gap: 8px;
-  color: #faad14;
-  font-size: 14px;
-}
-.warn-icon {
-  font-size: 30px;
-  color: #faad14;
+  justify-content: center;
   flex-shrink: 0;
 }
-.warn-info {
-  display: flex;
-  flex-direction: column;
-}
-.warn-title {
-  font-weight: 600;
-  font-size: 15px;
-}
-.warn-text {
-  color: #faad14;
-  font-size: 14px;
+
+.balanceCard .iconWrapper {
+  background: #d6edff;
 }
 
-// AI服务样式
-.ai-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.ai-title {
-  display: flex;
-  align-items: center;
-  font-size: 20px;
-  font-weight: 700;
-  color: #222;
-}
-
-.ai-icon {
+.cardIcon {
   font-size: 24px;
-  color: var(--primary-color);
-  margin-right: 8px;
 }
 
-.ai-tag {
-  background: #ff6b35;
-  color: #fff;
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-weight: 500;
-}
-
-.ai-description {
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-.ai-services {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.ai-service-card {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
-
-.service-header {
-  margin-bottom: 12px;
-}
-
-.service-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.service-icon {
-  font-size: 24px;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f0f0f0;
-  border-radius: 8px;
-}
-
-.service-details {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.service-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #222;
-}
-
-.service-price {
-  font-size: 16px;
-  font-weight: 700;
-  color: #ff4d4f;
-}
-
-.service-description {
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 12px;
-  line-height: 1.5;
-}
-
-.service-features {
-  margin-bottom: 16px;
-}
-
-.feature-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
-  font-size: 14px;
-  color: #333;
-}
-
-.feature-check {
-  color: #52c41a;
-  font-weight: bold;
-  font-size: 16px;
-}
-
-.usage-progress {
-  margin-top: 12px;
-}
-
-.usage-label {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 8px;
-}
-
-.progress-bar {
-  width: 100%;
-  height: 6px;
-  background: #f0f0f0;
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 6px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: var(--primary-color);
-  border-radius: 3px;
-  transition: width 0.3s ease;
-}
-
-.usage-text {
-  font-size: 12px;
-  color: #999;
-  text-align: right;
-}
-
-// 版本套餐样式
-.version-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-size: 20px;
-  font-weight: 700;
-  color: #222;
-}
-
-.version-icon {
-  font-size: 24px;
-  color: #722ed1;
-}
-
-.version-description {
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-.version-packages {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.version-card {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  position: relative;
-}
-
-.package-header {
-  margin-bottom: 12px;
-}
-
-.package-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.package-icon {
-  font-size: 24px;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f0f0f0;
-  border-radius: 8px;
-}
-
-.package-details {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.package-name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #222;
-}
-
-.package-tag {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-}
-
-.tag-blue {
-  background: #e6f7ff;
+.balanceCard .cardIcon {
   color: #1890ff;
 }
 
-.tag-green {
-  background: #f6ffed;
-  color: #52c41a;
+.powerCard .cardIcon {
+  color: #722ed1;
 }
 
-.package-price {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--primary-color);
+.textWrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.package-description {
+.cardTitle {
+  font-size: 12px;
   color: #666;
-  font-size: 14px;
-  margin-bottom: 12px;
-  line-height: 1.5;
+  margin-bottom: 4px;
 }
 
-.package-features {
+.cardValue {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+}
+
+.balanceCard .cardValue {
+  color: #1890ff;
+}
+
+.powerCard .cardValue {
+  color: #722ed1;
+}
+
+// 使用情况卡片
+.usageCard {
+  padding: 20px 16px;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.usageTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
   margin-bottom: 16px;
 }
 
-.features-title {
-  font-size: 14px;
+.usageStats {
+  display: flex;
+  justify-content: space-between;
+}
+
+.usageItem {
+  flex: 1;
+  text-align: center;
+}
+
+.usageValue {
+  font-size: 32px;
   font-weight: 600;
-  color: #333;
   margin-bottom: 8px;
 }
 
-.package-status {
-  text-align: center;
+.valueGreen {
   color: #52c41a;
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 12px;
 }
 
-.upgrade-btn {
-  border-radius: 8px;
+.valueBlue {
+  color: #1890ff;
+}
+
+.valuePurple {
+  color: #722ed1;
+}
+
+.usageLabel {
+  font-size: 13px;
+  color: #888;
+}
+
+// 快速操作卡片
+.actionCard {
+  padding: 20px 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.actionTitle {
   font-size: 16px;
   font-weight: 600;
+  color: #222;
+  margin-bottom: 16px;
+}
+
+.actionButtons {
+  display: flex;
+  gap: 12px;
+}
+
+.buyButton {
+  flex: 1;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 500;
+  padding: 12px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.buttonIcon {
+  font-size: 16px;
+}
+
+.recordButton {
+  flex: 1;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  color: #333;
+  font-size: 15px;
+  padding: 12px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  &:active {
+    background: #f5f5f5;
+  }
+}
+
+// ==================== 消费记录Tab ====================
+.recordsContent {
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.filterButton {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+
+  span {
+    font-size: 12px;
+  }
+}
+
+.recordList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.recordItem {
+  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid #f0f0f0;
+}
+
+.recordHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+
+.recordLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.recordType {
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+}
+
+.recordStatus {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.recordRight {
+  text-align: right;
+}
+
+.recordAmount {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ff4d4f;
+  margin-bottom: 4px;
+}
+
+.recordPower {
+  font-size: 12px;
+  color: #666;
+}
+
+.recordDesc {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 6px;
+}
+
+.recordTime {
+  font-size: 12px;
+  color: #999;
+}
+
+.emptyRecords {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.emptyIcon {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.emptyText {
+  font-size: 14px;
+  color: #999;
+}
+
+.loadingContainer {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.loadingText {
+  font-size: 14px;
+  color: #999;
+  margin-top: 12px;
 }
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
index ac5ef9e51..4bd724080 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
@@ -1,497 +1,290 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Card, Button, Toast, Tabs, Dialog } from "antd-mobile";
+import { Card, Button, Toast, Tabs, Tag, Picker } from "antd-mobile";
 import style from "./index.module.scss";
 import {
-  WalletOutlined,
-  WarningOutlined,
-  ClockCircleOutlined,
-  RobotOutlined,
-  CrownOutlined,
+  SyncOutlined,
+  ShoppingCartOutlined,
+  HistoryOutlined,
+  LineChartOutlined,
+  DownOutlined,
 } from "@ant-design/icons";
 import NavCommon from "@/components/NavCommon";
 import Layout from "@/components/Layout/Layout";
-import { getTaocanList, pay } from "./api";
+import { getPowerStats, getOrderList } from "./api";
+import type { PowerStats } from "./api";
 
-// AI服务列表数据
-const aiServices = [
-  {
-    id: 1,
-    name: "添加好友及打招呼",
-    icon: "💬",
-    price: 1,
-    description: "AI智能添加好友并发送个性化打招呼消息",
-    features: ["智能筛选目标用户", "发送个性化打招呼消息", "自动记录添加结果"],
-    usage: { current: 15, total: 450 },
-  },
-  {
-    id: 2,
-    name: "小室AI内容生产",
-    icon: "⚡",
-    price: 1,
-    description: "AI智能创建朋友圈内容,智能配文与朋友圈内容",
-    features: ["智能生成朋友圈文案", "AI配文智能文案", "内容智能排版优化"],
-    usage: { current: 28, total: 680 },
-  },
-  {
-    id: 3,
-    name: "智能分发服务",
-    icon: "📤",
-    price: 1,
-    description: "AI智能分发内容到多个平台",
-    features: ["多平台智能分发", "内容智能优化", "分发效果分析"],
-    usage: { current: 12, total: 300 },
-  },
-];
+type OrderRecordView = {
+  id: number;
+  type: string;
+  status: string;
+  amount: number; // 元
+  power: number;
+  description: string;
+  createTime: string;
+};
 
-// 快捷金额选项（可选）
-const quickAmounts = [50, 100, 200, 500, 1000, 2000];
-
-const Recharge: React.FC = () => {
+const PowerManagement: React.FC = () => {
   const navigate = useNavigate();
-  // 假设余额从后端接口获取，实际可用props或store传递
-  const [balance] = useState(0);
-  const [selected, setSelected] = useState<any | null>(null);
+  const [activeTab, setActiveTab] = useState("overview");
   const [loading, setLoading] = useState(false);
-  const [activeTab, setActiveTab] = useState("account");
-  const [taocanList, setTaocanList] = useState<any[]>([]);
-  const [customAmount, setCustomAmount] = useState(""); // 自定义充值金额
+  const [stats, setStats] = useState<PowerStats | null>(null);
+  const [records, setRecords] = useState<OrderRecordView[]>([]);
+  const [filterType, setFilterType] = useState<string>("all");
+  const [filterStatus, setFilterStatus] = useState<string>("all");
+  const [filterTypeVisible, setFilterTypeVisible] = useState(false);
+  const [filterStatusVisible, setFilterStatusVisible] = useState(false);
+
+  const typeOptions = [
+    { label: "全部类型", value: "all" },
+    { label: "AI分析", value: "ai_analysis" },
+    { label: "内容生成", value: "content_gen" },
+    { label: "数据训练", value: "data_train" },
+    { label: "智能推荐", value: "smart_rec" },
+    { label: "语音识别", value: "voice_rec" },
+  ];
+
+  const statusOptions = [
+    { label: "全部状态", value: "all" },
+    { label: "已完成", value: "completed" },
+    { label: "进行中", value: "processing" },
+    { label: "已取消", value: "cancelled" },
+  ];
 
-  // 加载套餐列表
   useEffect(() => {
-    const loadTaocanList = async () => {
-      try {
-        const res = await getTaocanList();
-        if (res.list) {
-          setTaocanList(res.list);
-        }
-      } catch (error) {
-        console.error("加载套餐列表失败:", error);
-        Toast.show({ content: "加载套餐列表失败", position: "top" });
-      }
-    };
-    loadTaocanList();
+    fetchStats();
   }, []);
 
-  // 账户充值操作（自定义金额）
-  const handleCustomRecharge = async () => {
-    const amount = parseFloat(customAmount);
-    if (!customAmount || isNaN(amount) || amount <= 0) {
-      Toast.show({ content: "请输入有效的充值金额", position: "top" });
-      return;
-    }
-    if (amount < 1) {
-      Toast.show({ content: "充值金额不能小于1元", position: "top" });
-      return;
-    }
-    if (amount > 100000) {
-      Toast.show({ content: "单次充值金额不能超过10万元", position: "top" });
-      return;
+  useEffect(() => {
+    if (activeTab === "records") {
+      fetchRecords();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeTab, filterType, filterStatus]);
 
+  const fetchStats = async () => {
+    try {
+      const res = await getPowerStats();
+      setStats(res);
+    } catch (error) {
+      console.error("获取统计失败:", error);
+      Toast.show({ content: "获取数据失败", position: "top" });
+    }
+  };
+
+  const fetchRecords = async () => {
     setLoading(true);
     try {
-      const res = await pay({
-        id: "", // 自定义充值不需要套餐ID
-        price: Math.round(amount * 100), // 转换为分
+      // 映射状态到订单状态：0待支付 1已支付 2已取消 3已退款
+      const statusMap: Record<string, string | undefined> = {
+        all: undefined,
+        completed: "1",
+        processing: "0",
+        cancelled: "2",
+      };
+
+      const res = await getOrderList({
+        page: "1",
+        limit: "100",
+        orderType: "1",
+        status: statusMap[filterStatus],
       });
-      // 假设返回的是二维码链接，存储在res中
-      if (res) {
-        // 显示二维码弹窗
-        Dialog.show({
-          content: (
-            <div style={{ textAlign: "center", padding: "20px" }}>
-              <div
-                style={{
-                  marginBottom: "16px",
-                  fontSize: "16px",
-                  fontWeight: "500",
-                }}
-              >
-                请使用微信扫码支付
-              </div>
-              <img
-                src={res.code_url as any}
-                alt="支付二维码"
-                style={{ width: "250px", height: "250px", margin: "0 auto" }}
-              />
-              <div
-                style={{ marginTop: "16px", color: "#666", fontSize: "14px" }}
-              >
-                支付金额: ¥{amount.toFixed(2)}
-              </div>
-            </div>
-          ),
-          closeOnMaskClick: true,
-        });
-      }
+
+      const list = (res.list || []).map((o: any) => ({
+        id: o.id,
+        type: o.orderTypeText || o.goodsName || "充值订单",
+        status: o.statusText || "",
+        amount: typeof o.money === "number" ? o.money / 100 : 0,
+        power: Number(o.goodsSpecs?.tokens ?? o.tokens ?? 0),
+        description: o.goodsName || "",
+        createTime: o.createTime || "",
+      }));
+      setRecords(list);
     } catch (error) {
-      console.error("支付失败:", error);
-      Toast.show({ content: "支付失败，请重试", position: "top" });
+      console.error("获取消费记录失败:", error);
+      Toast.show({ content: "获取消费记录失败", position: "top" });
     } finally {
       setLoading(false);
     }
   };
 
-  // 版本套餐充值操作
-  const handlePackageRecharge = async () => {
-    if (!selected) {
-      Toast.show({ content: "请选择充值套餐", position: "top" });
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await pay({
-        id: selected.id,
-        price: selected.price,
-      });
-      // 假设返回的是二维码链接，存储在res中
-      if (res) {
-        // 显示二维码弹窗
-        Dialog.show({
-          content: (
-            <div style={{ textAlign: "center", padding: "20px" }}>
-              <div
-                style={{
-                  marginBottom: "16px",
-                  fontSize: "16px",
-                  fontWeight: "500",
-                }}
-              >
-                请使用微信扫码支付
-              </div>
-              <img
-                src={res.code_url as any}
-                alt="支付二维码"
-                style={{ width: "250px", height: "250px", margin: "0 auto" }}
-              />
-              <div
-                style={{ marginTop: "16px", color: "#666", fontSize: "14px" }}
-              >
-                支付金额: ¥{selected.price / 100}
-              </div>
-            </div>
-          ),
-          closeOnMaskClick: true,
-        });
-      }
-    } catch (error) {
-      console.error("支付失败:", error);
-      Toast.show({ content: "支付失败，请重试", position: "top" });
-    } finally {
-      setLoading(false);
+  const handleRefresh = () => {
+    if (loading) return;
+    fetchStats();
+    if (activeTab === "records") {
+      fetchRecords();
     }
   };
 
-  // 渲染账户充值tab内容
-  const renderAccountRecharge = () => (
-    <div className={style["tab-content"]}>
-      <Card className={style["balance-card"]}>
-        <div className={style["balance-content"]}>
-          <WalletOutlined className={style["wallet-icon"]} />
-          <div className={style["balance-info"]}>
-            <div className={style["balance-label"]}>当前余额</div>
-            <div className={style["balance-amount"]}>
-              ￥{balance.toFixed(2)}
+  const handleBuyPower = () => {
+    navigate("/recharge/buy-power");
+  };
+
+  const handleViewRecords = () => {
+    navigate("/recharge/usage-records");
+  };
+
+  const getTypeLabel = () => {
+    return (
+      typeOptions.find(opt => opt.value === filterType)?.label || "全部类型"
+    );
+  };
+
+  const getStatusLabel = () => {
+    return (
+      statusOptions.find(opt => opt.value === filterStatus)?.label || "全部状态"
+    );
+  };
+
+  // 渲染概览Tab
+  const renderOverview = () => (
+    <div className={style.overviewContent}>
+      {/* 账户信息卡片 */}
+      <div className={style.accountCards}>
+        <Card className={style.powerCard}>
+          <div className={style.cardContent}>
+            <div className={style.iconWrapper}>
+              <LineChartOutlined className={style.cardIcon} />
             </div>
-          </div>
-        </div>
-      </Card>
-
-      <Card className={style["quick-card"]}>
-        <div className={style["quick-title"]}>充值金额</div>
-
-        {/* 快捷金额选择 */}
-        <div style={{ marginBottom: "16px" }}>
-          <div style={{ marginBottom: "8px", fontSize: "14px", color: "#666" }}>
-            快捷选择
-          </div>
-          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
-            {quickAmounts.map(amount => (
-              <Button
-                key={amount}
-                color={
-                  customAmount === amount.toString() ? "primary" : "default"
-                }
-                onClick={() => setCustomAmount(amount.toString())}
-                style={{ flex: "0 0 calc(33.333% - 6px)" }}
-              >
-                ¥{amount}
-              </Button>
-            ))}
-          </div>
-        </div>
-
-        {/* 自定义金额输入 */}
-        <div style={{ marginBottom: "16px" }}>
-          <div style={{ marginBottom: "8px", fontSize: "14px", color: "#666" }}>
-            或输入自定义金额（元）
-          </div>
-          <input
-            type="number"
-            placeholder="请输入充值金额"
-            value={customAmount}
-            onChange={e => setCustomAmount(e.target.value)}
-            style={{
-              width: "100%",
-              padding: "12px 16px",
-              border: "1px solid #e5e5e5",
-              borderRadius: "8px",
-              fontSize: "16px",
-              outline: "none",
-            }}
-            min="1"
-            max="100000"
-            step="0.01"
-          />
-          <div
-            style={{
-              marginTop: "8px",
-              fontSize: "12px",
-              color: "#999",
-              lineHeight: "1.5",
-            }}
-          >
-            • 最低充值金额：1元
-            <br />
-            • 单次充值上限：100,000元
-            <br />• 支持微信支付
-          </div>
-        </div>
-
-        {customAmount && parseFloat(customAmount) > 0 && (
-          <div
-            style={{
-              marginBottom: "16px",
-              padding: "12px",
-              background: "#e6f7ff",
-              borderRadius: "8px",
-              border: "1px solid #91d5ff",
-            }}
-          >
-            <div
-              style={{ fontSize: "14px", color: "#333", marginBottom: "4px" }}
-            >
-              充值金额：
-              <span
-                style={{
-                  fontSize: "20px",
-                  fontWeight: "600",
-                  color: "#1890ff",
-                }}
-              >
-                ¥{parseFloat(customAmount).toFixed(2)}
-              </span>
-            </div>
-            <div style={{ fontSize: "12px", color: "#666" }}>
-              到账金额：¥{parseFloat(customAmount).toFixed(2)}
-            </div>
-          </div>
-        )}
-
-        <Button
-          block
-          color="primary"
-          size="large"
-          className={style["recharge-main-btn"]}
-          loading={loading}
-          onClick={handleCustomRecharge}
-          disabled={!customAmount || parseFloat(customAmount) <= 0}
-        >
-          立即充值
-        </Button>
-      </Card>
-
-      <Card className={style["desc-card"]}>
-        <div className={style["desc-title"]}>充值说明</div>
-        <div className={style["desc-text"]}>
-          • 充值金额实时到账，可用于购买AI服务和版本套餐
-          <br />
-          • 使用AI服务将从余额中扣除相应费用
-          <br />• 余额支持退款，详情请联系客服
-        </div>
-      </Card>
-
-      {balance < 10 && (
-        <Card className={style["warn-card"]}>
-          <div className={style["warn-content"]}>
-            <WarningOutlined className={style["warn-icon"]} />
-            <div className={style["warn-info"]}>
-              <div className={style["warn-title"]}>余额不足提醒</div>
-              <div className={style["warn-text"]}>
-                当前余额较低，建议及时充值以免影响服务使用
-              </div>
+            <div className={style.textWrapper}>
+              <div className={style.cardTitle}>总算力</div>
+              <div className={style.cardValue}>{stats?.totalPower || 0}</div>
             </div>
           </div>
         </Card>
-      )}
-    </div>
-  );
+      </div>
 
-  // 渲染AI服务tab内容
-  const renderAiServices = () => (
-    <div className={style["tab-content"]}>
-      <div className={style["ai-header"]}>
-        <div className={style["ai-title"]}>
-          <RobotOutlined className={style["ai-icon"]} />
-          AI智能服务收费
+      {/* 使用情况卡片 */}
+      <Card className={style.usageCard}>
+        <div className={style.usageTitle}>使用情况</div>
+        <div className={style.usageStats}>
+          <div className={style.usageItem}>
+            <div className={`${style.usageValue} ${style.valueGreen}`}>
+              {stats?.todayUsed || 0}
+            </div>
+            <div className={style.usageLabel}>今日使用</div>
+          </div>
+          <div className={style.usageItem}>
+            <div className={`${style.usageValue} ${style.valueBlue}`}>
+              {stats?.monthUsed || 0}
+            </div>
+            <div className={style.usageLabel}>本月使用</div>
+          </div>
+          <div className={style.usageItem}>
+            <div className={`${style.usageValue} ${style.valuePurple}`}>
+              {stats?.remainingPower || 0}
+            </div>
+            <div className={style.usageLabel}>剩余算力</div>
+          </div>
         </div>
-        <div className={style["ai-tag"]}>统一按次收费</div>
-      </div>
-      <div className={style["ai-description"]}>
-        三项核心AI服务,按使用次数收费,每次1元
-      </div>
+      </Card>
 
-      <div className={style["ai-services"]}>
-        {aiServices.map(service => (
-          <Card key={service.id} className={style["ai-service-card"]}>
-            <div className={style["service-header"]}>
-              <div className={style["service-info"]}>
-                <div className={style["service-icon"]}>{service.icon}</div>
-                <div className={style["service-details"]}>
-                  <div className={style["service-name"]}>{service.name}</div>
-                  <div className={style["service-price"]}>
-                    ¥{service.price}/次
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className={style["service-description"]}>
-              {service.description}
-            </div>
-            <div className={style["service-features"]}>
-              {service.features.map((feature, index) => (
-                <div key={index} className={style["feature-item"]}>
-                  <span className={style["feature-check"]}>✓</span>
-                  {feature}
-                </div>
-              ))}
-            </div>
-            <div className={style["usage-progress"]}>
-              <div className={style["usage-label"]}>今日使用进度</div>
-              <div className={style["progress-bar"]}>
-                <div
-                  className={style["progress-fill"]}
-                  style={{
-                    width: `${(service.usage.current / service.usage.total) * 100}%`,
-                  }}
-                ></div>
-              </div>
-              <div className={style["usage-text"]}>
-                {service.usage.current} / {service.usage.total}
-              </div>
-            </div>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-
-  // 渲染版本套餐tab内容
-  const renderVersionPackages = () => (
-    <div className={style["tab-content"]}>
-      <div className={style["version-header"]}>
-        <CrownOutlined className={style["version-icon"]} />
-        <span>充值套餐</span>
-      </div>
-      <div className={style["version-description"]}>
-        选择合适的充值套餐，享受更多优惠
-      </div>
-
-      <div className={style["version-packages"]}>
-        {taocanList.map(pkg => (
-          <Card key={pkg.id} className={style["version-card"]}>
-            <div className={style["package-header"]}>
-              <div className={style["package-info"]}>
-                <div className={style["package-icon"]}>💰</div>
-                <div className={style["package-details"]}>
-                  <div className={style["package-name"]}>
-                    {pkg.name}
-                    {pkg.isRecommend === 1 && (
-                      <span
-                        className={`${style["package-tag"]} ${style["tag-blue"]}`}
-                      >
-                        推荐
-                      </span>
-                    )}
-                    {pkg.isHot === 1 && (
-                      <span
-                        className={`${style["package-tag"]} ${style["tag-red"]}`}
-                      >
-                        热门
-                      </span>
-                    )}
-                  </div>
-                  <div className={style["package-price"]}>
-                    ¥{pkg.price / 100}
-                  </div>
-                </div>
-              </div>
-            </div>
-            {pkg.description && (
-              <div className={style["package-description"]}>
-                {pkg.description}
-              </div>
-            )}
-            <div className={style["package-features"]}>
-              <div className={style["features-title"]}>套餐内容:</div>
-              <div className={style["feature-item"]}>
-                <span className={style["feature-check"]}>✓</span>
-                包含 {pkg.tokens} Tokens
-              </div>
-              {pkg.originalPrice && (
-                <div
-                  style={{
-                    fontSize: "12px",
-                    color: "#999",
-                    textDecoration: "line-through",
-                    marginTop: "4px",
-                  }}
-                >
-                  原价: ¥{pkg.originalPrice / 100}
-                </div>
-              )}
-            </div>
-            <Button
-              block
-              color={selected?.id === pkg.id ? "primary" : "default"}
-              className={
-                selected?.id === pkg.id
-                  ? style["upgrade-btn-active"]
-                  : style["upgrade-btn"]
-              }
-              onClick={() => setSelected(pkg)}
-            >
-              {selected?.id === pkg.id ? "已选择" : "选择套餐"}
-            </Button>
-          </Card>
-        ))}
-      </div>
-
-      {selected && (
-        <div
-          style={{
-            position: "fixed",
-            bottom: 0,
-            left: 0,
-            right: 0,
-            padding: "16px",
-            background: "#fff",
-            borderTop: "1px solid #f0f0f0",
-            boxShadow: "0 -2px 8px rgba(0,0,0,0.08)",
-          }}
-        >
+      {/* 快速操作 */}
+      <Card className={style.actionCard}>
+        <div className={style.actionTitle}>快速操作</div>
+        <div className={style.actionButtons}>
+          <Button className={style.buyButton} onClick={handleBuyPower} block>
+            <ShoppingCartOutlined className={style.buttonIcon} />
+            &nbsp; 购买算力包
+          </Button>
           <Button
+            className={style.recordButton}
+            onClick={handleViewRecords}
             block
-            color="primary"
-            size="large"
-            loading={loading}
-            onClick={handlePackageRecharge}
           >
-            立即购买 ¥{selected.price / 100}
+            <HistoryOutlined className={style.buttonIcon} />
+            &nbsp; 使用记录
           </Button>
         </div>
-      )}
+      </Card>
+    </div>
+  );
+
+  // 渲染消费记录Tab
+  const renderRecords = () => (
+    <div className={style.recordsContent}>
+      {/* 筛选器 */}
+      <div className={style.filters}>
+        <Picker
+          columns={[typeOptions]}
+          visible={filterTypeVisible}
+          onClose={() => setFilterTypeVisible(false)}
+          value={[filterType]}
+          onConfirm={value => {
+            setFilterType(value[0] as string);
+            setFilterTypeVisible(false);
+          }}
+        >
+          {() => (
+            <div
+              className={style.filterButton}
+              onClick={() => setFilterTypeVisible(true)}
+            >
+              <DownOutlined className={style.filterIcon} />
+              {getTypeLabel()}
+            </div>
+          )}
+        </Picker>
+
+        <Picker
+          columns={[statusOptions]}
+          visible={filterStatusVisible}
+          onClose={() => setFilterStatusVisible(false)}
+          value={[filterStatus]}
+          onConfirm={value => {
+            setFilterStatus(value[0] as string);
+            setFilterStatusVisible(false);
+          }}
+        >
+          {() => (
+            <div
+              className={style.filterButton}
+              onClick={() => setFilterStatusVisible(true)}
+            >
+              <DownOutlined className={style.filterIcon} />
+              {getStatusLabel()}
+            </div>
+          )}
+        </Picker>
+      </div>
+
+      {/* 消费记录列表 */}
+      <div className={style.recordList}>
+        {loading && records.length === 0 ? (
+          <div className={style.loadingContainer}>
+            <div className={style.loadingText}>加载中...</div>
+          </div>
+        ) : records.length > 0 ? (
+          records.map(record => (
+            <Card key={record.id} className={style.recordItem}>
+              <div className={style.recordHeader}>
+                <div className={style.recordLeft}>
+                  <div className={style.recordType}>{record.type}</div>
+                  <Tag
+                    color={record.status === "已完成" ? "success" : "primary"}
+                    className={style.recordStatus}
+                  >
+                    {record.status}
+                  </Tag>
+                </div>
+                <div className={style.recordRight}>
+                  <div className={style.recordAmount}>
+                    -¥{record.amount.toFixed(1)}
+                  </div>
+                  <div className={style.recordPower}>{record.power} 算力</div>
+                </div>
+              </div>
+              <div className={style.recordDesc}>{record.description}</div>
+              <div className={style.recordTime}>{record.createTime}</div>
+            </Card>
+          ))
+        ) : (
+          <div className={style.emptyRecords}>
+            <div className={style.emptyIcon}>📋</div>
+            <div className={style.emptyText}>暂无消费记录</div>
+          </div>
+        )}
+      </div>
     </div>
   );
 
@@ -499,33 +292,26 @@ const Recharge: React.FC = () => {
     <Layout
       header={
         <NavCommon
-          title="充值中心"
+          title="算力管理"
           right={
-            <div
-              className={style["record-btn"]}
-              onClick={() => navigate("/recharge/order")}
-            >
-              <ClockCircleOutlined />
-              &nbsp;记录
+            <div className={style.refreshBtn} onClick={handleRefresh}>
+              <SyncOutlined spin={loading} />
             </div>
           }
         />
       }
     >
-      <div className={style["recharge-page"]}>
+      <div className={style.powerPage}>
         <Tabs
           activeKey={activeTab}
           onChange={setActiveTab}
-          className={style["recharge-tabs"]}
+          className={style.powerTabs}
         >
-          <Tabs.Tab title="账户充值" key="account">
-            {renderAccountRecharge()}
+          <Tabs.Tab title="概览" key="overview">
+            {renderOverview()}
           </Tabs.Tab>
-          <Tabs.Tab title="AI服务" key="ai">
-            {renderAiServices()}
-          </Tabs.Tab>
-          <Tabs.Tab title="版本套餐" key="version">
-            {renderVersionPackages()}
+          <Tabs.Tab title="消费记录" key="records">
+            {renderRecords()}
           </Tabs.Tab>
         </Tabs>
       </div>
@@ -533,4 +319,4 @@ const Recharge: React.FC = () => {
   );
 };
 
-export default Recharge;
+export default PowerManagement;
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts
new file mode 100644
index 000000000..5d3aff230
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts
@@ -0,0 +1,46 @@
+import request from "@/api/request";
+
+export interface TokensUseRecordParams {
+  /**
+   * 来源 0未知 1好友聊天 2群聊天 3群公告 4商家 5充值
+   */
+  form?: string;
+  /**
+   * 条数
+   */
+  limit?: string;
+  /**
+   * 分页
+   */
+  page?: string;
+  /**
+   * 类型 0减少 1增加
+   */
+  type?: string;
+  [property: string]: any;
+}
+
+export interface TokensUseRecordItem {
+  id: number;
+  companyId: number;
+  userId: number;
+  wechatAccountId: number;
+  friendIdOrGroupId: number;
+  form: number;
+  type: number;
+  tokens: number;
+  balanceTokens: number;
+  remarks: string;
+  createTime: string;
+}
+
+export interface TokensUseRecordList {
+  list: TokensUseRecordItem[];
+}
+
+//算力使用明细
+export function getTokensUseRecord(
+  TokensUseRecordParams,
+): Promise<TokensUseRecordList> {
+  return request("/v1/kefu/tokensRecord/list", TokensUseRecordParams, "GET");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.module.scss b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.module.scss
new file mode 100644
index 000000000..f0ab5b4a8
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.module.scss
@@ -0,0 +1,107 @@
+.page {
+  padding: 12px 12px 16px;
+}
+
+.filters {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.filterButton {
+  flex: 1;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7f8fa;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  color: #333;
+}
+
+.filterIcon {
+  margin-right: 6px;
+}
+
+.summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 18px;
+  border-radius: 12px;
+  background: linear-gradient(90deg, #ebf3ff 0%, #fff1ff 100%);
+  margin-bottom: 12px;
+}
+
+.summaryItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.summaryNumber {
+  font-size: 22px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #1677ff 0%, #722ed1 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  line-height: 1.2;
+}
+
+.summaryLabel {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #666;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.item {
+  border-radius: 10px;
+}
+
+.itemHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.itemTitle {
+  font-size: 14px;
+  color: #111;
+  font-weight: 600;
+}
+
+.itemDesc {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.itemFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #666;
+}
+
+.power {
+  color: #722ed1;
+  font-weight: 600;
+}
+
+.loading,
+.empty {
+  text-align: center;
+  color: #999;
+  padding: 20px 0;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.tsx
new file mode 100644
index 000000000..dd732dcab
--- /dev/null
+++ b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/index.tsx
@@ -0,0 +1,225 @@
+import React, { useEffect, useState } from "react";
+import { Picker, Card, Tag, Toast } from "antd-mobile";
+import { Pagination } from "antd";
+import { DownOutline } from "antd-mobile-icons";
+import NavCommon from "@/components/NavCommon";
+import Layout from "@/components/Layout/Layout";
+import style from "./index.module.scss";
+import { getTokensUseRecord } from "./api";
+
+interface UsageRecordItem {
+  id: number | string;
+  title?: string;
+  description?: string;
+  power?: number;
+  status?: string;
+  createTime?: string;
+  typeLabel?: string;
+}
+
+const UsageRecords: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [records, setRecords] = useState<UsageRecordItem[]>([]);
+  const [type, setType] = useState<string>("all");
+  const [status, setStatus] = useState<string>("all");
+  const [typeVisible, setTypeVisible] = useState(false);
+  const [statusVisible, setStatusVisible] = useState(false);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+
+  const typeOptions = [
+    { label: "全部类型", value: "all" },
+    { label: "AI助手对话", value: "chat" },
+    { label: "智能群发", value: "broadcast" },
+    { label: "内容生成", value: "content" },
+  ];
+
+  const statusOptions = [
+    { label: "全部状态", value: "all" },
+    { label: "已完成", value: "completed" },
+    { label: "进行中", value: "processing" },
+  ];
+
+  useEffect(() => {
+    fetchRecords();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [type, status, page]);
+
+  const fetchRecords = async () => {
+    setLoading(true);
+    try {
+      // 前端与接口枚举的简易映射：仅映射已知来源，其它为 undefined（即不过滤）
+      const formMap: Record<string, number | undefined> = {
+        all: undefined, // 全部
+        chat: 1, // 好友/群聊天
+        broadcast: 3, // 群公告/群发
+        content: 4, // 商家/内容生成
+      };
+
+      const res: any = await getTokensUseRecord({
+        page: String(page),
+        limit: String(pageSize),
+        form: formMap[type]?.toString(),
+        // 接口的 type 为 0减少/1增加，与当前“状态”筛选无直接对应，暂不传
+      });
+
+      const formLabelMap: Record<number, string> = {
+        0: "未知",
+        1: "好友聊天",
+        2: "群聊天",
+        3: "群公告",
+        4: "商家",
+        5: "充值",
+      };
+
+      const rawList: any[] = res?.list || [];
+      const list: UsageRecordItem[] = rawList.map((item: any, idx: number) => ({
+        id: item.id ?? idx,
+        title: item.remarks || "使用记录",
+        description: "",
+        power: item.tokens ?? 0,
+        status: "已完成",
+        createTime: item.createTime || "",
+        typeLabel: formLabelMap[item.form as number] || "",
+      }));
+      setRecords(list);
+
+      const possibleTotal =
+        (res && (res.total || res.count || res.totalCount)) || 0;
+      setTotal(
+        typeof possibleTotal === "number" && possibleTotal > 0
+          ? possibleTotal
+          : page * pageSize + (rawList.length === pageSize ? 1 : 0),
+      );
+    } catch (e) {
+      console.error(e);
+      Toast.show({ content: "获取使用记录失败", position: "top" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getTypeLabel = () =>
+    typeOptions.find(o => o.value === type)?.label || "全部类型";
+  const getStatusLabel = () =>
+    statusOptions.find(o => o.value === status)?.label || "全部状态";
+
+  return (
+    <Layout
+      header={
+        <>
+          <NavCommon title="使用记录" />
+          <div className={style.filters}>
+            <Picker
+              columns={[typeOptions]}
+              visible={typeVisible}
+              onClose={() => setTypeVisible(false)}
+              value={[type]}
+              onConfirm={val => {
+                setType(val[0] as string);
+                setTypeVisible(false);
+              }}
+            >
+              {() => (
+                <div
+                  className={style.filterButton}
+                  onClick={() => setTypeVisible(true)}
+                >
+                  <span className={style.filterIcon}>
+                    <DownOutline />
+                  </span>
+                  {getTypeLabel()}
+                </div>
+              )}
+            </Picker>
+
+            <Picker
+              columns={[statusOptions]}
+              visible={statusVisible}
+              onClose={() => setStatusVisible(false)}
+              value={[status]}
+              onConfirm={val => {
+                setStatus(val[0] as string);
+                setStatusVisible(false);
+              }}
+            >
+              {() => (
+                <div
+                  className={style.filterButton}
+                  onClick={() => setStatusVisible(true)}
+                >
+                  <span className={style.filterIcon}>
+                    <DownOutline />
+                  </span>
+                  {getStatusLabel()}
+                </div>
+              )}
+            </Picker>
+          </div>
+
+          <div className={style.summary}>
+            <div className={style.summaryItem}>
+              <div className={style.summaryNumber}>{records.length}</div>
+              <div className={style.summaryLabel}>记录总数</div>
+            </div>
+            <div className={style.summaryItem}>
+              <div className={style.summaryNumber}>
+                {records.reduce(
+                  (acc, cur) => acc + (Number(cur.power) || 0),
+                  0,
+                )}
+              </div>
+              <div className={style.summaryLabel}>总消耗算力</div>
+            </div>
+          </div>
+        </>
+      }
+      footer={
+        <div className="pagination-container">
+          <Pagination
+            current={page}
+            pageSize={pageSize}
+            total={total}
+            showSizeChanger={false}
+            onChange={newPage => {
+              setPage(newPage);
+            }}
+          />
+        </div>
+      }
+    >
+      <div className={style.page}>
+        <div className={style.list}>
+          {loading && records.length === 0 ? (
+            <div className={style.loading}>加载中...</div>
+          ) : records.length === 0 ? (
+            <div className={style.empty}>暂无使用记录</div>
+          ) : (
+            records.map(item => (
+              <Card key={item.id} className={style.item}>
+                <div className={style.itemHeader}>
+                  <div className={style.itemTitle}>
+                    {item.title || item.typeLabel || "使用任务"}
+                  </div>
+                  <Tag color={item.status === "已完成" ? "success" : "primary"}>
+                    {item.status}
+                  </Tag>
+                </div>
+                {item.description ? (
+                  <div className={style.itemDesc}>{item.description}</div>
+                ) : null}
+                <div className={style.itemFooter}>
+                  <div className={style.power}>消耗 {item.power ?? 0} 算力</div>
+                  <div className={style.time}>{item.createTime}</div>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default UsageRecords;
diff --git a/Cunkebao/src/router/module/mine.tsx b/Cunkebao/src/router/module/mine.tsx
index 9346afa6c..bf2bc20cd 100644
--- a/Cunkebao/src/router/module/mine.tsx
+++ b/Cunkebao/src/router/module/mine.tsx
@@ -9,6 +9,8 @@ import WechatAccounts from "@/pages/mobile/mine/wechat-accounts/list/index";
 import WechatAccountDetail from "@/pages/mobile/mine/wechat-accounts/detail/index";
 import Recharge from "@/pages/mobile/mine/recharge/index";
 import RechargeOrder from "@/pages/mobile/mine/recharge/order/index";
+import BuyPower from "@/pages/mobile/mine/recharge/buy-power";
+import UsageRecords from "@/pages/mobile/mine/recharge/usage-records";
 import Setting from "@/pages/mobile/mine/setting/index";
 import SecuritySetting from "@/pages/mobile/mine/setting/SecuritySetting";
 import About from "@/pages/mobile/mine/setting/About";
@@ -74,6 +76,16 @@ const routes = [
     element: <RechargeOrder />,
     auth: true,
   },
+  {
+    path: "/recharge/buy-power",
+    element: <BuyPower />,
+    auth: true,
+  },
+  {
+    path: "/recharge/usage-records",
+    element: <UsageRecords />,
+    auth: true,
+  },
   {
     path: "/settings",
     element: <Setting />,

From 515c85e600de9100a3a10ed5a1f5f21b331970ae 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: Thu, 30 Oct 2025 16:08:43 +0800
Subject: [PATCH 12/19] Enhance Buy Power and Recharge components with loading
 states and pagination. Update styles for better layout and introduce new
 pagination UI in the Power Management section. Remove outdated AI knowledge
 interface documentation.

---
 .../mobile/mine/recharge/buy-power/index.tsx  |   3 +
 .../mine/recharge/index/index.module.scss     |  11 +-
 .../mobile/mine/recharge/index/index.tsx      |  72 ++++---
 .../workspace/ai-knowledge/list/index.tsx     |   7 +-
 .../workspace/ai-knowledge/接口对接说明.md    | 183 ------------------
 5 files changed, 62 insertions(+), 214 deletions(-)
 delete mode 100644 Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md

diff --git a/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx
index e701df6a6..33d307b31 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/index.tsx
@@ -25,12 +25,15 @@ const BuyPowerPage: React.FC = () => {
   }, []);
 
   const fetchPackages = async () => {
+    setLoading(true);
     try {
       const res = await getTaocanList();
       setPackages(res.list || []);
     } catch (error) {
       console.error("获取套餐列表失败:", error);
       Toast.show({ content: "获取套餐列表失败", position: "top" });
+    } finally {
+      setLoading(false);
     }
   };
 
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
index 78c67f9fd..e703d1490 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
@@ -1,7 +1,6 @@
 // 算力管理页面样式
 .powerPage {
-  background: #f5f5f5;
-  min-height: 100vh;
+  padding: 16px;
 }
 
 .powerTabs {
@@ -338,3 +337,11 @@
   color: #999;
   margin-top: 12px;
 }
+
+.paginationWrap {
+  padding: 15px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
index 4bd724080..ad8424ca3 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
@@ -13,6 +13,7 @@ import NavCommon from "@/components/NavCommon";
 import Layout from "@/components/Layout/Layout";
 import { getPowerStats, getOrderList } from "./api";
 import type { PowerStats } from "./api";
+import { Pagination } from "antd";
 
 type OrderRecordView = {
   id: number;
@@ -34,6 +35,9 @@ const PowerManagement: React.FC = () => {
   const [filterStatus, setFilterStatus] = useState<string>("all");
   const [filterTypeVisible, setFilterTypeVisible] = useState(false);
   const [filterStatusVisible, setFilterStatusVisible] = useState(false);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [total, setTotal] = useState(0);
 
   const typeOptions = [
     { label: "全部类型", value: "all" },
@@ -57,7 +61,8 @@ const PowerManagement: React.FC = () => {
 
   useEffect(() => {
     if (activeTab === "records") {
-      fetchRecords();
+      setPage(1);
+      fetchRecords(1);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeTab, filterType, filterStatus]);
@@ -72,9 +77,10 @@ const PowerManagement: React.FC = () => {
     }
   };
 
-  const fetchRecords = async () => {
+  const fetchRecords = async (customPage?: number) => {
     setLoading(true);
     try {
+      const reqPage = customPage !== undefined ? customPage : page;
       // 映射状态到订单状态：0待支付 1已支付 2已取消 3已退款
       const statusMap: Record<string, string | undefined> = {
         all: undefined,
@@ -84,8 +90,8 @@ const PowerManagement: React.FC = () => {
       };
 
       const res = await getOrderList({
-        page: "1",
-        limit: "100",
+        page: String(reqPage),
+        limit: String(pageSize),
         orderType: "1",
         status: statusMap[filterStatus],
       });
@@ -100,6 +106,7 @@ const PowerManagement: React.FC = () => {
         createTime: o.createTime || "",
       }));
       setRecords(list);
+      setTotal(Number(res.total || 0));
     } catch (error) {
       console.error("获取消费记录失败:", error);
       Toast.show({ content: "获取消费记录失败", position: "top" });
@@ -290,30 +297,47 @@ const PowerManagement: React.FC = () => {
 
   return (
     <Layout
+      loading={loading}
       header={
-        <NavCommon
-          title="算力管理"
-          right={
-            <div className={style.refreshBtn} onClick={handleRefresh}>
-              <SyncOutlined spin={loading} />
-            </div>
-          }
-        />
+        <>
+          <NavCommon
+            title="算力管理"
+            right={
+              <div className={style.refreshBtn} onClick={handleRefresh}>
+                <SyncOutlined spin={loading} />
+              </div>
+            }
+          />
+          <Tabs
+            activeKey={activeTab}
+            onChange={setActiveTab}
+            className={style.powerTabs}
+          >
+            <Tabs.Tab title="概览" key="overview" />
+            <Tabs.Tab title="消费记录" key="records" />
+          </Tabs>
+        </>
+      }
+      footer={
+        activeTab === "records" && records.length > 0 ? (
+          <div className={style.paginationWrap}>
+            <Pagination
+              current={page}
+              pageSize={pageSize}
+              total={total}
+              showSizeChanger={false}
+              onChange={p => {
+                setPage(p);
+                fetchRecords(p);
+              }}
+            />
+          </div>
+        ) : null
       }
     >
       <div className={style.powerPage}>
-        <Tabs
-          activeKey={activeTab}
-          onChange={setActiveTab}
-          className={style.powerTabs}
-        >
-          <Tabs.Tab title="概览" key="overview">
-            {renderOverview()}
-          </Tabs.Tab>
-          <Tabs.Tab title="消费记录" key="records">
-            {renderRecords()}
-          </Tabs.Tab>
-        </Tabs>
+        {activeTab === "overview" && renderOverview()}
+        {activeTab === "records" && renderRecords()}
       </div>
     </Layout>
   );
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
index f42ba51bd..eaa2f0eed 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
@@ -60,13 +60,10 @@ const AIKnowledgeList: React.FC = () => {
         independentPrompt: item.prompt || "",
         status: item.isDel === 0 ? 1 : 0, // 未删除即为启用
         aiCallEnabled: true, // 默认启用
-        materialCount: 0, // 需要单独统计
+        materialCount: item.materialCount || 0, // 需要单独统计
       }));
       setList(transformedList);
       setTotal(Number(res?.total) || 0);
-      setEnabledCount(
-        transformedList.filter((item: any) => item.status === 1).length,
-      );
     } catch (e) {
       message.error("获取知识库列表失败");
     } finally {
@@ -226,7 +223,7 @@ const AIKnowledgeList: React.FC = () => {
 
         <div className={style.cardStats}>
           <div className={style.statItem}>
-            <div className={style.statItemValue}>{item.materialCount || 0}</div>
+            <div className={style.statItemValue}>{item.materialCount}</div>
             <div className={style.statItemLabel}>素材总数</div>
           </div>
           <div className={style.statItem}>
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md
deleted file mode 100644
index e13400448..000000000
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/接口对接说明.md
+++ /dev/null
@@ -1,183 +0,0 @@
-# AI知识库接口对接说明
-
-## ✅ 已对接接口
-
-### 知识库类型管理
-
-1. **获取知识库类型列表**
-   - 接口：`GET /v1/knowledge/typeList`
-   - 参数：`{ page, limit }`
-   - 状态：✅ 已对接
-
-2. **添加知识库类型**
-   - 接口：`POST /v1/knowledge/addType`
-   - 参数：`{ name, description, label, prompt }`
-   - 状态：✅ 已对接
-
-3. **编辑知识库类型**
-   - 接口：`POST /v1/knowledge/editType`
-   - 参数：`{ id, name, description, label, prompt }`
-   - 状态：✅ 已对接
-
-4. **删除知识库类型**
-   - 接口：`DELETE /v1/knowledge/deleteType`
-   - 参数：`{ id }`
-   - 状态：✅ 已对接
-
-### 知识库（素材）管理
-
-5. **获取知识库列表（素材列表）**
-   - 接口：`GET /v1/knowledge/getList`
-   - 参数：`{ typeId, name, label, fileUrl, page, limit }`
-   - 状态：✅ 已对接
-
-6. **添加知识库（素材）**
-   - 接口：`POST /v1/knowledge/add`
-   - 参数：`{ typeId, name, label, fileUrl }`
-   - 状态：✅ 已对接（需要补充文件上传接口）
-
-7. **删除知识库（素材）**
-   - 接口：`DELETE /v1/knowledge/delete`
-   - 参数：`{ id }`
-   - 状态：✅ 已对接
-
-### AI功能
-
-8. **初始化AI功能**
-   - 接口：`GET /v1/knowledge/init`
-   - 状态：✅ 已对接（页面加载时自动调用）
-
-9. **发布并应用AI工具**
-   - 接口：`GET /v1/knowledge/release`
-   - 参数：`{ id }`
-   - 状态：✅ 已对接（暂未在UI中使用，可在需要时调用）
-
----
-
-## ⚠️ 需要后端补充的接口
-
-### 1. 知识库状态切换
-
-- **功能**：启用/禁用知识库类型
-- **当前实现**：前端使用 `isDel` 字段判断状态，但没有单独的切换接口
-- **建议**：
-  ```
-  POST /v1/knowledge/toggleStatus
-  参数: { id: number, status: 0 | 1 }
-  ```
-
-### 2. 统一提示词配置
-
-- **功能**：配置全局AI提示词
-- **当前实现**：前端保留了UI，但接口未提供
-- **建议**：
-  ```
-  GET /v1/knowledge/globalPrompt
-  POST /v1/knowledge/globalPrompt
-  参数: { enabled: boolean, content: string }
-  ```
-
-### 3. 调用者列表
-
-- **功能**：显示哪些用户在使用某个知识库
-- **当前实现**：前端已预留UI，但接口未提供
-- **建议**：
-  ```
-  GET /v1/knowledge/callers
-  参数: { typeId: number, page: number, limit: number }
-  返回: { list: [], total: number }
-  ```
-
-### 4. 文件上传
-
-- **功能**：上传素材文件并返回 fileUrl
-- **当前实现**：前端使用临时占位方案
-- **建议**：
-  ```
-  POST /v1/knowledge/uploadFile
-  参数: FormData (file)
-  返回: { fileUrl: string, fileSize: number }
-  ```
-
-### 5. 知识库详情
-
-- **功能**：获取单个知识库类型的详细信息
-- **当前实现**：前端通过列表接口查找
-- **建议**：
-  ```
-  GET /v1/knowledge/typeDetail
-  参数: { id: number }
-  ```
-
-### 6. 素材统计
-
-- **功能**：获取每个知识库类型的素材数量
-- **当前实现**：前端设置为0，需要单独统计
-- **建议**：在 `typeList` 接口返回值中增加 `materialCount` 字段
-
----
-
-## 📋 数据字段映射说明
-
-### 前端 ➡️ 后端
-
-| 前端字段             | 后端字段         | 说明                     |
-| -------------------- | ---------------- | ------------------------ |
-| tags                 | label            | 标签数组                 |
-| useIndependentPrompt | 根据 prompt 判断 | 是否有独立提示词         |
-| independentPrompt    | prompt           | 独立提示词内容           |
-| status               | isDel 判断       | isDel=0 为启用           |
-| materialCount        | 需补充           | 素材数量                 |
-| fileName             | name             | 文件名                   |
-| filePath             | fileUrl          | 文件路径                 |
-| uploadTime           | createTime       | 上传时间（需转换时间戳） |
-
-### 时间格式转换
-
-- 后端返回：Unix 时间戳（秒）
-- 前端显示：`new Date(timestamp * 1000).toLocaleDateString('zh-CN')`
-
----
-
-## 🔧 待优化项
-
-1. **文件上传流程**
-   - 当前：上传文件 → 获取URL → 调用添加接口
-   - 建议：合并为一个接口，后端处理文件上传和记录创建
-
-2. **批量操作**
-   - 建议增加批量删除接口
-   - 建议增加批量修改标签接口
-
-3. **发布机制**
-   - 明确发布接口的触发时机
-   - 是否需要在新建/编辑后自动发布
-
-4. **权限控制**
-   - 建议增加知识库的访问权限配置
-   - 建议增加素材的可见性控制
-
----
-
-## ✨ 功能完成度
-
-- ✅ 知识库类型的增删改查
-- ✅ 素材的增删查（改功能可后续补充）
-- ✅ 独立提示词配置
-- ⚠️ AI调用配置（UI完成，接口需补充）
-- ⚠️ 统一提示词（UI完成，接口需补充）
-- ⚠️ 调用者管理（UI预留，接口需补充）
-- ⚠️ 文件上传（临时方案，需正式接口）
-
----
-
-## 📝 使用注意事项
-
-1. 初始化AI功能会在页面加载时自动调用
-2. 文件上传当前使用临时方案，实际部署需要对接真实的文件上传接口
-3. 部分接口因后端未提供，使用了 `console.warn` 提示，不影响核心功能
-4. 知识库的启用/禁用状态暂时仅在前端维护
-
----
-
-**最后更新时间**：2024-10-28

From da87f9a865720560dc8d34e10537df3f15c235c4 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: Thu, 30 Oct 2025 16:26:15 +0800
Subject: [PATCH 13/19] Refactor GlobalPromptModal to use antd-mobile Popup for
 improved mobile experience. Update styles for modal footer and enhance user
 feedback with Toast notifications. Remove deprecated Ant Design Modal
 components and adjust layout for better usability.

---
 .../list/components/GlobalPromptModal.tsx     | 116 ++++++++++++------
 .../ai-knowledge/list/index.module.scss       |  16 +--
 2 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
index 1e71db851..fb1d2086e 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Switch, message } from "antd";
+import { Popup, Toast } from "antd-mobile";
+import { Input, Button, Switch } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+const { TextArea } = Input;
 import {
   InfoCircleOutlined,
-  BulbOutlined,
-  ExclamationCircleOutlined,
+  ExclamationCircleFilled,
+  InfoCircleFilled,
 } from "@ant-design/icons";
 import { getGlobalPrompt, saveGlobalPrompt } from "../api";
-import type { GlobalPromptConfig } from "../data";
 import style from "../index.module.scss";
 
 interface GlobalPromptModalProps {
@@ -35,6 +37,7 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
     if (visible) {
       fetchGlobalPrompt();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
   const fetchGlobalPrompt = async () => {
@@ -44,7 +47,7 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
       setEnabled(config.enabled);
       setContent(config.content || DEFAULT_PROMPT);
     } catch (error) {
-      message.error("获取配置失败");
+      Toast.show({ content: "获取配置失败", position: "bottom" });
     } finally {
       setLoading(false);
     }
@@ -52,66 +55,83 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
 
   const handleSave = async () => {
     if (enabled && !content.trim()) {
-      message.error("启用统一提示词时，请输入提示词内容");
+      Toast.show({
+        content: "启用统一提示词时，请输入提示词内容",
+        position: "bottom",
+      });
       return;
     }
-
     setSaving(true);
     try {
       await saveGlobalPrompt({
         enabled,
         content: content.trim(),
       });
-      message.success("保存成功");
+      Toast.show({ content: "保存成功", position: "bottom" });
       onClose();
     } catch (error) {
-      message.error("保存失败");
+      Toast.show({ content: "保存失败", position: "bottom" });
     } finally {
       setSaving(false);
     }
   };
 
   return (
-    <Modal
-      title={
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <InfoCircleOutlined style={{ color: "#1890ff" }} />
-          配置统一提示词
-        </div>
-      }
-      open={visible}
-      onCancel={onClose}
-      onOk={handleSave}
-      confirmLoading={saving}
-      width={600}
-      okText="保存配置"
-      cancelText="取消"
+    <Popup
+      visible={visible}
+      onMaskClick={onClose}
+      bodyStyle={{ borderRadius: "16px 16px 0 0", minHeight: 300, padding: 0 }}
+      position="bottom"
+      closeOnMaskClick
       className={style.promptModal}
     >
+      <div
+        className={style.promptMobileHead}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "18px 20px 0 20px",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <InfoCircleOutlined
+            style={{
+              color: "#1677ff",
+              fontSize: 20,
+              marginRight: 8,
+              verticalAlign: "middle",
+            }}
+          />
+          <span>统一提示词配置</span>
+        </div>
+        <CloseOutlined onClick={onClose} />
+      </div>
       <div className={style.promptContent}>
-        <p style={{ fontSize: 13, color: "#666", marginBottom: 16 }}>
+        <div style={{ fontSize: 13, color: "#888", marginBottom: 12 }}>
           设置所有知识库的通用回复规范
-        </p>
-
+        </div>
         <div className={style.promptToggle}>
           <span className={style.promptToggleLabel}>启用统一提示词</span>
-          <Switch checked={enabled} onChange={setEnabled} />
+          <Switch checked={enabled} onChange={setEnabled} loading={loading} />
         </div>
-
         {enabled && (
-          <textarea
-            className={style.promptTextarea}
+          <TextArea
             value={content}
             onChange={e => setContent(e.target.value)}
             placeholder="请输入统一提示词..."
             maxLength={2000}
+            disabled={loading}
+            className={style.promptTextarea}
           />
         )}
-
         <div className={style.promptSection}>
           <div className={style.sectionTitle}>
-            <BulbOutlined className={style.sectionIcon} />
-            统一提示词作用:
+            <InfoCircleFilled
+              className={style.sectionIcon}
+              style={{ fontSize: 16 }}
+            />
+            统一提示词作用
           </div>
           <div className={style.sectionContent}>
             <ul>
@@ -121,18 +141,38 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
             </ul>
           </div>
         </div>
-
         <div className={style.warningBox}>
           <div className={style.warningTitle}>
-            <ExclamationCircleOutlined /> 提示词生效逻辑:
+            <ExclamationCircleFilled
+              style={{
+                marginRight: 3,
+                fontSize: 16,
+                verticalAlign: "middle",
+                color: "#FC772B",
+              }}
+            />
+            提示词生效逻辑:
           </div>
           <div className={style.warningText}>
-            <div>统一提示词（全局规则） + 知识库独立提示词（专业指导）</div>
-            <div style={{ marginTop: 4 }}>= 该终AI回复内容</div>
+            统一提示词（全局规则） + 知识库独立提示词（专业指导） =
+            该终AI回复内容
           </div>
         </div>
+        <div className={style.modalFooter}>
+          <Button size="large" onClick={onClose}>
+            取消
+          </Button>
+          <Button
+            size="large"
+            onClick={handleSave}
+            disabled={saving}
+            type="primary"
+          >
+            {saving ? "保存中..." : "保存配置"}
+          </Button>
+        </div>
       </div>
-    </Modal>
+    </Popup>
   );
 };
 
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss
index 20fdc7d54..4cb313ecc 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.module.scss
@@ -296,21 +296,8 @@
 
 .modalFooter {
   display: flex;
+  justify-content: space-between;
   gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid #f0f0f0;
-  background: #fff;
-}
-
-.modalButton {
-  flex: 1;
-  padding: 10px;
-  border: none;
-  border-radius: 8px;
-  font-size: 15px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
 }
 
 .cancelButton {
@@ -346,7 +333,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 12px;
     background: #f9f9f9;
     border-radius: 8px;
     margin-bottom: 16px;

From 990c7a2693ccd11cf556d7320493a48f86359c77 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: Thu, 30 Oct 2025 16:42:42 +0800
Subject: [PATCH 14/19] Refactor API interactions in GlobalPromptModal to
 utilize new initGlobalPrompt and saveGlobalPrompt functions. Update modal
 logic to handle prompt configuration more effectively, removing deprecated
 state management for enabling prompts. Enhance user experience with improved
 input handling and feedback mechanisms.

---
 .../mobile/workspace/ai-knowledge/list/api.ts | 46 ++++++++-------
 .../list/components/GlobalPromptModal.tsx     | 58 ++++++++++---------
 2 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
index f84e30fb2..e2e445e89 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
@@ -62,29 +62,33 @@ export function deleteKnowledgeBase(id: number): Promise<any> {
   return request("/v1/knowledge/deleteType", { id }, "DELETE");
 }
 
-// 切换知识库状态（启用/禁用）- 注意：实际接口未提供，保留兼容
-export function toggleKnowledgeBaseStatus(
-  id: number,
-  status: 0 | 1,
-): Promise<any> {
-  // 由于接口文档中没有此接口，暂时使用编辑接口实现
-  console.warn("toggleKnowledgeBaseStatus 接口未提供，需要后端补充");
-  return Promise.resolve({ success: true });
+// 初始化统一提示词配置
+export function initGlobalPrompt(): Promise<any> {
+  return request("/v1/knowledge/init", undefined, "GET");
 }
 
-// 获取统一提示词配置 - 使用发布接口返回的 prompt_info
-export function getGlobalPrompt(): Promise<GlobalPromptConfig> {
-  // 注意：实际接口未单独提供，需要通过 release 接口获取
-  console.warn("getGlobalPrompt 接口未提供，需要后端补充");
-  return Promise.resolve({
-    enabled: true,
-    content: "",
-  });
+interface SaveGlobalPromptData {
+  promptInfo: string;
+}
+interface PromptResponse {
+  id: number;
+  companyId: number;
+  userId: number;
+  config: {
+    name: string;
+    model_id: string;
+    prompt_info: string;
+  };
+  createTime: string;
+  updateTime: string;
+  isRelease: number;
+  releaseTime: number;
+  botId: string;
+  datasetId: string;
 }
-
 // 保存统一提示词配置
-export function saveGlobalPrompt(data: GlobalPromptConfig): Promise<any> {
-  // 注意：实际接口未提供，需要后端补充
-  console.warn("saveGlobalPrompt 接口未提供，需要后端补充");
-  return Promise.resolve({ success: true });
+export function saveGlobalPrompt(
+  data: SaveGlobalPromptData,
+): Promise<PromptResponse> {
+  return request("/v1/knowledge/savePrompt", data, "POST");
 }
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
index fb1d2086e..3ffa9c37d 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from "react";
 import { Popup, Toast } from "antd-mobile";
-import { Input, Button, Switch } from "antd";
-import { CloseOutlined } from "@ant-design/icons";
+import { Input, Button } from "antd";
 const { TextArea } = Input;
 import {
   InfoCircleOutlined,
   ExclamationCircleFilled,
   InfoCircleFilled,
 } from "@ant-design/icons";
-import { getGlobalPrompt, saveGlobalPrompt } from "../api";
+import { initGlobalPrompt, saveGlobalPrompt } from "../api";
 import style from "../index.module.scss";
+import { config } from "antd-mobile/es/components/toast/methods";
 
 interface GlobalPromptModalProps {
   visible: boolean;
@@ -30,7 +30,6 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
 }) => {
   const [loading, setLoading] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [enabled, setEnabled] = useState(true);
   const [content, setContent] = useState(DEFAULT_PROMPT);
 
   useEffect(() => {
@@ -43,9 +42,9 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
   const fetchGlobalPrompt = async () => {
     setLoading(true);
     try {
-      const config = await getGlobalPrompt();
-      setEnabled(config.enabled);
-      setContent(config.content || DEFAULT_PROMPT);
+      const res = await initGlobalPrompt();
+      // 假定返回的数据结构包含 promptInfo 字段
+      setContent(res?.config?.prompt_info || DEFAULT_PROMPT);
     } catch (error) {
       Toast.show({ content: "获取配置失败", position: "bottom" });
     } finally {
@@ -54,9 +53,9 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
   };
 
   const handleSave = async () => {
-    if (enabled && !content.trim()) {
+    if (!content.trim()) {
       Toast.show({
-        content: "启用统一提示词时，请输入提示词内容",
+        content: "请输入提示词内容",
         position: "bottom",
       });
       return;
@@ -64,8 +63,7 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
     setSaving(true);
     try {
       await saveGlobalPrompt({
-        enabled,
-        content: content.trim(),
+        promptInfo: content.trim(),
       });
       Toast.show({ content: "保存成功", position: "bottom" });
       onClose();
@@ -105,26 +103,30 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
           />
           <span>统一提示词配置</span>
         </div>
-        <CloseOutlined onClick={onClose} />
+        <span
+          onClick={onClose}
+          style={{
+            fontSize: 22,
+            color: "#999",
+            cursor: "pointer",
+            transition: "color 0.15s",
+          }}
+        >
+          ×
+        </span>
       </div>
       <div className={style.promptContent}>
         <div style={{ fontSize: 13, color: "#888", marginBottom: 12 }}>
           设置所有知识库的通用回复规范
         </div>
-        <div className={style.promptToggle}>
-          <span className={style.promptToggleLabel}>启用统一提示词</span>
-          <Switch checked={enabled} onChange={setEnabled} loading={loading} />
-        </div>
-        {enabled && (
-          <TextArea
-            value={content}
-            onChange={e => setContent(e.target.value)}
-            placeholder="请输入统一提示词..."
-            maxLength={2000}
-            disabled={loading}
-            className={style.promptTextarea}
-          />
-        )}
+        <TextArea
+          value={content}
+          onChange={e => setContent(e.target.value)}
+          placeholder="请输入统一提示词..."
+          maxLength={2000}
+          disabled={loading}
+          style={{ height: "200px", marginBottom: 15 }}
+        />
         <div className={style.promptSection}>
           <div className={style.sectionTitle}>
             <InfoCircleFilled
@@ -159,13 +161,13 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
           </div>
         </div>
         <div className={style.modalFooter}>
-          <Button size="large" onClick={onClose}>
+          <Button onClick={onClose} size="large">
             取消
           </Button>
           <Button
-            size="large"
             onClick={handleSave}
             disabled={saving}
+            size="large"
             type="primary"
           >
             {saving ? "保存中..." : "保存配置"}

From eafca9ae8548581f0e42880b5c8c4d475f9a9daa 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: Thu, 30 Oct 2025 16:44:17 +0800
Subject: [PATCH 15/19] Replace custom close button in GlobalPromptModal with
 Ant Design's CloseOutlined icon for improved consistency and user experience.
 Simplify the onClose functionality while maintaining existing styles.

---
 .../list/components/GlobalPromptModal.tsx          | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
index 3ffa9c37d..74541b700 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/components/GlobalPromptModal.tsx
@@ -6,6 +6,7 @@ import {
   InfoCircleOutlined,
   ExclamationCircleFilled,
   InfoCircleFilled,
+  CloseOutlined,
 } from "@ant-design/icons";
 import { initGlobalPrompt, saveGlobalPrompt } from "../api";
 import style from "../index.module.scss";
@@ -103,17 +104,8 @@ const GlobalPromptModal: React.FC<GlobalPromptModalProps> = ({
           />
           <span>统一提示词配置</span>
         </div>
-        <span
-          onClick={onClose}
-          style={{
-            fontSize: 22,
-            color: "#999",
-            cursor: "pointer",
-            transition: "color 0.15s",
-          }}
-        >
-          ×
-        </span>
+
+        <CloseOutlined onClick={onClose} />
       </div>
       <div className={style.promptContent}>
         <div style={{ fontSize: 13, color: "#888", marginBottom: 12 }}>

From 8d017ed2cb4d7b27af56e6af9d5c314f16a03a9a 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: Thu, 30 Oct 2025 17:04:11 +0800
Subject: [PATCH 16/19] Integrate FileUpload component for material uploads in
 AIKnowledgeDetail. Update upload logic to handle file types and improve user
 feedback on upload success or failure. Adjust tab rendering order for better
 clarity.

---
 .../workspace/ai-knowledge/detail/index.tsx   | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
index 4d2705ed5..398a1caa1 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
@@ -39,6 +39,7 @@ import {
 } from "./api";
 import { deleteKnowledgeBase } from "../list/api";
 import type { KnowledgeBase, Material, Caller } from "./data";
+import FileUpload from "@/components/Upload/FileUpload";
 
 type TabType = "info" | "materials";
 
@@ -496,24 +497,32 @@ const AIKnowledgeDetail: React.FC = () => {
       <div className={style.materialSection}>
         {/* 系统预设不显示上传按钮 */}
         {!isSystemPreset && (
-          <Upload
-            showUploadList={false}
-            beforeUpload={file => {
-              handleUpload(file);
-              return false;
-            }}
-          >
-            <Button
-              type="primary"
-              icon={<UploadOutlined />}
-              className={style.uploadButton}
-              size="large"
-            >
-              上传素材到此库
-            </Button>
-          </Upload>
+          <div className={style.uploadButtonWrap}>
+            <FileUpload
+              maxCount={1}
+              disabled={isSystemPreset}
+              acceptTypes={["pdf", "txt", "doc", "docx", "md"]}
+              onChange={async v => {
+                // v 可能为 string 或 string[]：单传取 string
+                const uploadUrl = Array.isArray(v) ? v[0] : v;
+                if (uploadUrl && id) {
+                  try {
+                    await uploadMaterial({
+                      typeId: Number(id),
+                      name: uploadUrl.split("/").pop() || "已上传文件",
+                      label: [],
+                      fileUrl: uploadUrl,
+                    });
+                    message.success("上传成功");
+                    fetchDetail();
+                  } catch (e) {
+                    message.error("上传失败");
+                  }
+                }
+              }}
+            />
+          </div>
         )}
-
         <div className={style.materialList}>
           {materials.length > 0 ? (
             materials.map(material => (
@@ -600,7 +609,7 @@ const AIKnowledgeDetail: React.FC = () => {
                 className={`${style.tab} ${activeTab === "materials" ? style.tabActive : ""}`}
                 onClick={() => setActiveTab("materials")}
               >
-                {knowledgeBase?.name || "知识库"}
+                客户案例
               </button>
             </div>
           </div>
@@ -614,8 +623,8 @@ const AIKnowledgeDetail: React.FC = () => {
           </div>
         ) : (
           <>
-            {activeTab === "info" && renderInfoTab()}
-            {activeTab === "materials" && renderMaterialsTab()}
+            {activeTab === "info" && renderMaterialsTab()}
+            {activeTab === "materials" && renderInfoTab()}
           </>
         )}
       </div>

From fe347965ffe5639d53f56ca4984620b3b15c9a17 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, 31 Oct 2025 15:46:51 +0800
Subject: [PATCH 17/19] Enhance FileUpload component to support additional file
 types including PDF, TXT, MD, MP4, and AVI. Refactor file type handling logic
 for improved accuracy and user feedback. Update styles in AIKnowledgeDetail
 for better layout and user experience, including new sections for prompt
 rules and independent prompts.

---
 .../components/Upload/FileUpload/index.tsx    |  92 +++-
 .../Upload/FileUploadButton/index.module.scss |  13 +
 .../Upload/FileUploadButton/index.tsx         | 282 ++++++++++
 .../workspace/ai-knowledge/detail/data.ts     |   2 +-
 .../ai-knowledge/detail/index.module.scss     | 161 +++++-
 .../workspace/ai-knowledge/detail/index.tsx   | 511 ++++++++++--------
 .../workspace/ai-knowledge/list/index.tsx     | 143 +++--
 7 files changed, 901 insertions(+), 303 deletions(-)
 create mode 100644 Cunkebao/src/components/Upload/FileUploadButton/index.module.scss
 create mode 100644 Cunkebao/src/components/Upload/FileUploadButton/index.tsx

diff --git a/Cunkebao/src/components/Upload/FileUpload/index.tsx b/Cunkebao/src/components/Upload/FileUpload/index.tsx
index 9edf1c4f2..88825bdad 100644
--- a/Cunkebao/src/components/Upload/FileUpload/index.tsx
+++ b/Cunkebao/src/components/Upload/FileUpload/index.tsx
@@ -72,25 +72,83 @@ const FileUpload: React.FC<FileUploadProps> = ({
       name: "PPT文件",
       extensions: ["pptx", "ppt"],
     },
+    pdf: {
+      accept: ".pdf",
+      mimeTypes: ["application/pdf"],
+      icon: FileOutlined,
+      name: "PDF文件",
+      extensions: ["pdf"],
+    },
+    txt: {
+      accept: ".txt",
+      mimeTypes: ["text/plain"],
+      icon: FileOutlined,
+      name: "文本文件",
+      extensions: ["txt"],
+    },
+    md: {
+      accept: ".md",
+      mimeTypes: ["text/markdown"],
+      icon: FileOutlined,
+      name: "Markdown文件",
+      extensions: ["md"],
+    },
+    mp4: {
+      accept: ".mp4",
+      mimeTypes: ["video/mp4"],
+      icon: FileOutlined,
+      name: "MP4视频",
+      extensions: ["mp4"],
+    },
+    avi: {
+      accept: ".avi",
+      mimeTypes: ["video/x-msvideo"],
+      icon: FileOutlined,
+      name: "AVI视频",
+      extensions: ["avi"],
+    },
   };
 
   // 生成accept字符串
   const generateAcceptString = () => {
-    return acceptTypes
-      .map(type => fileTypeConfig[type as keyof typeof fileTypeConfig]?.accept)
-      .filter(Boolean)
-      .join(",");
+    const accepts: string[] = [];
+
+    for (const type of acceptTypes) {
+      // 如果是配置中的类型键（如 "word", "pdf"）
+      const config = fileTypeConfig[type as keyof typeof fileTypeConfig];
+      if (config) {
+        accepts.push(config.accept);
+      } else {
+        // 如果是扩展名（如 "doc", "docx"），直接添加
+        accepts.push(`.${type}`);
+      }
+    }
+
+    return accepts.filter(Boolean).join(",");
   };
 
   // 获取文件类型信息
   const getFileTypeInfo = (file: File) => {
     const extension = file.name.split(".").pop()?.toLowerCase();
+    if (!extension) return null;
+
+    // 首先尝试通过 acceptTypes 中指定的类型键来查找
     for (const type of acceptTypes) {
       const config = fileTypeConfig[type as keyof typeof fileTypeConfig];
-      if (config && config.extensions.includes(extension || "")) {
+      if (config && config.extensions.includes(extension)) {
         return config;
       }
     }
+
+    // 如果 acceptTypes 中包含扩展名本身（如 "doc", "docx"），查找所有包含该扩展名的配置
+    if (acceptTypes.includes(extension)) {
+      for (const [key, config] of Object.entries(fileTypeConfig)) {
+        if (config.extensions.includes(extension)) {
+          return config;
+        }
+      }
+    }
+
     return null;
   };
 
@@ -116,12 +174,29 @@ const FileUpload: React.FC<FileUploadProps> = ({
     }
   }, [value]);
 
+  // 获取类型名称
+  const getTypeName = (type: string) => {
+    const config = fileTypeConfig[type as keyof typeof fileTypeConfig];
+    if (config) return config.name;
+    // 如果是扩展名，返回友好的名称
+    const extensionNames: Record<string, string> = {
+      doc: "Word文件",
+      docx: "Word文件",
+      pdf: "PDF文件",
+      txt: "文本文件",
+      md: "Markdown文件",
+      mp4: "MP4视频",
+      avi: "AVI视频",
+    };
+    return extensionNames[type] || `${type.toUpperCase()}文件`;
+  };
+
   // 文件验证
   const beforeUpload = (file: File) => {
     const typeInfo = getFileTypeInfo(file);
     if (!typeInfo) {
       const allowedTypes = acceptTypes
-        .map(type => fileTypeConfig[type as keyof typeof fileTypeConfig]?.name)
+        .map(type => getTypeName(type))
         .filter(Boolean)
         .join("、");
       message.error(`只能上传${allowedTypes}！`);
@@ -310,10 +385,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
             <div className={style.uploadSubtitle}>
               支持{" "}
               {acceptTypes
-                .map(
-                  type =>
-                    fileTypeConfig[type as keyof typeof fileTypeConfig]?.name,
-                )
+                .map(type => getTypeName(type))
                 .filter(Boolean)
                 .join("、")}
               ，最大 {maxSize}MB
diff --git a/Cunkebao/src/components/Upload/FileUploadButton/index.module.scss b/Cunkebao/src/components/Upload/FileUploadButton/index.module.scss
new file mode 100644
index 000000000..1d832e7cb
--- /dev/null
+++ b/Cunkebao/src/components/Upload/FileUploadButton/index.module.scss
@@ -0,0 +1,13 @@
+.uploadButtonWrapper {
+  // 使用 :global() 包装 Ant Design 的全局类名
+  :global {
+    .ant-upload-select {
+      // 这里可以修改 .ant-upload-select 的样式
+      display: block;
+      width: 100%;
+      span {
+        display: block;
+      }
+    }
+  }
+}
diff --git a/Cunkebao/src/components/Upload/FileUploadButton/index.tsx b/Cunkebao/src/components/Upload/FileUploadButton/index.tsx
new file mode 100644
index 000000000..72efd753d
--- /dev/null
+++ b/Cunkebao/src/components/Upload/FileUploadButton/index.tsx
@@ -0,0 +1,282 @@
+import React, { useState } from "react";
+import { Upload, message, Button } from "antd";
+import {
+  LoadingOutlined,
+  CloudUploadOutlined,
+  FileExcelOutlined,
+  FileWordOutlined,
+  FilePptOutlined,
+  FileOutlined,
+} from "@ant-design/icons";
+import type { UploadProps } from "antd/es/upload/interface";
+import style from "./index.module.scss";
+
+export interface FileUploadResult {
+  fileName: string; // 文件名
+  fileUrl: string; // 文件URL
+}
+
+interface FileUploadProps {
+  onChange?: (result: FileUploadResult) => void; // 上传成功后的回调，返回文件名和URL
+  disabled?: boolean;
+  className?: string;
+  maxSize?: number; // 最大文件大小(MB)
+  acceptTypes?: string[]; // 接受的文件类型
+  buttonText?: string; // 按钮文本
+  buttonType?: "default" | "primary" | "dashed" | "text" | "link"; // 按钮类型
+  block?: boolean;
+  size?: "small" | "middle" | "large";
+  showSuccessMessage?: boolean; // 是否显示上传成功提示，默认不显示
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({
+  onChange,
+  disabled = false,
+  className,
+  maxSize = 10,
+  acceptTypes = ["excel", "word", "ppt"],
+  buttonText = "上传文件",
+  buttonType = "primary",
+  block = false,
+  size = "middle",
+  showSuccessMessage = false,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [fileName, setFileName] = useState<string>(""); // 保存文件名
+
+  // 文件类型配置
+  const fileTypeConfig = {
+    excel: {
+      accept: ".xlsx,.xls",
+      mimeTypes: [
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "application/vnd.ms-excel",
+      ],
+      icon: FileExcelOutlined,
+      name: "Excel文件",
+      extensions: ["xlsx", "xls"],
+    },
+    word: {
+      accept: ".docx,.doc",
+      mimeTypes: [
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "application/msword",
+      ],
+      icon: FileWordOutlined,
+      name: "Word文件",
+      extensions: ["docx", "doc"],
+    },
+    ppt: {
+      accept: ".pptx,.ppt",
+      mimeTypes: [
+        "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        "application/vnd.ms-powerpoint",
+      ],
+      icon: FilePptOutlined,
+      name: "PPT文件",
+      extensions: ["pptx", "ppt"],
+    },
+    pdf: {
+      accept: ".pdf",
+      mimeTypes: ["application/pdf"],
+      icon: FileOutlined,
+      name: "PDF文件",
+      extensions: ["pdf"],
+    },
+    txt: {
+      accept: ".txt",
+      mimeTypes: ["text/plain"],
+      icon: FileOutlined,
+      name: "文本文件",
+      extensions: ["txt"],
+    },
+    doc: {
+      accept: ".doc,.docx",
+      mimeTypes: [
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "application/msword",
+      ],
+      icon: FileWordOutlined,
+      name: "Word文件",
+      extensions: ["doc", "docx"],
+    },
+    docx: {
+      accept: ".docx,.doc",
+      mimeTypes: [
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "application/msword",
+      ],
+      icon: FileWordOutlined,
+      name: "Word文件",
+      extensions: ["docx", "doc"],
+    },
+    md: {
+      accept: ".md",
+      mimeTypes: ["text/markdown"],
+      icon: FileOutlined,
+      name: "Markdown文件",
+      extensions: ["md"],
+    },
+  };
+
+  // 生成accept字符串
+  const generateAcceptString = () => {
+    const accepts: string[] = [];
+
+    for (const type of acceptTypes) {
+      // 如果是配置中的类型键（如 "word", "pdf"）
+      const config = fileTypeConfig[type as keyof typeof fileTypeConfig];
+      if (config) {
+        accepts.push(config.accept);
+      } else {
+        // 如果是扩展名（如 "doc", "docx"），直接添加
+        accepts.push(`.${type}`);
+      }
+    }
+
+    return accepts.filter(Boolean).join(",");
+  };
+
+  // 获取文件类型信息
+  const getFileTypeInfo = (file: File) => {
+    const extension = file.name.split(".").pop()?.toLowerCase();
+    if (!extension) return null;
+
+    // 首先尝试通过 acceptTypes 中指定的类型键来查找
+    for (const type of acceptTypes) {
+      const config = fileTypeConfig[type as keyof typeof fileTypeConfig];
+      if (config && config.extensions.includes(extension)) {
+        return config;
+      }
+    }
+
+    // 如果 acceptTypes 中包含扩展名本身（如 "doc", "docx"），查找所有包含该扩展名的配置
+    if (acceptTypes.includes(extension)) {
+      for (const [, config] of Object.entries(fileTypeConfig)) {
+        if (config.extensions.includes(extension)) {
+          return config;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  // 获取类型名称
+  const getTypeName = (type: string) => {
+    const config = fileTypeConfig[type as keyof typeof fileTypeConfig];
+    if (config) return config.name;
+    // 如果是扩展名，返回友好的名称
+    const extensionNames: Record<string, string> = {
+      doc: "Word文件",
+      docx: "Word文件",
+      pdf: "PDF文件",
+      txt: "文本文件",
+      md: "Markdown文件",
+    };
+    return extensionNames[type] || `${type.toUpperCase()}文件`;
+  };
+
+  // 文件验证
+  const beforeUpload = (file: File) => {
+    // 保存文件名
+    setFileName(file.name);
+
+    const typeInfo = getFileTypeInfo(file);
+    if (!typeInfo) {
+      const allowedTypes = acceptTypes
+        .map(type => getTypeName(type))
+        .filter(Boolean)
+        .join("、");
+      message.error(`只能上传${allowedTypes}！`);
+      return false;
+    }
+
+    const isLtMaxSize = file.size / 1024 / 1024 < maxSize;
+    if (!isLtMaxSize) {
+      message.error(`文件大小不能超过${maxSize}MB！`);
+      return false;
+    }
+
+    return true;
+  };
+
+  // 处理文件变化
+  const handleChange: UploadProps["onChange"] = info => {
+    // 处理上传状态
+    if (info.file.status === "uploading") {
+      setLoading(true);
+    } else if (info.file.status === "done") {
+      setLoading(false);
+      if (showSuccessMessage) {
+        message.success("文件上传成功！");
+      }
+
+      // 从响应中获取上传后的URL
+      let uploadedUrl = "";
+
+      if (info.file.response) {
+        if (typeof info.file.response === "string") {
+          uploadedUrl = info.file.response;
+        } else if (info.file.response.data) {
+          uploadedUrl =
+            typeof info.file.response.data === "string"
+              ? info.file.response.data
+              : info.file.response.data.url || "";
+        } else if (info.file.response.url) {
+          uploadedUrl = info.file.response.url;
+        }
+      }
+
+      // 获取文件名，优先使用保存的文件名，如果没有则使用文件对象的名称
+      const finalFileName = fileName || info.file.name || "";
+
+      if (uploadedUrl && finalFileName) {
+        onChange?.({
+          fileName: finalFileName,
+          fileUrl: uploadedUrl,
+        });
+        // 清空保存的文件名，为下次上传做准备
+        setFileName("");
+      }
+    } else if (info.file.status === "error") {
+      setLoading(false);
+      message.error("上传失败，请重试");
+      // 清空保存的文件名
+      setFileName("");
+    }
+  };
+
+  const action = import.meta.env.VITE_API_BASE_URL + "/v1/attachment/upload";
+
+  return (
+    <div className={style.uploadButtonWrapper}>
+      <Upload
+        name="file"
+        headers={{
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        }}
+        action={action}
+        accept={generateAcceptString()}
+        showUploadList={false}
+        disabled={disabled || loading}
+        beforeUpload={beforeUpload}
+        onChange={handleChange}
+      >
+        <Button
+          type={buttonType}
+          icon={loading ? <LoadingOutlined /> : <CloudUploadOutlined />}
+          loading={loading}
+          disabled={disabled}
+          className={style.uploadButton}
+          block
+          size={size}
+        >
+          {buttonText}
+        </Button>
+      </Upload>
+    </div>
+  );
+};
+
+export default FileUpload;
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts
index b477d105d..751e87623 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/data.ts
@@ -20,7 +20,7 @@ export interface Material {
   type?: KnowledgeBase; // 关联的知识库类型信息
   // 前端扩展字段
   fileName?: string; // 映射自 name
-  fileSize?: number; // 文件大小（前端计算）
+  size?: number; // 文件大小（前端计算）
   fileType?: string; // 文件类型（从 name 提取）
   filePath?: string; // 映射自 fileUrl
   tags?: string[]; // 映射自 label
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss
index ed1fbafa1..89793022d 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.module.scss
@@ -4,6 +4,49 @@
   min-height: 100vh;
 }
 
+.detailContent {
+  padding: 16px;
+}
+
+// 提示横幅
+.banner {
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid #91d5ff;
+}
+
+.bannerIcon {
+  font-size: 20px;
+  color: #1890ff;
+  flex-shrink: 0;
+}
+
+.bannerContent {
+  flex: 1;
+}
+
+.bannerText {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+
+  a {
+    color: #1890ff;
+    text-decoration: none;
+    font-weight: 500;
+    cursor: pointer;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+}
+
 // Tab容器
 .tabContainer {
   background: #fff;
@@ -42,7 +85,6 @@
 // 知识库信息卡片
 .infoCard {
   background: #fff;
-  margin: 12px 16px;
   border-radius: 12px;
   padding: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
@@ -78,6 +120,15 @@
   font-weight: 600;
   color: #222;
   margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.systemPresetLabel {
+  margin-left: 8px;
+  font-size: 12px;
+  color: #999;
+  font-weight: normal;
 }
 
 .infoDescription {
@@ -127,6 +178,66 @@
   font-weight: 500;
 }
 
+// 提示词生效规则
+.promptRulesSection {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.rulesList {
+  margin: 12px 0 0 0;
+  padding-left: 20px;
+  font-size: 13px;
+  color: #666;
+  line-height: 1.8;
+
+  li {
+    margin-bottom: 8px;
+  }
+}
+
+// 知识库独立提示词
+.independentPromptSection {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.promptDisplay {
+  background: #f9f9f9;
+  border-radius: 8px;
+  padding: 12px;
+  margin-top: 8px;
+  min-height: 80px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.promptText {
+  font-size: 13px;
+  color: #333;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.promptEmpty {
+  font-size: 13px;
+  color: #999;
+  text-align: center;
+  padding: 20px 0;
+}
+
+// 上传素材区域
+.uploadSection {
+  margin: 16px 0;
+}
+
+// 库内素材区域
+.materialsSection {
+  margin-top: 16px;
+}
+
 .tags {
   display: flex;
   flex-wrap: wrap;
@@ -226,10 +337,16 @@
   color: #333;
 }
 
+.sectionIcon {
+  font-size: 16px;
+  color: #1890ff;
+}
+
 .sectionCount {
   font-size: 13px;
   color: #888;
   font-weight: normal;
+  margin-left: 4px;
 }
 
 .callerList {
@@ -257,6 +374,22 @@
   height: 40px;
   border-radius: 50%;
   flex-shrink: 0;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .anticon {
+    font-size: 20px;
+    color: #999;
+  }
 }
 
 .callerInfo {
@@ -405,34 +538,16 @@
 .bottomActions {
   display: flex;
   gap: 12px;
-  padding: 16px;
-  background: #fff;
-  border-top: 1px solid #f0f0f0;
-}
-
-.actionButton {
-  flex: 1;
-  padding: 12px;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  background: #fff;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:active {
-    opacity: 0.7;
-  }
+  padding: 16px 0;
+  margin-top: 16px;
 }
 
 .editButton {
-  color: #1890ff;
-  border-color: #1890ff;
+  flex: 1;
 }
 
 .deleteButton {
-  color: #ff4d4f;
-  border-color: #ff4d4f;
+  flex: 1;
 }
 
 // 空状态
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
index 398a1caa1..1728f9247 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
@@ -1,20 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import {
-  Button,
-  Switch,
-  message,
-  Spin,
-  Dropdown,
-  Modal,
-  Input,
-  Upload,
-} from "antd";
+import { Button, Switch, message, Spin, Dropdown, Modal } from "antd";
+import { Dialog, Toast } from "antd-mobile";
 import {
   BookOutlined,
-  CheckCircleOutlined,
   UserOutlined,
-  UploadOutlined,
   FileOutlined,
   VideoCameraOutlined,
   FileTextOutlined,
@@ -23,9 +13,11 @@ import {
   DeleteOutlined,
   SettingOutlined,
   ApiOutlined,
-  BulbOutlined,
-  CalendarOutlined,
-  DatabaseOutlined,
+  CheckCircleOutlined,
+  GlobalOutlined,
+  PlusOutlined,
+  InfoCircleOutlined,
+  MessageOutlined,
 } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
 import NavCommon from "@/components/NavCommon";
@@ -39,14 +31,12 @@ import {
 } from "./api";
 import { deleteKnowledgeBase } from "../list/api";
 import type { KnowledgeBase, Material, Caller } from "./data";
-import FileUpload from "@/components/Upload/FileUpload";
-
-type TabType = "info" | "materials";
+import FileUpload from "@/components/Upload/FileUploadButton";
+import GlobalPromptModal from "../list/components/GlobalPromptModal";
 
 const AIKnowledgeDetail: React.FC = () => {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
-  const [activeTab, setActiveTab] = useState<TabType>("info");
   const [loading, setLoading] = useState(false);
   const [knowledgeBase, setKnowledgeBase] = useState<KnowledgeBase | null>(
     null,
@@ -55,6 +45,7 @@ const AIKnowledgeDetail: React.FC = () => {
   const [callers, setCallers] = useState<Caller[]>([]);
   const [promptEditVisible, setPromptEditVisible] = useState(false);
   const [independentPrompt, setIndependentPrompt] = useState("");
+  const [globalPromptVisible, setGlobalPromptVisible] = useState(false);
 
   useEffect(() => {
     if (id) {
@@ -111,6 +102,46 @@ const AIKnowledgeDetail: React.FC = () => {
     }
   };
 
+  // 更新素材列表
+  const fetchMaterialList = async () => {
+    if (!id) return;
+    try {
+      const materialRes = await getMaterialList({
+        knowledgeBaseId: Number(id),
+        page: 1,
+        limit: 100,
+      });
+
+      // 转换素材数据格式
+      const transformedMaterials = (materialRes.list || []).map(
+        (item: any) => ({
+          ...item,
+          fileName: item.name,
+          tags: item.label || [],
+          filePath: item.fileUrl,
+          uploadTime: item.createTime
+            ? new Date(item.createTime * 1000).toLocaleDateString("zh-CN")
+            : "-",
+          uploaderId: item.userId,
+          fileType: item.name?.split(".").pop() || "file",
+          fileSize: 0, // 接口未返回，需要前端计算或后端补充
+        }),
+      );
+
+      setMaterials(transformedMaterials);
+
+      // 更新知识库的素材数量
+      if (knowledgeBase) {
+        setKnowledgeBase({
+          ...knowledgeBase,
+          materialCount: transformedMaterials.length,
+        });
+      }
+    } catch (error) {
+      console.error("获取素材列表失败", error);
+    }
+  };
+
   const handleAICallToggle = async (checked: boolean) => {
     if (!id || !knowledgeBase) return;
 
@@ -139,46 +170,6 @@ const AIKnowledgeDetail: React.FC = () => {
     }
   };
 
-  const handleIndependentPromptToggle = async (checked: boolean) => {
-    if (!id || !knowledgeBase) return;
-
-    // 系统预设不允许修改
-    if (knowledgeBase.type === 0) {
-      message.warning("系统预设知识库不可修改");
-      return;
-    }
-
-    if (checked) {
-      // 启用时打开编辑弹窗
-      setPromptEditVisible(true);
-    } else {
-      // 禁用时直接更新
-      try {
-        await updateKnowledgeBaseConfig({
-          id: Number(id),
-          name: knowledgeBase.name,
-          description: knowledgeBase.description,
-          label: knowledgeBase.tags || knowledgeBase.label || [],
-          useIndependentPrompt: false,
-          independentPrompt: "",
-        });
-        message.success("已关闭独立提示词");
-        setKnowledgeBase(prev =>
-          prev
-            ? {
-                ...prev,
-                useIndependentPrompt: false,
-                independentPrompt: "",
-                prompt: null,
-              }
-            : null,
-        );
-      } catch (error) {
-        message.error("操作失败");
-      }
-    }
-  };
-
   const handlePromptSave = async () => {
     if (!id || !knowledgeBase) return;
     if (!independentPrompt.trim()) {
@@ -221,41 +212,52 @@ const AIKnowledgeDetail: React.FC = () => {
       return;
     }
 
-    Modal.confirm({
-      title: "确认删除",
+    const result = await Dialog.confirm({
       content: "删除后数据无法恢复，确定要删除该知识库吗？",
-      okText: "确定",
+      confirmText: "确定",
       cancelText: "取消",
-      okButtonProps: { danger: true },
-      onOk: async () => {
-        try {
-          await deleteKnowledgeBase(Number(id));
-          message.success("删除成功");
-          navigate(-1);
-        } catch (error) {
-          message.error("删除失败");
-        }
-      },
     });
+
+    if (result) {
+      try {
+        await deleteKnowledgeBase(Number(id));
+        Toast.show({
+          content: "删除成功",
+          icon: "success",
+        });
+        // 刷新素材列表
+        await fetchMaterialList();
+      } catch (error) {
+        Toast.show({
+          content: "删除失败",
+          icon: "fail",
+        });
+      }
+    }
   };
 
   const handleDeleteMaterial = async (materialId: number) => {
-    Modal.confirm({
-      title: "确认删除",
+    const result = await Dialog.confirm({
       content: "确定要删除该素材吗？",
-      okText: "确定",
+      confirmText: "确定",
       cancelText: "取消",
-      okButtonProps: { danger: true },
-      onOk: async () => {
-        try {
-          await deleteMaterial(materialId);
-          message.success("删除成功");
-          setMaterials(prev => prev.filter(m => m.id !== materialId));
-        } catch (error) {
-          message.error("删除失败");
-        }
-      },
     });
+
+    if (result) {
+      try {
+        await deleteMaterial(materialId);
+        Toast.show({
+          content: "删除成功",
+          icon: "success",
+        });
+        setMaterials(prev => prev.filter(m => m.id !== materialId));
+      } catch (error) {
+        Toast.show({
+          content: "删除失败",
+          icon: "fail",
+        });
+      }
+    }
   };
 
   const handleUpload = async (file: File) => {
@@ -318,13 +320,27 @@ const AIKnowledgeDetail: React.FC = () => {
     return (bytes / (1024 * 1024)).toFixed(1) + " MB";
   };
 
-  const renderInfoTab = () => {
+  const renderContent = () => {
     if (!knowledgeBase) return null;
 
-    const isSystemPreset = knowledgeBase.type === 0; // 系统预设只读
+    const isSystemPreset = knowledgeBase.type === 0;
 
     return (
-      <>
+      <div className={style.detailContent}>
+        {/* 提示横幅 */}
+        <div className={style.banner}>
+          <InfoCircleOutlined className={style.bannerIcon} />
+          <div className={style.bannerContent}>
+            <div className={style.bannerText}>
+              已启用统一提示词规范 ·{" "}
+              <a onClick={() => setGlobalPromptVisible(true)}>
+                点击&#34;统一提示词&#34;可查看和编辑
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* 知识库信息卡片 */}
         <div className={style.infoCard}>
           <div className={style.infoHeader}>
             <div className={style.infoIcon}>
@@ -377,9 +393,10 @@ const AIKnowledgeDetail: React.FC = () => {
             </div>
           </div>
 
+          {/* 内容标签 */}
           {knowledgeBase.tags && knowledgeBase.tags.length > 0 && (
             <div className={style.infoTags}>
-              <div className={style.tagTitle}>内容库标签</div>
+              <div className={style.tagTitle}>内容标签</div>
               <div className={style.tags}>
                 {knowledgeBase.tags.map((tag, index) => (
                   <span key={index} className={style.tag}>
@@ -397,9 +414,6 @@ const AIKnowledgeDetail: React.FC = () => {
                   <ApiOutlined className={style.configIcon} />
                   AI调用配置
                 </div>
-                <div className={style.configDescription}>
-                  AI助手可以使用此内容库的素材
-                </div>
               </div>
               <Switch
                 checked={knowledgeBase.aiCallEnabled}
@@ -411,7 +425,15 @@ const AIKnowledgeDetail: React.FC = () => {
             <div className={style.configItem}>
               <div>
                 <div className={style.configLabel}>
-                  <BulbOutlined className={style.configIcon} />
+                  <CheckCircleOutlined className={style.configIcon} />
+                  AI助手可以使用此内容库的素材
+                </div>
+              </div>
+            </div>
+            <div className={style.configItem}>
+              <div>
+                <div className={style.configLabel}>
+                  <CheckCircleOutlined className={style.configIcon} />
                   支持智能应答和推荐
                 </div>
               </div>
@@ -420,47 +442,90 @@ const AIKnowledgeDetail: React.FC = () => {
             <div className={style.configItem}>
               <div>
                 <div className={style.configLabel}>
-                  <SettingOutlined className={style.configIcon} />
+                  <CheckCircleOutlined className={style.configIcon} />
                   实时响应用户查询
                 </div>
               </div>
             </div>
           </div>
 
-          <div className={style.featureList}>
-            <div className={style.featureItem}>
-              <CheckCircleOutlined className={style.featureIcon} />
-              与各知识库的回复基本合用
-            </div>
-            <div className={style.featureItem}>
-              <CheckCircleOutlined className={style.featureIcon} />
-              确保所有知识库回复的一致性和专业度
+          {/* 提示词生效规则 */}
+          <div className={style.promptRulesSection}>
+            <div className={style.sectionHeader}>
+              <div className={style.sectionTitle}>
+                <InfoCircleOutlined className={style.sectionIcon} />
+                提示词生效规则
+              </div>
             </div>
+            <ol className={style.rulesList}>
+              <li>1、先应用统一提示词 (全局规范)</li>
+              <li>2、再结合知识库独立提示词 (专业指导)</li>
+              <li>3、最终形成针对性的回复风格</li>
+            </ol>
           </div>
 
+          {/* 知识库独立提示词 */}
+          <div className={style.independentPromptSection}>
+            <div className={style.sectionHeader}>
+              <div className={style.sectionTitle}>
+                <MessageOutlined className={style.sectionIcon} />
+                知识库独立提示词
+              </div>
+              <Button
+                type="text"
+                size="small"
+                icon={<SettingOutlined />}
+              ></Button>
+            </div>
+            <div className={style.promptDisplay}>
+              {knowledgeBase.independentPrompt || independentPrompt ? (
+                <div className={style.promptText}>
+                  {knowledgeBase.independentPrompt || independentPrompt}
+                </div>
+              ) : (
+                <div className={style.promptEmpty}>
+                  暂无独立提示词，点击编辑按钮添加
+                </div>
+              )}
+            </div>
+            <Button
+              type="primary"
+              ghost
+              block={true}
+              onClick={() => setPromptEditVisible(true)}
+              disabled={isSystemPreset}
+              style={{ marginTop: 8 }}
+            >
+              编辑独立提示词
+            </Button>
+          </div>
+
+          {/* 调用客服名单 */}
           {callers.length > 0 && (
             <div className={style.callerSection}>
               <div className={style.sectionHeader}>
                 <div className={style.sectionTitle}>
-                  <UserOutlined />
-                  调用者名单
+                  <UserOutlined className={style.sectionIcon} />
+                  调用客服名单
                   <span className={style.sectionCount}>{callers.length}</span>
                 </div>
               </div>
               <div className={style.callerList}>
                 {callers.slice(0, 3).map(caller => (
                   <div key={caller.id} className={style.callerItem}>
-                    <img
-                      src={caller.avatar}
-                      alt={caller.name}
-                      className={style.callerAvatar}
-                    />
+                    <div className={style.callerAvatar}>
+                      {caller.avatar ? (
+                        <img src={caller.avatar} alt={caller.name} />
+                      ) : (
+                        <UserOutlined />
+                      )}
+                    </div>
                     <div className={style.callerInfo}>
                       <div className={style.callerName}>{caller.name}</div>
                       <div className={style.callerRole}>{caller.role}</div>
                     </div>
                     <div className={style.callerTime}>
-                      调用 {caller.callCount} 次 · {caller.lastCallTime}
+                      调用{caller.callCount}次 · {caller.lastCallTime}
                     </div>
                   </div>
                 ))}
@@ -469,52 +534,26 @@ const AIKnowledgeDetail: React.FC = () => {
           )}
         </div>
 
-        {/* 系统预设不显示编辑和删除按钮 */}
+        {/* 上传素材按钮 */}
         {!isSystemPreset && (
-          <div className={style.bottomActions}>
-            <button
-              className={`${style.actionButton} ${style.editButton}`}
-              onClick={() => navigate(`/workspace/ai-knowledge/${id}/edit`)}
-            >
-              <EditOutlined /> 编辑库
-            </button>
-            <button
-              className={`${style.actionButton} ${style.deleteButton}`}
-              onClick={handleDeleteKnowledge}
-            >
-              <DeleteOutlined /> 删除库
-            </button>
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const renderMaterialsTab = () => {
-    const isSystemPreset = knowledgeBase?.type === 0; // 系统预设只读
-
-    return (
-      <div className={style.materialSection}>
-        {/* 系统预设不显示上传按钮 */}
-        {!isSystemPreset && (
-          <div className={style.uploadButtonWrap}>
+          <div className={style.uploadSection}>
             <FileUpload
-              maxCount={1}
-              disabled={isSystemPreset}
+              buttonText="上传素材到此库"
               acceptTypes={["pdf", "txt", "doc", "docx", "md"]}
-              onChange={async v => {
-                // v 可能为 string 或 string[]：单传取 string
-                const uploadUrl = Array.isArray(v) ? v[0] : v;
-                if (uploadUrl && id) {
+              block={true}
+              size="large"
+              onChange={async result => {
+                if (result && result.fileUrl && result.fileName && id) {
                   try {
                     await uploadMaterial({
                       typeId: Number(id),
-                      name: uploadUrl.split("/").pop() || "已上传文件",
+                      name: result.fileName,
                       label: [],
-                      fileUrl: uploadUrl,
+                      fileUrl: result.fileUrl,
                     });
                     message.success("上传成功");
-                    fetchDetail();
+                    // 更新素材列表
+                    await fetchMaterialList();
                   } catch (e) {
                     message.error("上传失败");
                   }
@@ -523,68 +562,94 @@ const AIKnowledgeDetail: React.FC = () => {
             />
           </div>
         )}
-        <div className={style.materialList}>
-          {materials.length > 0 ? (
-            materials.map(material => (
-              <div key={material.id} className={style.materialItem}>
-                {getFileIcon(material.fileType)}
-                <div className={style.materialContent}>
-                  <div className={style.materialHeader}>
-                    <div className={style.materialName}>
-                      {material.fileName}
+
+        {/* 库内素材 */}
+        <div className={style.materialsSection}>
+          <div className={style.sectionHeader}>
+            <div className={style.sectionTitle}>
+              库内素材
+              <span className={style.sectionCount}>{materials.length}</span>
+            </div>
+          </div>
+          <div className={style.materialList}>
+            {materials.length > 0 ? (
+              materials.map(material => (
+                <div key={material.id} className={style.materialItem}>
+                  {getFileIcon(material.fileType)}
+                  <div className={style.materialContent}>
+                    <div className={style.materialHeader}>
+                      <div className={style.materialName}>
+                        {material.fileName}
+                      </div>
+                      {!isSystemPreset && (
+                        <Dropdown
+                          menu={{
+                            items: [
+                              {
+                                key: "delete",
+                                icon: <DeleteOutlined />,
+                                label: "删除",
+                                danger: true,
+                              },
+                            ],
+                            onClick: () => handleDeleteMaterial(material.id),
+                          }}
+                          trigger={["click"]}
+                          placement="bottomRight"
+                        >
+                          <MoreOutlined className={style.materialMenu} />
+                        </Dropdown>
+                      )}
                     </div>
-                    {/* 系统预设不显示删除按钮 */}
-                    {!isSystemPreset && (
-                      <Dropdown
-                        menu={{
-                          items: [
-                            {
-                              key: "delete",
-                              icon: <DeleteOutlined />,
-                              label: "删除",
-                              danger: true,
-                            },
-                          ],
-                          onClick: () => handleDeleteMaterial(material.id),
-                        }}
-                        trigger={["click"]}
-                        placement="bottomRight"
-                      >
-                        <MoreOutlined className={style.materialMenu} />
-                      </Dropdown>
+                    <div className={style.materialMeta}>
+                      <div className={style.materialSize}>
+                        {formatFileSize(material?.size || 0)}
+                      </div>
+                      <div className={style.materialDate}>
+                        {material.uploadTime}
+                      </div>
+                    </div>
+                    {material.tags && material.tags.length > 0 && (
+                      <div className={style.materialTags}>
+                        {material.tags.map((tag, index) => (
+                          <span key={index} className={style.materialTag}>
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
                     )}
                   </div>
-                  <div className={style.materialMeta}>
-                    <div className={style.materialSize}>
-                      <DatabaseOutlined />
-                      {formatFileSize(material.fileSize)}
-                    </div>
-                    <div className={style.materialDate}>
-                      <CalendarOutlined />
-                      {material.uploadTime}
-                    </div>
-                  </div>
-                  {material.tags && material.tags.length > 0 && (
-                    <div className={style.materialTags}>
-                      {material.tags.map((tag, index) => (
-                        <span key={index} className={style.materialTag}>
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                  )}
                 </div>
+              ))
+            ) : (
+              <div className={style.empty}>
+                <div className={style.emptyIcon}>
+                  <FileOutlined />
+                </div>
+                <div className={style.emptyText}>暂无素材</div>
               </div>
-            ))
-          ) : (
-            <div className={style.empty}>
-              <div className={style.emptyIcon}>
-                <FileOutlined />
-              </div>
-              <div className={style.emptyText}>暂无素材</div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
+
+        {/* 底部操作按钮 */}
+        {!isSystemPreset && (
+          <div className={style.bottomActions}>
+            <Button
+              className={style.editButton}
+              onClick={() => navigate(`/workspace/ai-knowledge/${id}/edit`)}
+            >
+              <EditOutlined /> 编辑库
+            </Button>
+            <Button
+              danger
+              className={style.deleteButton}
+              onClick={handleDeleteKnowledge}
+            >
+              <DeleteOutlined /> 删除库
+            </Button>
+          </div>
+        )}
       </div>
     );
   };
@@ -596,23 +661,20 @@ const AIKnowledgeDetail: React.FC = () => {
           <NavCommon
             title="AI知识库"
             backFn={() => navigate("/workspace/ai-knowledge")}
+            right={
+              <div style={{ display: "flex", gap: 8 }}>
+                <Button onClick={() => setGlobalPromptVisible(true)}>
+                  <GlobalOutlined /> 统一提示词
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() => navigate("/workspace/ai-knowledge/new")}
+                >
+                  <PlusOutlined /> 新建
+                </Button>
+              </div>
+            }
           />
-          <div className={style.tabContainer}>
-            <div className={style.tabs}>
-              <button
-                className={`${style.tab} ${activeTab === "info" ? style.tabActive : ""}`}
-                onClick={() => setActiveTab("info")}
-              >
-                内容库列表
-              </button>
-              <button
-                className={`${style.tab} ${activeTab === "materials" ? style.tabActive : ""}`}
-                onClick={() => setActiveTab("materials")}
-              >
-                客户案例
-              </button>
-            </div>
-          </div>
         </>
       }
     >
@@ -622,10 +684,7 @@ const AIKnowledgeDetail: React.FC = () => {
             <Spin size="large" />
           </div>
         ) : (
-          <>
-            {activeTab === "info" && renderMaterialsTab()}
-            {activeTab === "materials" && renderInfoTab()}
-          </>
+          renderContent()
         )}
       </div>
 
@@ -650,6 +709,12 @@ const AIKnowledgeDetail: React.FC = () => {
           💡 独立提示词将与统一提示词合并使用，为该知识库提供专业指导
         </div>
       </Modal>
+
+      {/* 统一提示词弹窗 */}
+      <GlobalPromptModal
+        visible={globalPromptVisible}
+        onClose={() => setGlobalPromptVisible(false)}
+      />
     </Layout>
   );
 };
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
index eaa2f0eed..5bf52f78b 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
@@ -1,6 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button, Switch, Dropdown, message, Spin, Pagination } from "antd";
+import {
+  Button,
+  Switch,
+  Dropdown,
+  message,
+  Spin,
+  Pagination,
+  Input,
+} from "antd";
 import {
   MoreOutlined,
   PlusOutlined,
@@ -9,6 +17,8 @@ import {
   DeleteOutlined,
   GlobalOutlined,
   InfoCircleOutlined,
+  SearchOutlined,
+  ArrowRightOutlined,
 } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
 import NavCommon from "@/components/NavCommon";
@@ -32,6 +42,7 @@ const AIKnowledgeList: React.FC = () => {
   const [enabledCount, setEnabledCount] = useState(0);
   const [page, setPage] = useState(1);
   const [menuLoadingId, setMenuLoadingId] = useState<number | null>(null);
+  const [searchValue, setSearchValue] = useState(""); // 搜索内容
 
   // 弹窗控制
   const [globalPromptVisible, setGlobalPromptVisible] = useState(false);
@@ -80,6 +91,21 @@ const AIKnowledgeList: React.FC = () => {
     fetchList(page);
   };
 
+  const handleSearch = () => {
+    setPage(1);
+  };
+
+  const getFilteredList = () => {
+    const keyword = searchValue.trim().toLowerCase();
+    if (!keyword) return list;
+    return list.filter(item => {
+      return (
+        item.name.toLowerCase().includes(keyword) ||
+        (item.description || "").toLowerCase().includes(keyword)
+      );
+    });
+  };
+
   // 菜单点击事件
   const handleMenuClick = async (key: string, item: KnowledgeBase) => {
     // 系统预设不允许编辑或删除
@@ -257,23 +283,75 @@ const AIKnowledgeList: React.FC = () => {
   return (
     <Layout
       header={
-        <NavCommon
-          title="AI知识库"
-          backFn={() => navigate("/workspace")}
-          right={
-            <div style={{ display: "flex", gap: 8 }}>
-              <Button onClick={() => setGlobalPromptVisible(true)}>
-                <GlobalOutlined /> 统一提示词
-              </Button>
-              <Button
-                type="primary"
-                onClick={() => navigate("/workspace/ai-knowledge/new")}
-              >
-                <PlusOutlined /> 新建
-              </Button>
+        <>
+          <NavCommon
+            title="AI知识库"
+            backFn={() => navigate("/workspace")}
+            right={
+              <div style={{ display: "flex", gap: 8 }}>
+                <Button onClick={() => setGlobalPromptVisible(true)}>
+                  <GlobalOutlined /> 统一提示词
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() => navigate("/workspace/ai-knowledge/new")}
+                >
+                  <PlusOutlined /> 新建
+                </Button>
+              </div>
+            }
+          />
+          <div
+            style={{
+              padding: "16px 16px 0 16px",
+            }}
+          >
+            {/* 提示横幅 */}
+            <div className={style.banner}>
+              <InfoCircleOutlined className={style.bannerIcon} />
+              <div className={style.bannerContent}>
+                <div className={style.bannerText}>
+                  已启用统一提示词规则
+                  <a onClick={() => setGlobalPromptVisible(true)}>
+                    点击&ldquo;统一提示词&rdquo;可查看和编辑
+                  </a>
+                </div>
+              </div>
             </div>
-          }
-        />
+
+            {/* 统计卡片 */}
+            <div className={style.statsContainer}>
+              <div className={style.statCard}>
+                <div className={style.statValue}>{total}</div>
+                <div className={style.statLabel}>内容库总数</div>
+              </div>
+              <div className={style.statCard}>
+                <div className={`${style.statValue} ${style.statValueSuccess}`}>
+                  {enabledCount}
+                </div>
+                <div className={style.statLabel}>启用中</div>
+              </div>
+            </div>
+
+            {/* 搜索和客户案例库按钮 */}
+            <div
+              style={{
+                display: "flex",
+                gap: 8,
+                marginBottom: 12,
+              }}
+            >
+              <Input
+                placeholder="搜索计划名称"
+                value={searchValue}
+                onChange={e => setSearchValue(e.target.value)}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
+              />
+            </div>
+          </div>
+        </>
       }
       footer={
         <div
@@ -299,40 +377,13 @@ const AIKnowledgeList: React.FC = () => {
       }
     >
       <div className={style.knowledgePage}>
-        {/* 提示横幅 */}
-        <div className={style.banner}>
-          <InfoCircleOutlined className={style.bannerIcon} />
-          <div className={style.bannerContent}>
-            <div className={style.bannerText}>
-              已启用统一提示词规则 ·{" "}
-              <a onClick={() => setGlobalPromptVisible(true)}>
-                点击&ldquo;统一提示词&rdquo;可查看和编辑
-              </a>
-            </div>
-          </div>
-        </div>
-
-        {/* 统计卡片 */}
-        <div className={style.statsContainer}>
-          <div className={style.statCard}>
-            <div className={style.statValue}>{total}</div>
-            <div className={style.statLabel}>内容库总数</div>
-          </div>
-          <div className={style.statCard}>
-            <div className={`${style.statValue} ${style.statValueSuccess}`}>
-              {enabledCount}
-            </div>
-            <div className={style.statLabel}>启用中</div>
-          </div>
-        </div>
-
         {/* 知识库列表 */}
         {loading ? (
           <div style={{ textAlign: "center", padding: "40px 0" }}>
             <Spin />
           </div>
-        ) : list.length > 0 ? (
-          list.map(renderCard)
+        ) : getFilteredList().length > 0 ? (
+          getFilteredList().map(renderCard)
         ) : (
           <div className={style.empty}>
             <div className={style.emptyIcon}>

From eada5fe8b127d3b71a4fb4c423268b1bdb221260 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, 31 Oct 2025 16:18:12 +0800
Subject: [PATCH 18/19] Refactor AIKnowledgeDetail and AIKnowledgeList
 components to improve user navigation and search functionality. Update
 deletion logic to navigate back on success and enhance search with debouncing
 and keyword handling. Adjust API to support keyword filtering in
 fetchKnowledgeBaseList.

---
 .../workspace/ai-knowledge/detail/index.tsx   |  7 +-
 .../mobile/workspace/ai-knowledge/list/api.ts |  1 +
 .../workspace/ai-knowledge/list/index.tsx     | 87 +++++++++++--------
 3 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
index 1728f9247..964ad95e8 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/detail/index.tsx
@@ -225,8 +225,8 @@ const AIKnowledgeDetail: React.FC = () => {
           content: "删除成功",
           icon: "success",
         });
-        // 刷新素材列表
-        await fetchMaterialList();
+        // 删除成功后返回上一页
+        navigate(-1);
       } catch (error) {
         Toast.show({
           content: "删除失败",
@@ -250,7 +250,8 @@ const AIKnowledgeDetail: React.FC = () => {
           content: "删除成功",
           icon: "success",
         });
-        setMaterials(prev => prev.filter(m => m.id !== materialId));
+        // 刷新库内素材列表
+        await fetchMaterialList();
       } catch (error) {
         Toast.show({
           content: "删除失败",
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
index e2e445e89..03d23068d 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/api.ts
@@ -24,6 +24,7 @@ export function releaseAIKnowledge(id: number): Promise<any> {
 export function fetchKnowledgeBaseList(params: {
   page?: number;
   limit?: number;
+  keyword?: string;
 }): Promise<KnowledgeBaseListResponse> {
   return request("/v1/knowledge/typeList", params, "GET");
 }
diff --git a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
index 5bf52f78b..5864c1f54 100644
--- a/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/ai-knowledge/list/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Button,
@@ -18,7 +18,6 @@ import {
   GlobalOutlined,
   InfoCircleOutlined,
   SearchOutlined,
-  ArrowRightOutlined,
 } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
 import NavCommon from "@/components/NavCommon";
@@ -42,26 +41,20 @@ const AIKnowledgeList: React.FC = () => {
   const [enabledCount, setEnabledCount] = useState(0);
   const [page, setPage] = useState(1);
   const [menuLoadingId, setMenuLoadingId] = useState<number | null>(null);
-  const [searchValue, setSearchValue] = useState(""); // 搜索内容
+  const [searchValue, setSearchValue] = useState(""); // 搜索输入内容
+  const [keyword, setKeyword] = useState(""); // 实际用于搜索的关键词
+  const isInitialMount = useRef(true); // 标记是否是初始挂载
 
   // 弹窗控制
   const [globalPromptVisible, setGlobalPromptVisible] = useState(false);
 
-  useEffect(() => {
-    // 初始化AI功能
-    initAIKnowledge().catch(err => {
-      console.warn("初始化AI功能失败", err);
-    });
-    fetchList(1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const fetchList = async (pageNum = 1) => {
+  const fetchList = useCallback(async (pageNum = 1, searchKeyword = "") => {
     setLoading(true);
     try {
       const res = await fetchKnowledgeBaseList({
         page: pageNum,
         limit: PAGE_SIZE,
+        keyword: searchKeyword || undefined,
       });
       // 转换数据格式，映射接口字段到前端字段
       const transformedList = (res?.data || []).map((item: any) => ({
@@ -80,30 +73,46 @@ const AIKnowledgeList: React.FC = () => {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    // 初始化AI功能
+    initAIKnowledge().catch(err => {
+      console.warn("初始化AI功能失败", err);
+    });
+    fetchList(1, "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 搜索防抖处理
+  const debouncedSearch = useCallback(() => {
+    const timer = setTimeout(() => {
+      const searchKeyword = searchValue.trim();
+      setKeyword(searchKeyword);
+      setPage(1);
+      fetchList(1, searchKeyword);
+    }, 500); // 500ms 防抖延迟
+
+    return () => clearTimeout(timer);
+  }, [searchValue, fetchList]);
+
+  useEffect(() => {
+    // 初始挂载时不触发搜索（已在初始化时调用 fetchList）
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    const cleanup = debouncedSearch();
+    return cleanup;
+  }, [debouncedSearch]);
 
   const handlePageChange = (p: number) => {
     setPage(p);
-    fetchList(p);
+    fetchList(p, keyword);
   };
 
   const handleRefresh = () => {
-    fetchList(page);
-  };
-
-  const handleSearch = () => {
-    setPage(1);
-  };
-
-  const getFilteredList = () => {
-    const keyword = searchValue.trim().toLowerCase();
-    if (!keyword) return list;
-    return list.filter(item => {
-      return (
-        item.name.toLowerCase().includes(keyword) ||
-        (item.description || "").toLowerCase().includes(keyword)
-      );
-    });
+    fetchList(page, keyword);
   };
 
   // 菜单点击事件
@@ -342,12 +351,18 @@ const AIKnowledgeList: React.FC = () => {
               }}
             >
               <Input
-                placeholder="搜索计划名称"
+                placeholder="搜索知识库名称或描述"
                 value={searchValue}
                 onChange={e => setSearchValue(e.target.value)}
                 prefix={<SearchOutlined />}
                 allowClear
                 size="large"
+                onPressEnter={() => {
+                  const searchKeyword = searchValue.trim();
+                  setKeyword(searchKeyword);
+                  setPage(1);
+                  fetchList(1, searchKeyword);
+                }}
               />
             </div>
           </div>
@@ -382,14 +397,16 @@ const AIKnowledgeList: React.FC = () => {
           <div style={{ textAlign: "center", padding: "40px 0" }}>
             <Spin />
           </div>
-        ) : getFilteredList().length > 0 ? (
-          getFilteredList().map(renderCard)
+        ) : list.length > 0 ? (
+          list.map(renderCard)
         ) : (
           <div className={style.empty}>
             <div className={style.emptyIcon}>
               <BookOutlined />
             </div>
-            <div className={style.emptyText}>暂无知识库</div>
+            <div className={style.emptyText}>
+              {keyword ? "未找到匹配的知识库" : "暂无知识库"}
+            </div>
           </div>
         )}
       </div>

From ca7a2e954f0ca6deb1f44ae9baab6b887b173be4 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, 31 Oct 2025 16:32:04 +0800
Subject: [PATCH 19/19] Implement power statistics API and enhance Power
 Management component. Add new Statistics interface and update UI to display
 formatted usage data. Adjust styles for better readability.

---
 .../pages/mobile/mine/recharge/index/api.ts   | 12 ++++++
 .../mine/recharge/index/index.module.scss     |  2 +-
 .../mobile/mine/recharge/index/index.tsx      | 38 ++++++++++++++-----
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
index a7515f22a..6a870667e 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
@@ -1,5 +1,17 @@
 import request from "@/api/request";
 
+export interface Statistics {
+  totalTokens: number; // 总算力
+  todayUsed: number; // 今日使用
+  monthUsed: number; // 本月使用
+  remainingTokens: number; // 剩余算力
+  totalConsumed: number; // 总消耗
+}
+// 算力统计接口
+export function getStatistics(): Promise<Statistics> {
+  return request("/v1/tokens/statistics", undefined, "GET");
+}
+
 // 算力包套餐类型
 export interface PowerPackage {
   id: number;
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
index e703d1490..be4e8f82f 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
@@ -138,7 +138,7 @@
 }
 
 .usageValue {
-  font-size: 32px;
+  font-size: 20px;
   font-weight: 600;
   margin-bottom: 8px;
 }
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
index ad8424ca3..d713b2f3f 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
@@ -11,8 +11,8 @@ import {
 } from "@ant-design/icons";
 import NavCommon from "@/components/NavCommon";
 import Layout from "@/components/Layout/Layout";
-import { getPowerStats, getOrderList } from "./api";
-import type { PowerStats } from "./api";
+import { getStatistics, getOrderList } from "./api";
+import type { Statistics } from "./api";
 import { Pagination } from "antd";
 
 type OrderRecordView = {
@@ -29,7 +29,7 @@ const PowerManagement: React.FC = () => {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState("overview");
   const [loading, setLoading] = useState(false);
-  const [stats, setStats] = useState<PowerStats | null>(null);
+  const [stats, setStats] = useState<Statistics | null>(null);
   const [records, setRecords] = useState<OrderRecordView[]>([]);
   const [filterType, setFilterType] = useState<string>("all");
   const [filterStatus, setFilterStatus] = useState<string>("all");
@@ -69,7 +69,7 @@ const PowerManagement: React.FC = () => {
 
   const fetchStats = async () => {
     try {
-      const res = await getPowerStats();
+      const res = await getStatistics();
       setStats(res);
     } catch (error) {
       console.error("获取统计失败:", error);
@@ -143,6 +143,22 @@ const PowerManagement: React.FC = () => {
     );
   };
 
+  // 格式化数值：超过1000用k，超过10000用w，保留1位小数
+  const formatNumber = (value: number | undefined): string => {
+    if (value === undefined || value === null) return "0";
+    const num = Number(value);
+    if (isNaN(num)) return "0";
+
+    if (num >= 10000) {
+      const w = num / 10000;
+      return w % 1 === 0 ? `${w}w` : `${w.toFixed(1)}w`;
+    } else if (num >= 1000) {
+      const k = num / 1000;
+      return k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
+    }
+    return String(num);
+  };
+
   // 渲染概览Tab
   const renderOverview = () => (
     <div className={style.overviewContent}>
@@ -155,7 +171,9 @@ const PowerManagement: React.FC = () => {
             </div>
             <div className={style.textWrapper}>
               <div className={style.cardTitle}>总算力</div>
-              <div className={style.cardValue}>{stats?.totalPower || 0}</div>
+              <div className={style.cardValue}>
+                {formatNumber(stats?.totalTokens)}
+              </div>
             </div>
           </div>
         </Card>
@@ -167,19 +185,19 @@ const PowerManagement: React.FC = () => {
         <div className={style.usageStats}>
           <div className={style.usageItem}>
             <div className={`${style.usageValue} ${style.valueGreen}`}>
-              {stats?.todayUsed || 0}
+              {formatNumber(stats?.todayUsed)}
             </div>
             <div className={style.usageLabel}>今日使用</div>
           </div>
           <div className={style.usageItem}>
             <div className={`${style.usageValue} ${style.valueBlue}`}>
-              {stats?.monthUsed || 0}
+              {formatNumber(stats?.monthUsed)}
             </div>
             <div className={style.usageLabel}>本月使用</div>
           </div>
           <div className={style.usageItem}>
             <div className={`${style.usageValue} ${style.valuePurple}`}>
-              {stats?.remainingPower || 0}
+              {formatNumber(stats?.remainingTokens)}
             </div>
             <div className={style.usageLabel}>剩余算力</div>
           </div>
@@ -278,7 +296,9 @@ const PowerManagement: React.FC = () => {
                   <div className={style.recordAmount}>
                     -¥{record.amount.toFixed(1)}
                   </div>
-                  <div className={style.recordPower}>{record.power} 算力</div>
+                  <div className={style.recordPower}>
+                    {formatNumber(record.power)} 算力
+                  </div>
                 </div>
               </div>
               <div className={style.recordDesc}>{record.description}</div>