Merge branch 'yongpxu-dev' into yongpxu-dev2

2025-08-14 10:13:24 +08:00
parent b4384c4329 3c71a2be96
commit 0e71a6701d
19 changed files with 748 additions and 317 deletions
--- a/Cunkebao/dist/.vite/manifest.json
+++ b/Cunkebao/dist/.vite/manifest.json
@@ -1,9 +1,9 @@
 {
-  "_charts-TuAbbBZ5.js": {
-    "file": "assets/charts-TuAbbBZ5.js",
+  "_charts-D0fT04H8.js": {
+    "file": "assets/charts-D0fT04H8.js",
    "name": "charts",
    "imports": [
-      "_ui-D1w-jetn.js",
+      "_ui-qLeQLv1F.js",
      "_vendor-2vc8h_ct.js"
    ]
  },
@@ -11,8 +11,8 @@
    "file": "assets/ui-D0C0OGrH.css",
    "src": "_ui-D0C0OGrH.css"
  },
-  "_ui-D1w-jetn.js": {
-    "file": "assets/ui-D1w-jetn.js",
+  "_ui-qLeQLv1F.js": {
+    "file": "assets/ui-qLeQLv1F.js",
    "name": "ui",
    "imports": [
      "_vendor-2vc8h_ct.js"
@@ -33,18 +33,18 @@
    "name": "vendor"
  },
  "index.html": {
-    "file": "assets/index-D3HSx5Yt.js",
+    "file": "assets/index-Cp05akVy.js",
    "name": "index",
    "src": "index.html",
    "isEntry": true,
    "imports": [
      "_vendor-2vc8h_ct.js",
-      "_ui-D1w-jetn.js",
+      "_ui-qLeQLv1F.js",
      "_utils-6WF66_dS.js",
-      "_charts-TuAbbBZ5.js"
+      "_charts-D0fT04H8.js"
    ],
    "css": [
-      "assets/index-B0SB167P.css"
+      "assets/index-Eg_DAu9e.css"
    ]
  }
 }
--- a/Cunkebao/dist/index.html
+++ b/Cunkebao/dist/index.html
@@ -10,14 +10,14 @@
      }
    </style>
    <!-- 引入 uni-app web-view SDK（必须） -->
-    <script type="text/javascript" src="./websdk.js"></script>
-    <script type="module" crossorigin src="/assets/index-D3HSx5Yt.js"></script>
+    <script type="text/javascript" src="/websdk.js"></script>
+    <script type="module" crossorigin src="/assets/index-Cp05akVy.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-2vc8h_ct.js">
-    <link rel="modulepreload" crossorigin href="/assets/ui-D1w-jetn.js">
+    <link rel="modulepreload" crossorigin href="/assets/ui-qLeQLv1F.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-6WF66_dS.js">
-    <link rel="modulepreload" crossorigin href="/assets/charts-TuAbbBZ5.js">
+    <link rel="modulepreload" crossorigin href="/assets/charts-D0fT04H8.js">
    <link rel="stylesheet" crossorigin href="/assets/ui-D0C0OGrH.css">
-    <link rel="stylesheet" crossorigin href="/assets/index-B0SB167P.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-Eg_DAu9e.css">
  </head>
  <body>
    <div id="root"></div>
--- a/Cunkebao/index.html
+++ b/Cunkebao/index.html
@@ -10,7 +10,7 @@
      }
    </style>
    <!-- 引入 uni-app web-view SDK（必须） -->
-    <script type="text/javascript" src="./websdk.js"></script>
+    <script type="text/javascript" src="/websdk.js"></script>
  </head>
  <body>
    <div id="root"></div>
--- a/Cunkebao/src/components/DeviceSelection/data.ts
+++ b/Cunkebao/src/components/DeviceSelection/data.ts
@@ -8,6 +8,8 @@ export interface DeviceSelectionItem {
  wxid?: string;
  nickname?: string;
  usedInPlans?: number;
+  avatar?: string;
+  totalFriend?: number;
 }

 // 组件属性接口
--- a/Cunkebao/src/components/DeviceSelection/index.module.scss
+++ b/Cunkebao/src/components/DeviceSelection/index.module.scss
@@ -67,60 +67,152 @@
 }
 .deviceItem {
  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  border-radius: 12px;
-  border: 1px solid #f0f0f0;
+  flex-direction: column;
+  padding: 12px;
  background: #fff;
-  cursor: pointer;
-  transition: background 0.2s;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
+  border: 1px solid #f5f5f5;
+
  &:hover {
-    background: #f5f6fa;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkboxContainer {
+  flex-shrink: 0;
+}
+
+.imeiText {
+  font-size: 13px;
+  color: #666;
+  font-family: monospace;
+  flex: 1;
+}
+
+.mainContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f8f9fa;
  }
 }
 .deviceCheckbox {
-  margin-top: 4px;
+  flex-shrink: 0;
 }
 .deviceInfo {
  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
+.deviceAvatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatarText {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 700;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.deviceContent {
+  flex: 1;
+  min-width: 0;
+}
+
 .deviceInfoRow {
  display: flex;
  align-items: center;
-  justify-content: space-between;
+  gap: 6px;
+  margin-bottom: 6px;
 }
 .deviceName {
-  font-weight: 500;
  font-size: 16px;
-  color: #222;
+  font-weight: 600;
+  color: #1a1a1a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .statusOnline {
-  width: 56px;
-  height: 24px;
-  border-radius: 12px;
-  background: #52c41a;
-  color: #fff;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  color: #52c41a;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  font-weight: 500;
 }
 .statusOffline {
-  width: 56px;
-  height: 24px;
-  border-radius: 12px;
-  background: #e5e6eb;
-  color: #888;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  color: #ff4d4f;
+  background: #fff2f0;
+  border: 1px solid #ffccc7;
+  font-weight: 500;
 }
 .deviceInfoDetail {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.infoLabel {
  font-size: 13px;
-  color: #888;
-  margin-top: 4px;
+  color: #666;
+  min-width: 50px;
+}
+
+.infoValue {
+  font-size: 13px;
+  color: #333;
+
+  &.imei {
+    font-family: monospace;
+  }
+
+  &.friendCount {
+    font-weight: 500;
+  }
 }
 .loadingBox {
  display: flex;
--- a/Cunkebao/src/components/DeviceSelection/index.tsx
+++ b/Cunkebao/src/components/DeviceSelection/index.tsx
@@ -46,6 +46,12 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
    onSelect(selectedOptions.filter(v => v.id !== id));
  };

+  // 清除所有已选设备
+  const handleClearAll = () => {
+    if (readonly) return;
+    onSelect([]);
+  };
+
  return (
    <>
      {/* mode=input 显示输入框，mode=dialog不显示 */}
@@ -57,6 +63,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
            onClick={openPopup}
            prefix={<SearchOutlined />}
            allowClear={!readonly}
+            onClear={handleClearAll}
            size="large"
            readOnly={readonly}
            disabled={readonly}
@@ -86,11 +93,52 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
              style={{
                display: "flex",
                alignItems: "center",
-                padding: "4px 8px",
+                padding: "8px 12px",
                borderBottom: "1px solid #f0f0f0",
                fontSize: 14,
              }}
            >
+              {/* 头像 */}
+              <div
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: "6px",
+                  background:
+                    "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  overflow: "hidden",
+                  boxShadow: "0 2px 8px rgba(102, 126, 234, 0.25)",
+                  marginRight: "12px",
+                  flexShrink: 0,
+                }}
+              >
+                {device.avatar ? (
+                  <img
+                    src={device.avatar}
+                    alt="头像"
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                    }}
+                  />
+                ) : (
+                  <span
+                    style={{
+                      fontSize: 16,
+                      color: "#fff",
+                      fontWeight: 700,
+                      textShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                    }}
+                  >
+                    {(device.memo || device.wechatId || "设")[0]}
+                  </span>
+                )}
+              </div>
+
              <div
                style={{
                  flex: 1,
@@ -100,7 +148,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
                  textOverflow: "ellipsis",
                }}
              >
-                【 {device.memo}】 - {device.wechatId}
+                {device.memo} - {device.wechatId}
              </div>
              {!readonly && (
                <Button
--- a/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
+++ b/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
@@ -51,6 +51,8 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
              wxid: d.wechatId || "",
              nickname: d.nickname || "",
              usedInPlans: d.usedInPlans || 0,
+              avatar: d.avatar || "",
+              totalFriend: d.totalFriend || 0,
            })),
          );
          setTotal(res.total || 0);
@@ -161,31 +163,67 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
          ) : (
            <div className={style.deviceListInner}>
              {filteredDevices.map(device => (
-                <label key={device.id} className={style.deviceItem}>
-                  <Checkbox
-                    checked={selectedOptions.some(v => v.id === device.id)}
-                    onChange={() => handleDeviceToggle(device)}
-                    className={style.deviceCheckbox}
-                  />
-                  <div className={style.deviceInfo}>
-                    <div className={style.deviceInfoRow}>
-                      <span className={style.deviceName}>{device.memo}</span>
-                      <div
-                        className={
-                          device.status === "online"
-                            ? style.statusOnline
-                            : style.statusOffline
-                        }
-                      >
-                        {device.status === "online" ? "在线" : "离线"}
+                <div key={device.id} className={style.deviceItem}>
+                  {/* 顶部行：选择框和IMEI */}
+                  <div className={style.headerRow}>
+                    <div className={style.checkboxContainer}>
+                      <Checkbox
+                        checked={selectedOptions.some(v => v.id === device.id)}
+                        onChange={() => handleDeviceToggle(device)}
+                        className={style.deviceCheckbox}
+                      />
+                    </div>
+                    <span className={style.imeiText}>
+                      IMEI: {device.imei?.toUpperCase()}
+                    </span>
+                  </div>
+
+                  {/* 主要内容区域：头像和详细信息 */}
+                  <div className={style.mainContent}>
+                    {/* 头像 */}
+                    <div className={style.deviceAvatar}>
+                      {device.avatar ? (
+                        <img src={device.avatar} alt="头像" />
+                      ) : (
+                        <span className={style.avatarText}>
+                          {(device.memo || device.wechatId || "设")[0]}
+                        </span>
+                      )}
+                    </div>
+
+                    {/* 设备信息 */}
+                    <div className={style.deviceContent}>
+                      <div className={style.deviceInfoRow}>
+                        <span className={style.deviceName}>{device.memo}</span>
+                        <div
+                          className={
+                            device.status === "online"
+                              ? style.statusOnline
+                              : style.statusOffline
+                          }
+                        >
+                          {device.status === "online" ? "在线" : "离线"}
+                        </div>
+                      </div>
+                      <div className={style.deviceInfoDetail}>
+                        <div className={style.infoItem}>
+                          <span className={style.infoLabel}>微信号:</span>
+                          <span className={style.infoValue}>
+                            {device.wechatId}
+                          </span>
+                        </div>
+                        <div className={style.infoItem}>
+                          <span className={style.infoLabel}>好友数:</span>
+                          <span
+                            className={`${style.infoValue} ${style.friendCount}`}
+                          >
+                            {device.totalFriend ?? "-"}
+                          </span>
+                        </div>
                      </div>
                    </div>
-                    <div className={style.deviceInfoDetail}>
-                      <div>IMEI: {device.imei}</div>
-                      <div>微信号: {device.wechatId}</div>
-                    </div>
                  </div>
-                </label>
+                </div>
              ))}
            </div>
          )}
--- a/Cunkebao/src/pages/mobile/mine/content/form/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/content/form/index.tsx
@@ -62,9 +62,7 @@ export default function ContentForm() {
          setSelectedFriends(data.sourceFriends || []);
          setSelectedGroups(data.selectedGroups || []);
          setSelectedGroupsOptions(data.selectedGroupsOptions || []);
-
-          setSelectedFriendsOptions(data.sourceFriendsOptions || []);
-
+          setSelectedFriendsOptions(data.friendsGroupsOptions || []);
          setKeywordsInclude((data.keywordInclude || []).join(","));
          setKeywordsExclude((data.keywordExclude || []).join(","));
          setAIPrompt(data.aiPrompt || "");
--- a/Cunkebao/src/pages/mobile/mine/content/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/content/list/index.tsx
@@ -132,7 +132,7 @@ const ContentLibraryList: React.FC = () => {
  };

  const handleEdit = (id: string) => {
-    navigate(`/content/edit/${id}`);
+    navigate(`/mine/content/edit/${id}`);
  };

  const handleDelete = async (id: string) => {
--- a/Cunkebao/src/pages/mobile/mine/devices/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/devices/index.module.scss
@@ -0,0 +1,173 @@
+.deviceList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.deviceCard {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+
+  &.selected {
+    border: 2px solid #1677ff;
+  }
+
+  &:not(.selected) {
+    border: 1px solid #f5f5f5;
+  }
+}
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.checkboxContainer {
+  flex-shrink: 0;
+}
+
+.imeiText {
+  font-size: 13px;
+  color: #666;
+  font-family: monospace;
+  flex: 1;
+}
+
+.mainContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f8f9fa;
+  }
+}
+
+.avatar {
+  width: 64px;
+  height: 64px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
+  flex-shrink: 0;
+  border-radius: 6px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatarText {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 700;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.deviceInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.deviceHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.deviceName {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.statusBadge {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  font-weight: 500;
+
+  &.online {
+    color: #52c41a;
+    background: #f6ffed;
+    border: 1px solid #b7eb8f;
+  }
+
+  &.offline {
+    color: #ff4d4f;
+    background: #fff2f0;
+    border: 1px solid #ffccc7;
+  }
+}
+
+.infoList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.infoLabel {
+  font-size: 13px;
+  color: #666;
+  min-width: 50px;
+}
+
+.infoValue {
+  font-size: 13px;
+  color: #333;
+
+  &.friendCount {
+    font-weight: 500;
+  }
+}
+
+.arrowIcon {
+  color: #999;
+  font-size: 14px;
+  margin-left: auto;
+  transition: transform 0.2s ease;
+}
+
+.mainContent:hover .arrowIcon {
+  transform: translateX(3px);
+  color: #1677ff;
+}
+
+.paginationContainer {
+  padding: 16px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: center;
+}
--- a/Cunkebao/src/pages/mobile/mine/devices/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/devices/index.tsx
@@ -7,6 +7,7 @@ import {
  ReloadOutlined,
  SearchOutlined,
  QrcodeOutlined,
+  RightOutlined,
 } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
 import {
@@ -19,6 +20,7 @@ import type { Device } from "@/types/device";
 import { comfirm } from "@/utils/common";
 import { useUserStore } from "@/store/module/user";
 import NavCommon from "@/components/NavCommon";
+import styles from "./index.module.scss";

 const Devices: React.FC = () => {
  // 设备列表相关
@@ -250,7 +252,7 @@ const Devices: React.FC = () => {
        </>
      }
      footer={
-        <div className="pagination-container">
+        <div className={styles.paginationContainer}>
          <Pagination
            current={page}
            pageSize={20}
@@ -264,65 +266,86 @@ const Devices: React.FC = () => {
    >
      <div style={{ padding: 12 }}>
        {/* 设备列表 */}
-        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        <div className={styles.deviceList}>
          {filtered.map(device => (
-            <div
-              key={device.id}
-              style={{
-                background: "#fff",
-                borderRadius: 12,
-                padding: 12,
-                boxShadow: "0 1px 4px #eee",
-                display: "flex",
-                alignItems: "center",
-                cursor: "pointer",
-                border: selected.includes(device.id)
-                  ? "1.5px solid #1677ff"
-                  : "1px solid #f0f0f0",
-              }}
-              onClick={() => goDetail(device.id!)}
-            >
-              <Checkbox
-                checked={selected.includes(device.id)}
-                onChange={e => {
-                  e.stopPropagation();
-                  setSelected(prev =>
-                    e.target.checked
-                      ? [...prev, device.id!]
-                      : prev.filter(id => id !== device.id),
-                  );
-                }}
-                onClick={e => e.stopPropagation()}
-                style={{ marginRight: 12 }}
-              />
-              <div style={{ flex: 1 }}>
-                <div style={{ fontWeight: 600, fontSize: 16 }}>
-                  {device.memo || "未命名设备"}
-                </div>
-                <div style={{ fontSize: 14, color: "#999", marginTop: 2 }}>
-                  IMEI: {device.imei}
-                </div>
-                <div style={{ fontSize: 14, color: "#999", marginTop: 2 }}>
-                  微信号: {device.wechatId || "未绑定"}
-                </div>
-                <div style={{ fontSize: 14, color: "#999", marginTop: 2 }}>
-                  好友数: {device.totalFriend ?? "-"}
+            <div key={device.id} className={styles.deviceCard}>
+              {/* 顶部行：选择框和IMEI */}
+              <div className={styles.headerRow}>
+                <div className={styles.checkboxContainer}>
+                  <Checkbox
+                    checked={selected.includes(device.id)}
+                    onChange={e => {
+                      e.stopPropagation();
+                      setSelected(prev =>
+                        e.target.checked
+                          ? [...prev, device.id!]
+                          : prev.filter(id => id !== device.id),
+                      );
+                    }}
+                    onClick={e => e.stopPropagation()}
+                  />
                </div>
+                <span className={styles.imeiText}>
+                  IMEI: {device.imei?.toUpperCase()}
+                </span>
+              </div>
+
+              {/* 主要内容区域：头像和详细信息 */}
+              <div className={styles.mainContent}>
+                {/* 头像 */}
+                <div className={styles.avatar}>
+                  {device.avatar ? (
+                    <img src={device.avatar} alt="头像" />
+                  ) : (
+                    <span className={styles.avatarText}>
+                      {(device.memo || device.wechatId || "设")[0]}
+                    </span>
+                  )}
+                </div>
+
+                {/* 设备信息 */}
+                <div className={styles.deviceInfo}>
+                  <div className={styles.deviceHeader}>
+                    <h3 className={styles.deviceName}>
+                      {device.memo || "未命名设备"}
+                    </h3>
+                    <span
+                      className={`${styles.statusBadge} ${
+                        device.status === "online" || device.alive === 1
+                          ? styles.online
+                          : styles.offline
+                      }`}
+                    >
+                      {device.status === "online" || device.alive === 1
+                        ? "在线"
+                        : "离线"}
+                    </span>
+                  </div>
+
+                  <div className={styles.infoList}>
+                    <div className={styles.infoItem}>
+                      <span className={styles.infoLabel}>微信号:</span>
+                      <span className={styles.infoValue}>
+                        {device.wechatId || "未绑定"}
+                      </span>
+                    </div>
+                    <div className={styles.infoItem}>
+                      <span className={styles.infoLabel}>好友数:</span>
+                      <span
+                        className={`${styles.infoValue} ${styles.friendCount}`}
+                      >
+                        {device.totalFriend ?? "-"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 箭头图标 */}
+                <RightOutlined
+                  className={styles.arrowIcon}
+                  onClick={() => goDetail(device.id!)}
+                />
              </div>
-              <span
-                style={{
-                  fontSize: 12,
-                  color:
-                    device.status === "online" || device.alive === 1
-                      ? "#52c41a"
-                      : "#aaa",
-                  marginLeft: 8,
-                }}
-              >
-                {device.status === "online" || device.alive === 1
-                  ? "在线"
-                  : "离线"}
-              </span>
            </div>
          ))}

--- a/Cunkebao/src/pages/mobile/mine/main/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/main/index.tsx
@@ -64,7 +64,7 @@ const Mine: React.FC = () => {
      description: "管理用户流量池和分组",
      icon: <DatabaseOutlined />,
      count: stats.traffic,
-      path: "/traffic-pool",
+      path: "/mine/traffic-pool",
      bgColor: "#f9f0ff",
      iconColor: "#722ed1",
    },
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/FilterModal.tsx
@@ -1,118 +1,158 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Popup } from "antd-mobile";
 import { Select, Button } from "antd";
-import type {
-  DeviceOption,
-  PackageOption,
-  ValueLevel,
-  UserStatus,
-} from "./data";
+import DeviceSelection from "@/components/DeviceSelection";
+import type { UserStatus, ScenarioOption } from "./data";
+import { fetchScenarioOptions, fetchPackageOptions } from "./api";
+import { DeviceSelectionItem } from "@/components/DeviceSelection/data";

 interface FilterModalProps {
  visible: boolean;
  onClose: () => void;
-  deviceOptions: DeviceOption[];
-  packageOptions: PackageOption[];
-  deviceId: string;
-  setDeviceId: (v: string) => void;
-  packageId: string;
-  setPackageId: (v: string) => void;
-  valueLevel: ValueLevel;
-  setValueLevel: (v: ValueLevel) => void;
-  userStatus: UserStatus;
-  setUserStatus: (v: UserStatus) => void;
-  onReset: () => void;
+  onConfirm: (filters: {
+    deviceIds: string[];
+    packageId: string;
+    scenarioId: string;
+    userValue: number;
+    userStatus: number;
+  }) => void;
+  scenarioOptions: ScenarioOption[];
 }

 const valueLevelOptions = [
-  { label: "全部价值", value: "all" },
-  { label: "高价值", value: "high" },
-  { label: "中价值", value: "medium" },
-  { label: "低价值", value: "low" },
+  { label: "全部价值", value: 0 },
+  { label: "高价值", value: 1 },
+  { label: "中价值", value: 2 },
+  { label: "低价值", value: 3 },
 ];
 const statusOptions = [
-  { label: "全部状态", value: "all" },
-  { label: "已添加", value: "added" },
-  { label: "待添加", value: "pending" },
-  { label: "添加失败", value: "failed" },
-  { label: "重复", value: "duplicate" },
+  { label: "全部状态", value: 0 },
+  { label: "已添加", value: 1 },
+  { label: "待添加", value: 2 },
+  { label: "重复", value: 3 },
+  { label: "添加失败", value: -1 },
 ];

 const FilterModal: React.FC<FilterModalProps> = ({
  visible,
  onClose,
-  deviceOptions,
-  packageOptions,
-  deviceId,
-  setDeviceId,
-  packageId,
-  setPackageId,
-  valueLevel,
-  setValueLevel,
-  userStatus,
-  setUserStatus,
-  onReset,
-}) => (
-  <Popup
-    visible={visible}
-    onMaskClick={onClose}
-    position="right"
-    bodyStyle={{ width: "80vw", maxWidth: 360, padding: 24 }}
-  >
-    <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 20 }}>
-      筛选选项
-    </div>
-    <div style={{ marginBottom: 20 }}>
-      <div style={{ marginBottom: 6 }}>设备</div>
-      <Select
-        style={{ width: "100%" }}
-        value={deviceId}
-        onChange={setDeviceId}
-        options={[
-          { label: "全部设备", value: "all" },
-          ...deviceOptions.map(d => ({ label: d.name, value: d.id })),
-        ]}
-      />
-    </div>
-    <div style={{ marginBottom: 20 }}>
-      <div style={{ marginBottom: 6 }}>流量池</div>
-      <Select
-        style={{ width: "100%" }}
-        value={packageId}
-        onChange={setPackageId}
-        options={[
-          { label: "全部流量池", value: "all" },
-          ...packageOptions.map(p => ({ label: p.name, value: p.id })),
-        ]}
-      />
-    </div>
-    <div style={{ marginBottom: 20 }}>
-      <div style={{ marginBottom: 6 }}>用户价值</div>
-      <Select
-        style={{ width: "100%" }}
-        value={valueLevel}
-        onChange={v => setValueLevel(v as ValueLevel)}
-        options={valueLevelOptions}
-      />
-    </div>
-    <div style={{ marginBottom: 20 }}>
-      <div style={{ marginBottom: 6 }}>添加状态</div>
-      <Select
-        style={{ width: "100%" }}
-        value={userStatus}
-        onChange={v => setUserStatus(v as UserStatus)}
-        options={statusOptions}
-      />
-    </div>
-    <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
-      <Button onClick={onReset} style={{ flex: 1 }}>
-        重置筛选
-      </Button>
-      <Button type="primary" onClick={onClose} style={{ flex: 1 }}>
-        应用筛选
-      </Button>
-    </div>
-  </Popup>
-);
+  onConfirm,
+}) => {
+  const [selectedDevices, setSelectedDevices] = useState<DeviceSelectionItem[]>(
+    [],
+  );
+  const [packageId, setPackageId] = useState<string>("");
+  const [scenarioId, setScenarioId] = useState<string>("");
+  const [userValue, setUserValue] = useState<number>(0);
+  const [userStatus, setUserStatus] = useState<number>(0);
+  const [scenarioOptions, setScenarioOptions] = useState<any[]>([]);
+  const [packageOptions, setPackageOptions] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (visible) {
+      fetchScenarioOptions().then(res => {
+        setScenarioOptions(res);
+      });
+      fetchPackageOptions().then(res => {
+        setPackageOptions(res);
+      });
+    }
+  }, [visible]);
+
+  const handleApply = () => {
+    const params = {
+      deviceIds: selectedDevices.map(d => d.id.toString()),
+      packageId,
+      scenarioId,
+      userValue,
+      userStatus,
+    };
+    console.log(params);
+
+    onConfirm(params);
+    onClose();
+  };
+
+  const handleReset = () => {
+    setSelectedDevices([]);
+    setPackageId("");
+    setScenarioId("");
+    setUserValue(0);
+    setUserStatus(0);
+  };
+
+  return (
+    <Popup
+      visible={visible}
+      onMaskClick={onClose}
+      position="right"
+      bodyStyle={{ width: "80vw", maxWidth: 360, padding: 24 }}
+    >
+      <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 20 }}>
+        筛选选项
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <div style={{ marginBottom: 6 }}>设备</div>
+        <DeviceSelection
+          selectedOptions={selectedDevices}
+          onSelect={setSelectedDevices}
+          placeholder="选择设备"
+          showSelectedList={false}
+          selectedListMaxHeight={120}
+        />
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <div style={{ marginBottom: 6 }}>流量池</div>
+        <Select
+          style={{ width: "100%" }}
+          value={packageId}
+          onChange={setPackageId}
+          options={[
+            { label: "全部流量池", value: "" },
+            ...packageOptions.map(p => ({ label: p.name, value: p.id })),
+          ]}
+        />
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <div style={{ marginBottom: 6 }}>获客场景</div>
+        <Select
+          style={{ width: "100%" }}
+          value={scenarioId}
+          onChange={setScenarioId}
+          options={[
+            { label: "全部场景", value: "" },
+            ...scenarioOptions.map(s => ({ label: s.name, value: s.id })),
+          ]}
+        />
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <div style={{ marginBottom: 6 }}>用户价值</div>
+        <Select
+          style={{ width: "100%" }}
+          value={userValue}
+          onChange={v => setUserValue(v as number)}
+          options={valueLevelOptions}
+        />
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <div style={{ marginBottom: 6 }}>添加状态</div>
+        <Select
+          style={{ width: "100%" }}
+          value={userStatus}
+          onChange={v => setUserStatus(v as UserStatus)}
+          options={statusOptions}
+        />
+      </div>
+      <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
+        <Button onClick={handleReset} style={{ flex: 1 }}>
+          重置筛选
+        </Button>
+        <Button type="primary" onClick={handleApply} style={{ flex: 1 }}>
+          应用筛选
+        </Button>
+      </div>
+    </Popup>
+  );
+};

 export default FilterModal;
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/api.ts
@@ -9,11 +9,10 @@ export function fetchTrafficPoolList(params: {
  return request("/v1/traffic/pool", params, "GET");
 }

-// 获取分组列表（如无真实接口可用mock）
-export async function fetchPackageOptions(): Promise<any[]> {
-  // TODO: 替换为真实接口
-  return [
-    { id: "pkg-1", name: "高价值客户池" },
-    { id: "pkg-2", name: "测试流量池" },
-  ];
+export async function fetchScenarioOptions(): Promise<any[]> {
+  return request("/v1/plan/scenes", {}, "GET");
+}
+
+export async function fetchPackageOptions(): Promise<any[]> {
+  return request("/v1/traffic/pool/getPackage", {}, "GET");
 }
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/data.ts
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/data.ts
@@ -43,3 +43,9 @@ export type ValueLevel = "all" | "high" | "medium" | "low";

 // 状态类型
 export type UserStatus = "all" | "added" | "pending" | "failed" | "duplicate";
+
+// 获客场景类型
+export interface ScenarioOption {
+  id: string;
+  name: string;
+}
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx
@@ -1,11 +1,16 @@
 import { useState, useEffect, useMemo } from "react";
-import { fetchTrafficPoolList, fetchPackageOptions } from "./api";
+import {
+  fetchTrafficPoolList,
+  fetchPackageOptions,
+  fetchScenarioOptions,
+} from "./api";
 import type {
  TrafficPoolUser,
  DeviceOption,
  PackageOption,
  ValueLevel,
  UserStatus,
+  ScenarioOption,
 } from "./data";
 import { Toast } from "antd-mobile";

@@ -19,12 +24,13 @@ export function useTrafficPoolListLogic() {

  // 筛选相关
  const [showFilter, setShowFilter] = useState(false);
-  const [deviceOptions, setDeviceOptions] = useState<DeviceOption[]>([]);
  const [packageOptions, setPackageOptions] = useState<PackageOption[]>([]);
-  const [deviceId, setDeviceId] = useState<string>("all");
-  const [packageId, setPackageId] = useState<string>("all");
-  const [valueLevel, setValueLevel] = useState<ValueLevel>("all");
-  const [userStatus, setUserStatus] = useState<UserStatus>("all");
+  const [scenarioOptions, setScenarioOptions] = useState<ScenarioOption[]>([]);
+  const [selectedDevices, setSelectedDevices] = useState<any[]>([]);
+  const [packageId, setPackageId] = useState<number>(0);
+  const [scenarioId, setScenarioId] = useState<number>(0);
+  const [userValue, setUserValue] = useState<number>(0);
+  const [userStatus, setUserStatus] = useState<number>(0);

  // 批量相关
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
@@ -47,15 +53,22 @@ export function useTrafficPoolListLogic() {
  const getList = async () => {
    setLoading(true);
    try {
-      const res = await fetchTrafficPoolList({
+      const params: any = {
        page,
        pageSize,
        keyword: search,
-        // deviceId,
-        // packageId,
-        // valueLevel,
-        // userStatus,
-      });
+        packageId,
+        taskId: scenarioId,
+        userValue,
+        addStatus: userStatus,
+      };
+
+      // 添加筛选参数
+      if (selectedDevices.length > 0) {
+        params.deviceId = selectedDevices.map(d => d.id).join(",");
+      }
+
+      const res = await fetchTrafficPoolList(params);
      setList(res.list || []);
      setTotal(res.total || 0);
    } finally {
@@ -66,13 +79,22 @@ export function useTrafficPoolListLogic() {
  // 获取筛选项
  useEffect(() => {
    fetchPackageOptions().then(setPackageOptions);
+    fetchScenarioOptions().then(setScenarioOptions);
  }, []);

  // 筛选条件变化时刷新列表
  useEffect(() => {
    getList();
    // eslint-disable-next-line
-  }, [page, search /*, deviceId, packageId, valueLevel, userStatus*/]);
+  }, [
+    page,
+    search,
+    selectedDevices,
+    packageId,
+    scenarioId,
+    userValue,
+    userStatus,
+  ]);

  // 全选/反选
  const handleSelectAll = (checked: boolean) => {
@@ -108,10 +130,11 @@ export function useTrafficPoolListLogic() {

  // 筛选重置
  const resetFilter = () => {
-    setDeviceId("all");
-    setPackageId("all");
-    setValueLevel("all");
-    setUserStatus("all");
+    setSelectedDevices([]);
+    setPackageId(0);
+    setScenarioId(0);
+    setUserValue(0);
+    setUserStatus(0);
  };

  return {
@@ -125,14 +148,16 @@ export function useTrafficPoolListLogic() {
    setSearch,
    showFilter,
    setShowFilter,
-    deviceOptions,
    packageOptions,
-    deviceId,
-    setDeviceId,
+    scenarioOptions,
+    selectedDevices,
+    setSelectedDevices,
    packageId,
    setPackageId,
-    valueLevel,
-    setValueLevel,
+    scenarioId,
+    setScenarioId,
+    userValue,
+    setUserValue,
    userStatus,
    setUserStatus,
    selectedIds,
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -5,9 +5,9 @@ import {
  ReloadOutlined,
  BarChartOutlined,
 } from "@ant-design/icons";
-import { Input, Button, Checkbox } from "antd";
+import { Input, Button, Checkbox, Pagination } from "antd";
 import styles from "./index.module.scss";
-import { List, Empty, Avatar, Modal, Selector, Toast, Card } from "antd-mobile";
+import { Empty, Avatar } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
 import NavCommon from "@/components/NavCommon";
 import { useTrafficPoolListLogic } from "./dataAnyx";
@@ -18,20 +18,6 @@ import BatchAddModal from "./BatchAddModal";
 const defaultAvatar =
  "https://cdn.jsdelivr.net/gh/maokaka/static/avatar-default.png";

-const valueLevelOptions = [
-  { label: "全部", value: "all" },
-  { label: "高价值", value: "high" },
-  { label: "中价值", value: "medium" },
-  { label: "低价值", value: "low" },
-];
-const statusOptions = [
-  { label: "全部", value: "all" },
-  { label: "已添加", value: "added" },
-  { label: "待添加", value: "pending" },
-  { label: "添加失败", value: "failed" },
-  { label: "重复", value: "duplicate" },
-];
-
 const TrafficPoolList: React.FC = () => {
  const navigate = useNavigate();
  const {
@@ -45,15 +31,12 @@ const TrafficPoolList: React.FC = () => {
    setSearch,
    showFilter,
    setShowFilter,
-    deviceOptions,
    packageOptions,
-    deviceId,
-    setDeviceId,
-    packageId,
+    scenarioOptions,
+    setSelectedDevices,
    setPackageId,
-    valueLevel,
-    setValueLevel,
-    userStatus,
+    setScenarioId,
+    setUserValue,
    setUserStatus,
    selectedIds,
    handleSelectAll,
@@ -67,7 +50,6 @@ const TrafficPoolList: React.FC = () => {
    setShowStats,
    stats,
    getList,
-    resetFilter,
  } = useTrafficPoolListLogic();

  return (
@@ -154,6 +136,17 @@ const TrafficPoolList: React.FC = () => {
          </div>
        </>
      }
+      footer={
+        <div className="pagination-container">
+          <Pagination
+            current={page}
+            pageSize={20}
+            total={total}
+            showSizeChanger={false}
+            onChange={setPage}
+          />
+        </div>
+      }
    >
      {/* 批量加入分组弹窗 */}
      <BatchAddModal
@@ -169,17 +162,25 @@ const TrafficPoolList: React.FC = () => {
      <FilterModal
        visible={showFilter}
        onClose={() => setShowFilter(false)}
-        deviceOptions={deviceOptions}
-        packageOptions={packageOptions}
-        deviceId={deviceId}
-        setDeviceId={setDeviceId}
-        packageId={packageId}
-        setPackageId={setPackageId}
-        valueLevel={valueLevel}
-        setValueLevel={setValueLevel}
-        userStatus={userStatus}
-        setUserStatus={setUserStatus}
-        onReset={resetFilter}
+        onConfirm={filters => {
+          // 更新筛选条件
+          setSelectedDevices(
+            filters.deviceIds.map(id => ({
+              id: parseInt(id),
+              memo: "",
+              imei: "",
+              wechatId: "",
+              status: "offline" as const,
+            })),
+          );
+          setPackageId(filters.packageId);
+          setScenarioId(filters.scenarioId);
+          setUserValue(filters.userValue);
+          setUserStatus(filters.userStatus);
+          // 重新获取列表
+          getList();
+        }}
+        scenarioOptions={scenarioOptions}
      />
      <div className={styles.listWrap}>
        {list.length === 0 && !loading ? (
@@ -192,7 +193,9 @@ const TrafficPoolList: React.FC = () => {
                  className={styles.card}
                  style={{ cursor: "pointer" }}
                  onClick={() =>
-                    navigate(`/traffic-pool/detail/${item.sourceId}/${item.id}`)
+                    navigate(
+                      `/mine/traffic-pool/detail/${item.sourceId}/${item.id}`,
+                    )
                  }
                >
                  <div className={styles.cardContent}>
@@ -235,23 +238,6 @@ const TrafficPoolList: React.FC = () => {
          </div>
        )}
      </div>
-      {/* 分页 */}
-      {total > pageSize && (
-        <div className={styles.pagination}>
-          <button disabled={page === 1} onClick={() => setPage(page - 1)}>
-            上一页
-          </button>
-          <span>
-            {page} / {Math.ceil(total / pageSize)}
-          </span>
-          <button
-            disabled={page === Math.ceil(total / pageSize)}
-            onClick={() => setPage(page + 1)}
-          >
-            下一页
-          </button>
-        </div>
-      )}
    </Layout>
  );
 };
--- a/Cunkebao/src/router/module/mine.tsx
+++ b/Cunkebao/src/router/module/mine.tsx
@@ -36,12 +36,12 @@ const routes = [
    auth: true,
  },
  {
-    path: "/traffic-pool",
+    path: "/mine/traffic-pool",
    element: <TrafficPool />,
    auth: true,
  },
  {
-    path: "/traffic-pool/detail/:wxid/:userId",
+    path: "/mine/traffic-pool/detail/:wxid/:userId",
    element: <TrafficPoolDetail />,
    auth: true,
  },
--- a/Cunkebao/src/types/device.ts
+++ b/Cunkebao/src/types/device.ts
@@ -11,6 +11,7 @@ export interface Device {
  nickname?: string;
  battery?: number;
  lastActive?: string;
+  avatar?: string;
  features?: {
    autoAddFriend?: boolean;
    autoReply?: boolean;