Merge branch 'yongpxu-dev' into yongpxu-dev2

nkebao/.env.development

@@ -1,5 +1,4 @@
 # 基础环境变量示例
 VITE_API_BASE_URL=http://www.yishi.com
-# VITE_API_BASE_URL=https://ckbapi.quwanzhi.com
 VITE_APP_TITLE=Nkebao Base
 

nkebao/src/components/DeviceSelection/data.ts

@@ -0,0 +1,26 @@
+// 设备选择项接口
+export interface DeviceSelectionItem {
+  id: string;
+  name: string;
+  imei: string;
+  wechatId: string;
+  status: "online" | "offline";
+  wxid?: string;
+  nickname?: string;
+  usedInPlans?: number;
+}
+
+// 组件属性接口
+export interface DeviceSelectionProps {
+  selectedDevices: string[];
+  onSelect: (devices: string[]) => void;
+  placeholder?: string;
+  className?: string;
+  mode?: "input" | "dialog"; // 新增，默认input
+  open?: boolean; // 仅mode=dialog时生效
+  onOpenChange?: (open: boolean) => void; // 仅mode=dialog时生效
+  selectedListMaxHeight?: number; // 新增，已选列表最大高度，默认500
+  showInput?: boolean; // 新增
+  showSelectedList?: boolean; // 新增
+  readonly?: boolean; // 新增
+}

nkebao/src/components/DeviceSelection/index.module.scss

@@ -19,12 +19,7 @@
   background: #f8f9fa;
 }
 
-.popupContainer {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: #fff;
-}
+
 .popupHeader {
   padding: 16px;
   border-bottom: 1px solid #f0f0f0;

nkebao/src/components/DeviceSelection/index.tsx

@@ -1,39 +1,10 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
-import { Checkbox, Popup, Toast } from "antd-mobile";
+import React, { useState } from "react";
+import { SearchOutlined } from "@ant-design/icons";
 import { Input, Button } from "antd";
-import { getDeviceList } from "./api";
-import style from "./index.module.scss";
 import { DeleteOutlined } from "@ant-design/icons";
-
-// 设备选择项接口
-interface DeviceSelectionItem {
-  id: string;
-  name: string;
-  imei: string;
-  wechatId: string;
-  status: "online" | "offline";
-  wxid?: string;
-  nickname?: string;
-  usedInPlans?: number;
-}
-
-// 组件属性接口
-interface DeviceSelectionProps {
-  selectedDevices: string[];
-  onSelect: (devices: string[]) => void;
-  placeholder?: string;
-  className?: string;
-  mode?: "input" | "dialog"; // 新增，默认input
-  open?: boolean; // 仅mode=dialog时生效
-  onOpenChange?: (open: boolean) => void; // 仅mode=dialog时生效
-  selectedListMaxHeight?: number; // 新增，已选列表最大高度，默认500
-  showInput?: boolean; // 新增
-  showSelectedList?: boolean; // 新增
-  readonly?: boolean; // 新增
-}
-
-const PAGE_SIZE = 20;
+import { DeviceSelectionProps } from "./data";
+import SelectionPopup from "./selectionPopup";
+import style from "./index.module.scss";
 
 const DeviceSelection: React.FC<DeviceSelectionProps> = ({
   selectedDevices,
@@ -57,92 +28,10 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
     if (!isDialog) setPopupVisible(v);
   };
 
-  // 设备数据
-  const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [statusFilter, setStatusFilter] = useState("all");
-  const [loading, setLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [total, setTotal] = useState(0);
-
-  // 获取设备列表，支持keyword和分页
-  const fetchDevices = useCallback(
-    async (keyword: string = "", page: number = 1) => {
-      setLoading(true);
-      try {
-        const res = await getDeviceList({
-          page,
-          limit: PAGE_SIZE,
-          keyword: keyword.trim() || undefined,
-        });
-        if (res && Array.isArray(res.list)) {
-          setDevices(
-            res.list.map((d: any) => ({
-              id: d.id?.toString() || "",
-              name: d.memo || d.imei || "",
-              imei: d.imei || "",
-              wechatId: d.wechatId || "",
-              status: d.alive === 1 ? "online" : "offline",
-              wxid: d.wechatId || "",
-              nickname: d.nickname || "",
-              usedInPlans: d.usedInPlans || 0,
-            }))
-          );
-          setTotal(res.total || 0);
-        }
-      } catch (error) {
-        console.error("获取设备列表失败:", error);
-      } finally {
-        setLoading(false);
-      }
-    },
-    []
-  );
-
-  // 打开弹窗时获取第一页
+  // 打开弹窗
   const openPopup = () => {
     if (readonly) return;
-    setSearchQuery("");
-    setCurrentPage(1);
     setRealVisible(true);
-    fetchDevices("", 1);
-  };
-
-  // 搜索防抖
-  useEffect(() => {
-    if (!realVisible) return;
-    const timer = setTimeout(() => {
-      setCurrentPage(1);
-      fetchDevices(searchQuery, 1);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [searchQuery, realVisible, fetchDevices]);
-
-  // 翻页时重新请求
-  useEffect(() => {
-    if (!realVisible) return;
-    fetchDevices(searchQuery, currentPage);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPage]);
-
-  // 过滤设备（只保留状态过滤）
-  const filteredDevices = devices.filter((device) => {
-    const matchesStatus =
-      statusFilter === "all" ||
-      (statusFilter === "online" && device.status === "online") ||
-      (statusFilter === "offline" && device.status === "offline");
-    return matchesStatus;
-  });
-
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
-
-  // 处理设备选择
-  const handleDeviceToggle = (deviceId: string) => {
-    if (selectedDevices.includes(deviceId)) {
-      onSelect(selectedDevices.filter((id) => id !== deviceId));
-    } else {
-      onSelect([...selectedDevices, deviceId]);
-    }
   };
 
   // 获取显示文本
@@ -151,138 +40,12 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
     return `已选择 ${selectedDevices.length} 个设备`;
   };
 
-  // 获取已选设备详细信息
-  const selectedDeviceObjs = selectedDevices
-    .map((id) => devices.find((d) => d.id === id))
-    .filter(Boolean) as DeviceSelectionItem[];
-
   // 删除已选设备
   const handleRemoveDevice = (id: string) => {
     if (readonly) return;
     onSelect(selectedDevices.filter((d) => d !== id));
   };
 
-  // 弹窗内容
-  const popupContent = (
-    <div className={style.popupContainer}>
-      <div className={style.popupHeader}>
-        <div className={style.popupTitle}>选择设备</div>
-      </div>
-      <div className={style.popupSearchRow}>
-        <div className={style.popupSearchInputWrap}>
-          <SearchOutlined className={style.inputIcon} />
-          <Input
-            placeholder="搜索设备IMEI/备注/微信号"
-            value={searchQuery}
-            onChange={(val) => setSearchQuery(val)}
-            className={style.popupSearchInput}
-          />
-        </div>
-        <select
-          value={statusFilter}
-          onChange={(e) => setStatusFilter(e.target.value)}
-          className={style.statusSelect}
-        >
-          <option value="all">全部状态</option>
-          <option value="online">在线</option>
-          <option value="offline">离线</option>
-        </select>
-        <Button
-          fill="outline"
-          size="mini"
-          onClick={() => fetchDevices(searchQuery, currentPage)}
-          disabled={loading}
-          className={style.refreshBtn}
-        >
-          {loading ? (
-            <div className={style.loadingIcon}>⟳</div>
-          ) : (
-            <ReloadOutlined />
-          )}
-        </Button>
-      </div>
-      <div className={style.deviceList}>
-        {loading ? (
-          <div className={style.loadingBox}>
-            <div className={style.loadingText}>加载中...</div>
-          </div>
-        ) : (
-          <div className={style.deviceListInner}>
-            {filteredDevices.map((device) => (
-              <label key={device.id} className={style.deviceItem}>
-                <Checkbox
-                  checked={selectedDevices.includes(device.id)}
-                  onChange={() => handleDeviceToggle(device.id)}
-                  className={style.deviceCheckbox}
-                />
-                <div className={style.deviceInfo}>
-                  <div className={style.deviceInfoRow}>
-                    <span className={style.deviceName}>{device.name}</span>
-                    <div
-                      className={
-                        device.status === "online"
-                          ? style.statusOnline
-                          : style.statusOffline
-                      }
-                    >
-                      {device.status === "online" ? "在线" : "离线"}
-                    </div>
-                  </div>
-                  <div className={style.deviceInfoDetail}>
-                    <div>IMEI: {device.imei}</div>
-                    <div>微信号: {device.wechatId}</div>
-                  </div>
-                </div>
-              </label>
-            ))}
-          </div>
-        )}
-      </div>
-      {/* 分页栏 */}
-      <div className={style.paginationRow}>
-        <div className={style.totalCount}>总计 {total} 个设备</div>
-        <div className={style.paginationControls}>
-          <Button
-            fill="none"
-            size="mini"
-            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-            disabled={currentPage === 1 || loading}
-            className={style.pageBtn}
-          >
-            &lt;
-          </Button>
-          <span className={style.pageInfo}>
-            {currentPage} / {totalPages}
-          </span>
-          <Button
-            fill="none"
-            size="mini"
-            onClick={() =>
-              setCurrentPage(Math.min(totalPages, currentPage + 1))
-            }
-            disabled={currentPage === totalPages || loading}
-            className={style.pageBtn}
-          >
-            &gt;
-          </Button>
-        </div>
-      </div>
-      <div className={style.popupFooter}>
-        <div className={style.selectedCount}>
-          已选择 {selectedDevices.length} 个设备
-        </div>
-        <div className={style.footerBtnGroup}>
-          <Button fill="outline" onClick={() => setRealVisible(false)}>
-            取消
-          </Button>
-          <Button color="primary" onClick={() => setRealVisible(false)}>
-            确定
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-
   return (
     <>
       {/* mode=input 显示输入框，mode=dialog不显示 */}
@@ -304,75 +67,71 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
         </div>
       )}
       {/* 已选设备列表窗口 */}
-      {mode === "input" &&
-        showSelectedList &&
-        selectedDeviceObjs.length > 0 && (
-          <div
-            className={style.selectedListWindow}
-            style={{
-              maxHeight: selectedListMaxHeight,
-              overflowY: "auto",
-              marginTop: 8,
-              border: "1px solid #e5e6eb",
-              borderRadius: 8,
-              background: "#fff",
-            }}
-          >
-            {selectedDeviceObjs.map((device) => (
+      {mode === "input" && showSelectedList && selectedDevices.length > 0 && (
+        <div
+          className={style.selectedListWindow}
+          style={{
+            maxHeight: selectedListMaxHeight,
+            overflowY: "auto",
+            marginTop: 8,
+            border: "1px solid #e5e6eb",
+            borderRadius: 8,
+            background: "#fff",
+          }}
+        >
+          {selectedDevices.map((deviceId) => (
+            <div
+              key={deviceId}
+              className={style.selectedListRow}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: "4px 8px",
+                borderBottom: "1px solid #f0f0f0",
+                fontSize: 14,
+              }}
+            >
               <div
-                key={device.id}
-                className={style.selectedListRow}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  padding: "4px 8px",
-                  borderBottom: "1px solid #f0f0f0",
-                  fontSize: 14,
+                  flex: 1,
+                  minWidth: 0,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
                 }}
               >
-                <div
-                  style={{
-                    flex: 1,
-                    minWidth: 0,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                  }}
-                >
-                  {device.name}
-                </div>
-                {!readonly && (
-                  <Button
-                    type="text"
-                    icon={<DeleteOutlined />}
-                    size="small"
-                    style={{
-                      marginLeft: 4,
-                      color: "#ff4d4f",
-                      border: "none",
-                      background: "none",
-                      minWidth: 24,
-                      height: 24,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                    }}
-                    onClick={() => handleRemoveDevice(device.id)}
-                  />
-                )}
+                {deviceId}
               </div>
-            ))}
-          </div>
-        )}
+              {!readonly && (
+                <Button
+                  type="text"
+                  icon={<DeleteOutlined />}
+                  size="small"
+                  style={{
+                    marginLeft: 4,
+                    color: "#ff4d4f",
+                    border: "none",
+                    background: "none",
+                    minWidth: 24,
+                    height: 24,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                  onClick={() => handleRemoveDevice(deviceId)}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
       {/* 弹窗 */}
-      <Popup
+      <SelectionPopup
         visible={realVisible && !readonly}
-        onMaskClick={() => setRealVisible(false)}
-        position="bottom"
-        bodyStyle={{ height: "100vh" }}
-      >
-        {popupContent}
-      </Popup>
+        onClose={() => setRealVisible(false)}
+        selectedDevices={selectedDevices}
+        onSelect={onSelect}
+      />
     </>
   );
 };

nkebao/src/components/DeviceSelection/selectionPopup.tsx

@@ -1,7 +1,10 @@
-import React from "react";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
-import { Input, Button, Checkbox, Popup } from "antd-mobile";
+import React, { useState, useEffect, useCallback } from "react";
+import { Checkbox, Popup } from "antd-mobile";
+import { getDeviceList } from "./api";
 import style from "./index.module.scss";
+import Layout from "@/components/Layout/Layout";
+import PopupHeader from "@/components/PopuLayout/header";
+import PopupFooter from "@/components/PopuLayout/footer";
 
 interface DeviceSelectionItem {
   id: string;
@@ -19,42 +22,95 @@ interface SelectionPopupProps {
   onClose: () => void;
   selectedDevices: string[];
   onSelect: (devices: string[]) => void;
-  devices: DeviceSelectionItem[];
-  loading: boolean;
-  searchQuery: string;
-  setSearchQuery: (v: string) => void;
-  statusFilter: string;
-  setStatusFilter: (v: string) => void;
-  onRefresh: () => void;
-  filteredDevices: DeviceSelectionItem[];
-  total: number;
-  currentPage: number;
-  totalPages: number;
-  setCurrentPage: (v: number) => void;
-  onCancel: () => void;
-  onConfirm: () => void;
 }
 
+const PAGE_SIZE = 20;
+
 const SelectionPopup: React.FC<SelectionPopupProps> = ({
   visible,
   onClose,
   selectedDevices,
   onSelect,
-  devices,
-  loading,
-  searchQuery,
-  setSearchQuery,
-  statusFilter,
-  setStatusFilter,
-  onRefresh,
-  filteredDevices,
-  total,
-  currentPage,
-  totalPages,
-  setCurrentPage,
-  onCancel,
-  onConfirm,
 }) => {
+  // 设备数据
+  const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  // 获取设备列表，支持keyword和分页
+  const fetchDevices = useCallback(
+    async (keyword: string = "", page: number = 1) => {
+      setLoading(true);
+      try {
+        const res = await getDeviceList({
+          page,
+          limit: PAGE_SIZE,
+          keyword: keyword.trim() || undefined,
+        });
+        if (res && Array.isArray(res.list)) {
+          setDevices(
+            res.list.map((d: any) => ({
+              id: d.id?.toString() || "",
+              name: d.memo || d.imei || "",
+              imei: d.imei || "",
+              wechatId: d.wechatId || "",
+              status: d.alive === 1 ? "online" : "offline",
+              wxid: d.wechatId || "",
+              nickname: d.nickname || "",
+              usedInPlans: d.usedInPlans || 0,
+            }))
+          );
+          setTotal(res.total || 0);
+        }
+      } catch (error) {
+        console.error("获取设备列表失败:", error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  // 打开弹窗时获取第一页
+  useEffect(() => {
+    if (visible) {
+      setSearchQuery("");
+      setCurrentPage(1);
+      fetchDevices("", 1);
+    }
+  }, [visible, fetchDevices]);
+
+  // 搜索防抖
+  useEffect(() => {
+    if (!visible) return;
+    const timer = setTimeout(() => {
+      setCurrentPage(1);
+      fetchDevices(searchQuery, 1);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery, visible, fetchDevices]);
+
+  // 翻页时重新请求
+  useEffect(() => {
+    if (!visible) return;
+    fetchDevices(searchQuery, currentPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage]);
+
+  // 过滤设备（只保留状态过滤）
+  const filteredDevices = devices.filter((device) => {
+    const matchesStatus =
+      statusFilter === "all" ||
+      (statusFilter === "online" && device.status === "online") ||
+      (statusFilter === "offline" && device.status === "offline");
+    return matchesStatus;
+  });
+
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
   // 处理设备选择
   const handleDeviceToggle = (deviceId: string) => {
     if (selectedDevices.includes(deviceId)) {
@@ -67,49 +123,45 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
   return (
     <Popup
       visible={visible}
-      // 禁止点击遮罩关闭
-      onMaskClick={() => {}}
+      onMaskClick={onClose}
       position="bottom"
       bodyStyle={{ height: "100vh" }}
       closeOnMaskClick={false}
     >
-      <div className={style.popupContainer}>
-        <div className={style.popupHeader}>
-          <div className={style.popupTitle}>选择设备</div>
-        </div>
-        <div className={style.popupSearchRow}>
-          <div className={style.popupSearchInputWrap}>
-            <SearchOutlined className={style.inputIcon} />
-            <Input
-              placeholder="搜索设备IMEI/备注/微信号"
-              value={searchQuery}
-              onChange={setSearchQuery}
-              className={style.popupSearchInput}
-            />
-          </div>
-          <select
-            value={statusFilter}
-            onChange={(e) => setStatusFilter(e.target.value)}
-            className={style.statusSelect}
-          >
-            <option value="all">全部状态</option>
-            <option value="online">在线</option>
-            <option value="offline">离线</option>
-          </select>
-          <Button
-            fill="outline"
-            size="mini"
-            onClick={onRefresh}
-            disabled={loading}
-            className={style.refreshBtn}
-          >
-            {loading ? (
-              <div className={style.loadingIcon}>⟳</div>
-            ) : (
-              <ReloadOutlined />
-            )}
-          </Button>
-        </div>
+      <Layout
+        header={
+          <PopupHeader
+            title="选择设备"
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            searchPlaceholder="搜索设备IMEI/备注/微信号"
+            loading={loading}
+            onRefresh={() => fetchDevices(searchQuery, currentPage)}
+            showTabs={true}
+            tabsConfig={{
+              activeKey: statusFilter,
+              onChange: setStatusFilter,
+              tabs: [
+                { title: "全部", key: "all" },
+                { title: "在线", key: "online" },
+                { title: "离线", key: "offline" },
+              ],
+            }}
+          />
+        }
+        footer={
+          <PopupFooter
+            total={total}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            loading={loading}
+            selectedCount={selectedDevices.length}
+            onPageChange={setCurrentPage}
+            onCancel={onClose}
+            onConfirm={onClose}
+          />
+        }
+      >
         <div className={style.deviceList}>
           {loading ? (
             <div className={style.loadingBox}>
@@ -147,49 +199,7 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
             </div>
           )}
         </div>
-        {/* 分页栏 */}
-        <div className={style.paginationRow}>
-          <div className={style.totalCount}>总计 {total} 个设备</div>
-          <div className={style.paginationControls}>
-            <Button
-              fill="none"
-              size="mini"
-              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-              disabled={currentPage === 1 || loading}
-              className={style.pageBtn}
-            >
-              &lt;
-            </Button>
-            <span className={style.pageInfo}>
-              {currentPage} / {totalPages}
-            </span>
-            <Button
-              fill="none"
-              size="mini"
-              onClick={() =>
-                setCurrentPage(Math.min(totalPages, currentPage + 1))
-              }
-              disabled={currentPage === totalPages || loading}
-              className={style.pageBtn}
-            >
-              &gt;
-            </Button>
-          </div>
-        </div>
-        <div className={style.popupFooter}>
-          <div className={style.selectedCount}>
-            已选择 {selectedDevices.length} 个设备
-          </div>
-          <div className={style.footerBtnGroup}>
-            <Button fill="outline" onClick={onCancel}>
-              取消
-            </Button>
-            <Button color="primary" onClick={onConfirm}>
-              确定
-            </Button>
-          </div>
-        </div>
-      </div>
+      </Layout>
     </Popup>
   );
 };

nkebao/src/components/FriendSelection/index.tsx

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
-import { Popup, Toast } from "antd-mobile";
+import { Popup } from "antd-mobile";
 import { Button, Input } from "antd";
 import { getFriendList } from "./api";
 import style from "./index.module.scss";
+import Layout from "@/components/Layout/Layout";
+import PopupHeader from "@/components/PopuLayout/header";
+import PopupFooter from "@/components/PopuLayout/footer";
 
 // 微信好友接口类型
 interface WechatFriend {
@@ -104,35 +107,18 @@ export default function FriendSelection({
         params.keyword = keyword.trim();
       }
 
-      if (enableDeviceFilter) {
-        if (deviceIds.length === 0) {
-          setFriends([]);
-          setTotalFriends(0);
-          setTotalPages(1);
-          setLoading(false);
-          return;
-        }
-        params.deviceIds = deviceIds.join(",");
+      if (enableDeviceFilter && deviceIds.length > 0) {
+        params.deviceIds = deviceIds;
       }
 
-      const res = await getFriendList(params);
-
-      if (res && Array.isArray(res.list)) {
-        setFriends(
-          res.list.map((friend: any) => ({
-            id: friend.id?.toString() || "",
-            nickname: friend.nickname || "",
-            wechatId: friend.wechatId || "",
-            avatar: friend.avatar || "",
-            customer: friend.customer || "",
-          }))
-        );
-        setTotalFriends(res.total || 0);
-        setTotalPages(Math.ceil((res.total || 0) / 20));
+      const response = await getFriendList(params);
+      if (response && response.list) {
+        setFriends(response.list);
+        setTotalFriends(response.total || 0);
+        setTotalPages(Math.ceil((response.total || 0) / 20));
       }
     } catch (error) {
       console.error("获取好友列表失败:", error);
-      Toast.show({ content: "获取好友列表失败", position: "top" });
     } finally {
       setLoading(false);
     }
@@ -140,16 +126,20 @@ export default function FriendSelection({
 
   // 处理好友选择
   const handleFriendToggle = (friendId: string) => {
-    let newIds: string[];
-    if (selectedFriends.includes(friendId)) {
-      newIds = selectedFriends.filter((id) => id !== friendId);
-    } else {
-      newIds = [...selectedFriends, friendId];
-    }
-    onSelect(newIds);
+    if (readonly) return;
+
+    const newSelectedFriends = selectedFriends.includes(friendId)
+      ? selectedFriends.filter((id) => id !== friendId)
+      : [...selectedFriends, friendId];
+
+    onSelect(newSelectedFriends);
+
+    // 如果有 onSelectDetail 回调，传递完整的好友对象
     if (onSelectDetail) {
-      const selectedObjs = friends.filter((f) => newIds.includes(f.id));
-      onSelectDetail(selectedObjs);
+      const selectedFriendObjs = friends.filter((friend) =>
+        newSelectedFriends.includes(friend.id)
+      );
+      onSelectDetail(selectedFriendObjs);
     }
   };
 
@@ -160,29 +150,22 @@ export default function FriendSelection({
   };
 
   // 获取已选好友详细信息
-  const selectedFriendObjs = selectedFriends
-    .map((id) => friends.find((f) => f.id === id))
-    .filter(Boolean) as WechatFriend[];
+  const selectedFriendObjs = friends.filter((friend) =>
+    selectedFriends.includes(friend.id)
+  );
 
   // 删除已选好友
   const handleRemoveFriend = (id: string) => {
     if (readonly) return;
-    onSelect(selectedFriends.filter((f) => f !== id));
+    onSelect(selectedFriends.filter((d) => d !== id));
   };
 
-  // 确认按钮逻辑
+  // 确认选择
   const handleConfirm = () => {
-    setRealVisible(false);
     if (onConfirm) {
       onConfirm(selectedFriends, selectedFriendObjs);
     }
-  };
-
-  // 清空搜索
-  const handleClearSearch = () => {
-    setSearchQuery("");
-    setCurrentPage(1);
-    fetchFriends(1, "");
+    setRealVisible(false);
   };
 
   return (
@@ -271,40 +254,30 @@ export default function FriendSelection({
         position="bottom"
         bodyStyle={{ height: "100vh" }}
       >
-        <div className={style.popupContainer}>
-          <div className={style.popupHeader}>
-            <div className={style.popupTitle}>选择微信好友</div>
-            <div className={style.searchWrapper}>
-              <Input
-                placeholder="搜索好友"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                disabled={readonly}
-                prefix={<SearchOutlined />}
-                allowClear
-                size="large"
-              />
-              {searchQuery && !readonly && (
-                <Button
-                  type="text"
-                  icon={<DeleteOutlined />}
-                  size="small"
-                  className={style.clearBtn}
-                  onClick={handleClearSearch}
-                  style={{
-                    color: "#ff4d4f",
-                    border: "none",
-                    background: "none",
-                    minWidth: 24,
-                    height: 24,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                />
-              )}
-            </div>
-          </div>
+        <Layout
+          header={
+            <PopupHeader
+              title="选择微信好友"
+              searchQuery={searchQuery}
+              setSearchQuery={setSearchQuery}
+              searchPlaceholder="搜索好友"
+              loading={loading}
+              onRefresh={() => fetchFriends(currentPage, searchQuery)}
+            />
+          }
+          footer={
+            <PopupFooter
+              total={totalFriends}
+              currentPage={currentPage}
+              totalPages={totalPages}
+              loading={loading}
+              selectedCount={selectedFriends.length}
+              onPageChange={setCurrentPage}
+              onCancel={() => setRealVisible(false)}
+              onConfirm={handleConfirm}
+            />
+          }
+        >
           <div className={style.friendList}>
             {loading ? (
               <div className={style.loadingBox}>
@@ -372,50 +345,7 @@ export default function FriendSelection({
               </div>
             )}
           </div>
-          {/* 分页栏 */}
-          <div className={style.paginationRow}>
-            <div className={style.totalCount}>总计 {totalFriends} 个好友</div>
-            <div className={style.paginationControls}>
-              <Button
-                type="text"
-                size="small"
-                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                disabled={currentPage === 1 || loading}
-                className={style.pageBtn}
-                style={{ borderRadius: 16 }}
-              >
-                &lt;
-              </Button>
-              <span className={style.pageInfo}>
-                {currentPage} / {totalPages}
-              </span>
-              <Button
-                type="text"
-                size="small"
-                onClick={() =>
-                  setCurrentPage(Math.min(totalPages, currentPage + 1))
-                }
-                disabled={currentPage === totalPages || loading}
-                className={style.pageBtn}
-                style={{ borderRadius: 16 }}
-              >
-                &gt;
-              </Button>
-            </div>
-          </div>
-          {/* 底部按钮栏 */}
-          <div className={style.popupFooter}>
-            <div className={style.selectedCount}>
-              已选择 {selectedFriends.length} 个好友
-            </div>
-            <div className={style.footerBtnGroup}>
-              <Button onClick={() => setRealVisible(false)}>取消</Button>
-              <Button type="primary" onClick={handleConfirm}>
-                确定
-              </Button>
-            </div>
-          </div>
-        </div>
+        </Layout>
       </Popup>
     </>
   );

nkebao/src/components/GroupSelection/index.tsx

@@ -1,15 +1,12 @@
 import React, { useState, useEffect } from "react";
-import {
-  SearchOutlined,
-  CloseOutlined,
-  LeftOutlined,
-  RightOutlined,
-  DeleteOutlined,
-} from "@ant-design/icons";
-import { Button as AntdButton, Input as AntdInput } from "antd";
-import { Popup, Toast } from "antd-mobile";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Button, Input } from "antd";
+import { Popup } from "antd-mobile";
 import { getGroupList } from "./api";
 import style from "./index.module.scss";
+import Layout from "@/components/Layout/Layout";
+import PopupHeader from "@/components/PopuLayout/header";
+import PopupFooter from "@/components/PopuLayout/footer";
 
 // 群组接口类型
 interface WechatGroup {
@@ -61,9 +58,9 @@ export default function GroupSelection({
   const [loading, setLoading] = useState(false);
 
   // 获取已选群聊详细信息
-  const selectedGroupObjs = selectedGroups
-    .map((id) => groups.find((g) => g.id === id))
-    .filter(Boolean) as WechatGroup[];
+  const selectedGroupObjs = groups.filter((group) =>
+    selectedGroups.includes(group.id)
+  );
 
   // 删除已选群聊
   const handleRemoveGroup = (id: string) => {
@@ -101,58 +98,52 @@ export default function GroupSelection({
       setCurrentPage(1);
       fetchGroups(1, searchQuery);
     }, 500);
+
     return () => clearTimeout(timer);
   }, [searchQuery, realVisible]);
 
-  // 获取群组列表API - 支持keyword
+  // 获取群聊列表API
   const fetchGroups = async (page: number, keyword: string = "") => {
     setLoading(true);
     try {
-      const params: any = {
+      let params: any = {
         page,
         limit: 20,
       };
+
       if (keyword.trim()) {
         params.keyword = keyword.trim();
       }
 
-      const res = await getGroupList(params);
-
-      if (res && Array.isArray(res.list)) {
-        setGroups(
-          res.list.map((group: any) => ({
-            id: group.id?.toString() || "",
-            chatroomId: group.chatroomId || "",
-            name: group.name || "",
-            avatar: group.avatar || "",
-            ownerWechatId: group.ownerWechatId || "",
-            ownerNickname: group.ownerNickname || "",
-            ownerAvatar: group.ownerAvatar || "",
-          }))
-        );
-        setTotalGroups(res.total || 0);
-        setTotalPages(Math.ceil((res.total || 0) / 20));
+      const response = await getGroupList(params);
+      if (response && response.list) {
+        setGroups(response.list);
+        setTotalGroups(response.total || 0);
+        setTotalPages(Math.ceil((response.total || 0) / 20));
       }
     } catch (error) {
-      console.error("获取群组列表失败:", error);
-      Toast.show({ content: "获取群组列表失败", position: "top" });
+      console.error("获取群聊列表失败:", error);
     } finally {
       setLoading(false);
     }
   };
 
-  // 处理群组选择
+  // 处理群聊选择
   const handleGroupToggle = (groupId: string) => {
-    let newIds: string[];
-    if (selectedGroups.includes(groupId)) {
-      newIds = selectedGroups.filter((id) => id !== groupId);
-    } else {
-      newIds = [...selectedGroups, groupId];
-    }
-    onSelect(newIds);
+    if (readonly) return;
+
+    const newSelectedGroups = selectedGroups.includes(groupId)
+      ? selectedGroups.filter((id) => id !== groupId)
+      : [...selectedGroups, groupId];
+
+    onSelect(newSelectedGroups);
+
+    // 如果有 onSelectDetail 回调，传递完整的群聊对象
     if (onSelectDetail) {
-      const selectedObjs = groups.filter((g) => newIds.includes(g.id));
-      onSelectDetail(selectedObjs);
+      const selectedGroupObjs = groups.filter((group) =>
+        newSelectedGroups.includes(group.id)
+      );
+      onSelectDetail(selectedGroupObjs);
     }
   };
 
@@ -162,19 +153,12 @@ export default function GroupSelection({
     return `已选择 ${selectedGroups.length} 个群聊`;
   };
 
-  // 确认按钮逻辑
+  // 确认选择
   const handleConfirm = () => {
-    setRealVisible(false);
     if (onConfirm) {
       onConfirm(selectedGroups, selectedGroupObjs);
     }
-  };
-
-  // 清空搜索
-  const handleClearSearch = () => {
-    setSearchQuery("");
-    setCurrentPage(1);
-    fetchGroups(1, "");
+    setRealVisible(false);
   };
 
   return (
@@ -182,7 +166,7 @@ export default function GroupSelection({
       {/* 输入框 */}
       {showInput && (
         <div className={`${style.inputWrapper} ${className}`}>
-          <AntdInput
+          <Input
             placeholder={placeholder}
             value={getDisplayText()}
             onClick={openPopup}
@@ -234,7 +218,7 @@ export default function GroupSelection({
                 {group.name || group.chatroomId || group.id}
               </div>
               {!readonly && (
-                <AntdButton
+                <Button
                   type="text"
                   icon={<DeleteOutlined />}
                   size="small"
@@ -263,41 +247,30 @@ export default function GroupSelection({
         position="bottom"
         bodyStyle={{ height: "100vh" }}
       >
-        <div className={style.popupContainer}>
-          <div className={style.popupHeader}>
-            <div className={style.popupTitle}>选择群聊</div>
-            <div className={style.searchWrapper}>
-              <AntdInput
-                placeholder="搜索群聊"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                disabled={readonly}
-                prefix={<SearchOutlined />}
-                allowClear
-                size="large"
-              />
-              <SearchOutlined className={style.searchIcon} />
-              {searchQuery && !readonly && (
-                <AntdButton
-                  type="text"
-                  icon={<CloseOutlined />}
-                  size="small"
-                  className={style.clearBtn}
-                  onClick={handleClearSearch}
-                  style={{
-                    color: "#ff4d4f",
-                    border: "none",
-                    background: "none",
-                    minWidth: 24,
-                    height: 24,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                />
-              )}
-            </div>
-          </div>
+        <Layout
+          header={
+            <PopupHeader
+              title="选择群聊"
+              searchQuery={searchQuery}
+              setSearchQuery={setSearchQuery}
+              searchPlaceholder="搜索群聊"
+              loading={loading}
+              onRefresh={() => fetchGroups(currentPage, searchQuery)}
+            />
+          }
+          footer={
+            <PopupFooter
+              total={totalGroups}
+              currentPage={currentPage}
+              totalPages={totalPages}
+              loading={loading}
+              selectedCount={selectedGroups.length}
+              onPageChange={setCurrentPage}
+              onCancel={() => setRealVisible(false)}
+              onConfirm={handleConfirm}
+            />
+          }
+        >
           <div className={style.groupList}>
             {loading ? (
               <div className={style.loadingBox}>
@@ -361,52 +334,7 @@ export default function GroupSelection({
               </div>
             )}
           </div>
-          {/* 分页栏 */}
-          <div className={style.paginationRow}>
-            <div className={style.totalCount}>总计 {totalGroups} 个群聊</div>
-            <div className={style.paginationControls}>
-              <AntdButton
-                type="text"
-                size="small"
-                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                disabled={currentPage === 1 || loading}
-                className={style.pageBtn}
-                style={{ borderRadius: 16 }}
-              >
-                <LeftOutlined />
-              </AntdButton>
-              <span className={style.pageInfo}>
-                {currentPage} / {totalPages}
-              </span>
-              <AntdButton
-                type="text"
-                size="small"
-                onClick={() =>
-                  setCurrentPage(Math.min(totalPages, currentPage + 1))
-                }
-                disabled={currentPage === totalPages || loading}
-                className={style.pageBtn}
-                style={{ borderRadius: 16 }}
-              >
-                <RightOutlined />
-              </AntdButton>
-            </div>
-          </div>
-          {/* 底部按钮栏 */}
-          <div className={style.popupFooter}>
-            <div className={style.selectedCount}>
-              已选择 {selectedGroups.length} 个群聊
-            </div>
-            <div className={style.footerBtnGroup}>
-              <AntdButton type="default" onClick={() => setRealVisible(false)}>
-                取消
-              </AntdButton>
-              <AntdButton type="primary" onClick={handleConfirm}>
-                确定
-              </AntdButton>
-            </div>
-          </div>
-        </div>
+        </Layout>
       </Popup>
     </>
   );

nkebao/src/components/NavCommon/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { NavBar } from "antd-mobile";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+
+interface NavCommonProps {
+  title: string;
+  backFn?: () => void;
+  right?: React.ReactNode;
+}
+
+const NavCommon: React.FC<NavCommonProps> = ({ title, backFn, right }) => {
+  const navigate = useNavigate();
+  return (
+    <NavBar
+      back={null}
+      style={{ background: "#fff" }}
+      left={
+        <div className="nav-title">
+          <ArrowLeftOutlined
+            twoToneColor="#1677ff"
+            onClick={() => {
+              if (backFn) {
+                backFn();
+              } else {
+                navigate(-1);
+              }
+            }}
+          />
+        </div>
+      }
+      right={right}
+    >
+      <span style={{ color: "var(--primary-color)", fontWeight: 600 }}>
+        {title}
+      </span>
+    </NavBar>
+  );
+};
+
+export default NavCommon;

nkebao/src/components/PopuLayout/footer.module.scss

@@ -0,0 +1,71 @@
+.popupFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.selectedCount {
+  font-size: 14px;
+  color: #888;
+}
+
+.footerBtnGroup {
+  display: flex;
+  gap: 12px;
+}
+
+.paginationRow {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.totalCount {
+  font-size: 14px;
+  color: #888;
+}
+
+.paginationControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pageBtn {
+  padding: 0 8px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 16px;
+  border: 1px solid #d9d9d9;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover:not(:disabled) {
+    border-color: #1677ff;
+    color: #1677ff;
+  }
+
+  &:disabled {
+    background: #f5f5f5;
+    color: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+.pageInfo {
+  font-size: 14px;
+  color: #222;
+  margin: 0 8px;
+  min-width: 60px;
+  text-align: center;
+} 

nkebao/src/components/PopuLayout/footer.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Button } from "antd";
+import style from "./footer.module.scss";
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
+
+interface PopupFooterProps {
+  total: number;
+  currentPage: number;
+  totalPages: number;
+  loading: boolean;
+  selectedCount: number;
+  onPageChange: (page: number) => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+const PopupFooter: React.FC<PopupFooterProps> = ({
+  total,
+  currentPage,
+  totalPages,
+  loading,
+  selectedCount,
+  onPageChange,
+  onCancel,
+  onConfirm,
+}) => {
+  return (
+    <>
+      {/* 分页栏 */}
+      <div className={style.paginationRow}>
+        <div className={style.totalCount}>总计 {total} 个设备</div>
+        <div className={style.paginationControls}>
+          <Button
+            onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+            disabled={currentPage === 1 || loading}
+            className={style.pageBtn}
+          >
+            <ArrowLeftOutlined />
+          </Button>
+          <span className={style.pageInfo}>
+            {currentPage} / {totalPages}
+          </span>
+          <Button
+            onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+            disabled={currentPage === totalPages || loading}
+            className={style.pageBtn}
+          >
+            <ArrowRightOutlined />
+          </Button>
+        </div>
+      </div>
+      <div className={style.popupFooter}>
+        <div className={style.selectedCount}>已选择 {selectedCount} 个设备</div>
+        <div className={style.footerBtnGroup}>
+          <Button color="primary" variant="filled" onClick={onCancel}>
+            取消
+          </Button>
+          <Button type="primary" onClick={onConfirm}>
+            确定
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PopupFooter;

nkebao/src/components/PopuLayout/header.module.scss

@@ -0,0 +1,52 @@
+.popupHeader {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.popupTitle {
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.popupSearchRow {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 16px;
+}
+
+.popupSearchInputWrap {
+  position: relative;
+  flex: 1;
+}
+
+.inputIcon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #bdbdbd;
+  z-index: 10;
+  font-size: 18px;
+}
+
+
+.refreshBtn {
+  width: 36px;
+  height: 36px;
+}
+
+.loadingIcon {
+  animation: spin 1s linear infinite;
+  font-size: 16px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+} 

nkebao/src/components/PopuLayout/header.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button } from "antd";
+import { Tabs } from "antd-mobile";
+import style from "./header.module.scss";
+
+interface PopupHeaderProps {
+  title: string;
+  searchQuery: string;
+  setSearchQuery: (value: string) => void;
+  searchPlaceholder?: string;
+  loading?: boolean;
+  onRefresh?: () => void;
+  showRefresh?: boolean;
+  showSearch?: boolean;
+  showTabs?: boolean;
+  tabsConfig?: {
+    activeKey: string;
+    onChange: (key: string) => void;
+    tabs: Array<{ title: string; key: string }>;
+  };
+}
+
+const PopupHeader: React.FC<PopupHeaderProps> = ({
+  title,
+  searchQuery,
+  setSearchQuery,
+  searchPlaceholder = "搜索...",
+  loading = false,
+  onRefresh,
+  showRefresh = true,
+  showSearch = true,
+  showTabs = false,
+  tabsConfig,
+}) => {
+  return (
+    <>
+      <div className={style.popupHeader}>
+        <div className={style.popupTitle}>{title}</div>
+      </div>
+
+      {showSearch && (
+        <div className={style.popupSearchRow}>
+          <div className={style.popupSearchInputWrap}>
+            <Input
+              placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              prefix={<SearchOutlined />}
+              size="large"
+            />
+          </div>
+
+          {showRefresh && onRefresh && (
+            <Button
+              type="text"
+              onClick={onRefresh}
+              disabled={loading}
+              className={style.refreshBtn}
+            >
+              {loading ? (
+                <div className={style.loadingIcon}>⟳</div>
+              ) : (
+                <ReloadOutlined />
+              )}
+            </Button>
+          )}
+        </div>
+      )}
+
+      {showTabs && tabsConfig && (
+        <Tabs
+          activeKey={tabsConfig.activeKey}
+          onChange={tabsConfig.onChange}
+          style={{ marginTop: 8 }}
+        >
+          {tabsConfig.tabs.map((tab) => (
+            <Tabs.Tab key={tab.key} title={tab.title} />
+          ))}
+        </Tabs>
+      )}
+    </>
+  );
+};
+
+export default PopupHeader;

nkebao/src/components/StepIndicator/index.tsx

@@ -11,7 +11,7 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({
   steps,
 }) => {
   return (
-    <div style={{ marginBottom: 24, overflowX: "auto" }}>
+    <div style={{ overflowX: "auto", padding: "30px 0px", background: "#fff" }}>
       <Steps current={currentStep - 1}>
         {steps.map((step, idx) => (
           <Steps.Step

nkebao/src/pages/component-test/index.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { NavBar, Tabs } from "antd-mobile";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import Layout from "@/components/Layout/Layout";
+import NavCommon from "@/components/NavCommon";
+import DeviceSelection from "@/components/DeviceSelection";
+import FriendSelection from "@/components/FriendSelection";
+import GroupSelection from "@/components/GroupSelection";
+
+const ComponentTest: React.FC = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState("devices");
+
+  // 设备选择状态
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([]);
+
+  // 好友选择状态
+  const [selectedFriends, setSelectedFriends] = useState<string[]>([]);
+
+  // 群组选择状态
+  const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
+
+  return (
+    <Layout header={<NavCommon title="组件调试" />}>
+      <div style={{ padding: 16 }}>
+        <Tabs activeKey={activeTab} onChange={setActiveTab}>
+          <Tabs.Tab title="设备选择" key="devices">
+            <div style={{ padding: "16px 0" }}>
+              <h3 style={{ marginBottom: 16 }}>DeviceSelection 组件测试</h3>
+              <DeviceSelection
+                selectedDevices={selectedDevices}
+                onSelect={setSelectedDevices}
+                placeholder="请选择设备"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+              />
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 12,
+                  background: "#f5f5f5",
+                  borderRadius: 8,
+                }}
+              >
+                <strong>已选设备:</strong> {selectedDevices.length} 个
+                <br />
+                <strong>设备ID:</strong> {selectedDevices.join(", ") || "无"}
+              </div>
+            </div>
+          </Tabs.Tab>
+
+          <Tabs.Tab title="好友选择" key="friends">
+            <div style={{ padding: "16px 0" }}>
+              <h3 style={{ marginBottom: 16 }}>FriendSelection 组件测试</h3>
+              <FriendSelection
+                selectedFriends={selectedFriends}
+                onSelect={setSelectedFriends}
+                placeholder="请选择微信好友"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+              />
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 12,
+                  background: "#f5f5f5",
+                  borderRadius: 8,
+                }}
+              >
+                <strong>已选好友:</strong> {selectedFriends.length} 个
+                <br />
+                <strong>好友ID:</strong> {selectedFriends.join(", ") || "无"}
+              </div>
+            </div>
+          </Tabs.Tab>
+
+          <Tabs.Tab title="群组选择" key="groups">
+            <div style={{ padding: "16px 0" }}>
+              <h3 style={{ marginBottom: 16 }}>GroupSelection 组件测试</h3>
+              <GroupSelection
+                selectedGroups={selectedGroups}
+                onSelect={setSelectedGroups}
+                placeholder="请选择微信群组"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+              />
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 12,
+                  background: "#f5f5f5",
+                  borderRadius: 8,
+                }}
+              >
+                <strong>已选群组:</strong> {selectedGroups.length} 个
+                <br />
+                <strong>群组ID:</strong> {selectedGroups.join(", ") || "无"}
+              </div>
+            </div>
+          </Tabs.Tab>
+        </Tabs>
+      </div>
+    </Layout>
+  );
+};
+
+export default ComponentTest;

nkebao/src/pages/scenarios/plan/new/index.tsx

@@ -1,8 +1,7 @@
 import { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { message } from "antd";
-import { NavBar } from "antd-mobile";
-import { ArrowLeftOutlined } from "@ant-design/icons";
+import NavCommon from "@/components/NavCommon";
 import BasicSettings from "./steps/BasicSettings";
 import FriendRequestSettings from "./steps/FriendRequestSettings";
 import MessageSettings from "./steps/MessageSettings";
@@ -205,25 +204,8 @@ export default function NewPlan() {
     <Layout
       header={
         <>
-          <NavBar
-            back={null}
-            style={{ background: "#fff" }}
-            left={
-              <div className="nav-title">
-                <ArrowLeftOutlined
-                  twoToneColor="#1677ff"
-                  onClick={() => router(-1)}
-                />
-              </div>
-            }
-          >
-            <span className="nav-title">
-              {isEdit ? "编辑朋友圈同步" : "新建朋友圈同步"}
-            </span>
-          </NavBar>
-          <div className="px-4 py-6">
-            <StepIndicator currentStep={currentStep} steps={steps} />
-          </div>
+          <NavCommon title={isEdit ? "编辑朋友圈同步" : "新建朋友圈同步"} />
+          <StepIndicator currentStep={currentStep} steps={steps} />
         </>
       }
     >

nkebao/src/pages/scenarios/plan/new/steps/BasicSettings.tsx

@@ -1,17 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
-import {
-  Form,
-  Input,
-  Button,
-  Tag,
-  Switch,
-  // Upload,
-  Modal,
-  Alert,
-  Row,
-  Col,
-  message,
-} from "antd";
+import { Form, Input, Button, Tag, Switch, Modal } from "antd";
+import { Button as ButtonMobile } from "antd-mobile";
 import {
   PlusOutlined,
   EyeOutlined,
@@ -21,6 +10,8 @@ import {
   CheckOutlined,
 } from "@ant-design/icons";
 import { uploadFile } from "@/api/common";
+import Layout from "@/components/Layout/Layout";
+import styles from "./base.module.scss";
 
 interface BasicSettingsProps {
   isEdit: boolean;
@@ -424,31 +415,31 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
     formData.scenario !== 1 ? { display: "none" } : { display: "block" };
 
   return (
-    <div>
+    <div className={styles["basic-container"]}>
       {/* 场景选择区块 */}
-      {sceneLoading ? (
-        <div style={{ padding: 16, textAlign: "center" }}>加载中...</div>
-      ) : (
-        <Row gutter={20} className="grid grid-cols-3 gap-4">
-          {sceneList.map((scene) => (
-            <Col span={8} key={scene.id}>
-              <Button
-                type="primary"
+      <div className={styles["basic-scene-select"]}>
+        <div className={styles["basic-scene-grid"]}>
+          {sceneList.map((scene) => {
+            const selected = formData.scenario === scene.id;
+            return (
+              <button
+                key={scene.id}
                 onClick={() => handleScenarioSelect(scene.id)}
-                className={`w-full ${formData.scenario === scene.id ? "bg-blue-500" : "bg-gray-200"}`}
+                className={
+                  styles["basic-scene-btn"] +
+                  (selected ? " " + styles.selected : "")
+                }
               >
                 {scene.name.replace("获客", "")}
-              </Button>
-            </Col>
-          ))}
-        </Row>
-      )}
-
+              </button>
+            );
+          })}
+        </div>
+      </div>
       {/* 计划名称输入区 */}
-      <div className="mb-4">计划名称</div>
-      <div className="border p-2 mb-4">
+      <div className={styles["basic-label"]}>计划名称</div>
+      <div className={styles["basic-input-block"]}>
         <Input
-          className="w-full"
           value={formData.name}
           onChange={(e) =>
             onChange({ ...formData, name: String(e.target.value) })
@@ -456,17 +447,16 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           placeholder="请输入计划名称"
         />
       </div>
-
-      <div className="mb-4">获客标签（可多选）</div>
+      <div className={styles["basic-label"]}>获客标签（可多选）</div>
       {/* 标签选择区块 */}
       {formData.scenario && (
-        <div className="flex pb-4" style={{ flexWrap: "wrap", gap: 8 }}>
+        <div className={styles["basic-tag-list"]}>
           {(currentScene?.scenarioTags || []).map((tag: string) => (
             <Tag
               key={tag}
               color={selectedScenarioTags.includes(tag) ? "blue" : "default"}
               onClick={() => handleScenarioTagToggle(tag)}
-              style={{ marginBottom: 4 }}
+              className={styles["basic-tag-item"]}
             >
               {tag}
             </Tag>
@@ -477,9 +467,9 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
               key={tag.id}
               color={selectedScenarioTags.includes(tag.id) ? "blue" : "default"}
               onClick={() => handleScenarioTagToggle(tag.id)}
-              style={{ marginBottom: 4 }}
               closable
               onClose={() => handleRemoveCustomTag(tag.id)}
+              className={styles["basic-tag-item"]}
             >
               {tag.name}
             </Tag>
@@ -487,49 +477,33 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
         </div>
       )}
       {/* 自定义标签输入区 */}
-      <div className="flex p" style={{ gap: 8 }}>
-        <div className="border  p-2 flex-1">
-          <Input
-            type="text"
-            value={customTagInput}
-            onChange={(e) => setCustomTagInput(e.target.value)}
-            placeholder="添加自定义标签"
-            className="w-full"
-          />
-        </div>
-        <div className="pt-1">
-          <Button type="primary" onClick={handleAddCustomTag}>
-            添加
-          </Button>
-        </div>
+      <div className={styles["basic-custom-tag-input"]}>
+        <Input
+          type="text"
+          value={customTagInput}
+          onChange={(e) => setCustomTagInput(e.target.value)}
+          placeholder="添加自定义标签"
+        />
+        <Button type="primary" onClick={handleAddCustomTag}>
+          添加
+        </Button>
       </div>
-
       {/* 输入获客成功提示 */}
-      <div className="flex pt-4">
-        <div className="border  p-2 flex-1">
-          <Input
-            type="text"
-            value={tips}
-            onChange={(e) => {
-              setTips(e.target.value);
-              onChange({ ...formData, tips: e.target.value });
-            }}
-            placeholder="请输入获客成功提示"
-            className="w-full"
-          />
-        </div>
-      </div>
-
-      {/* 选素材 */}
-      <div className="my-4" style={openPoster}>
-        <div className="mb-4">选择海报</div>
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: 12,
+      <div className={styles["basic-success-tip"]}>
+        <Input
+          type="text"
+          value={tips}
+          onChange={(e) => {
+            setTips(e.target.value);
+            onChange({ ...formData, tips: e.target.value });
           }}
-        >
+          placeholder="请输入获客成功提示"
+        />
+      </div>
+      {/* 选素材 */}
+      <div className={styles["basic-materials"]} style={openPoster}>
+        <div className={styles["basic-label"]}>选择海报</div>
+        <div className={styles["basic-materials-grid"]}>
           {[...materials, ...customPosters].map((material) => {
             const isSelected = selectedMaterials.some(
               (m) => m.id === material.id
@@ -538,35 +512,15 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
             return (
               <div
                 key={material.id}
-                style={{
-                  border: isSelected ? "2px solid #1890ff" : "2px solid #eee",
-                  borderRadius: 8,
-                  padding: 6,
-                  cursor: "pointer",
-                  background: isSelected ? "#e6f7ff" : "#fff",
-                  transition: "border 0.2s",
-                  textAlign: "center",
-                  position: "relative",
-                  height: 180 + 12, // 图片高度180+上下padding
-                  overflow: "hidden",
-                  minHeight: 192,
-                }}
+                className={
+                  styles["basic-material-card"] +
+                  (isSelected ? " " + styles.selected : "")
+                }
                 onClick={() => handleMaterialSelect(material)}
               >
                 {/* 预览按钮：自定义海报在左上，内置海报在右上 */}
-                <Button
-                  style={{
-                    position: "absolute",
-                    top: 8,
-                    left: isCustom ? 8 : "auto",
-                    right: isCustom ? "auto" : 8,
-                    background: "rgba(0,0,0,0.5)",
-                    border: "none",
-                    borderRadius: "50%",
-                    padding: 2,
-                    zIndex: 2,
-                    cursor: "pointer",
-                  }}
+                <span
+                  className={styles["basic-material-preview"]}
                   onClick={(e) => {
                     e.stopPropagation();
                     handlePreviewImage(material.preview);
@@ -575,7 +529,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
                   <EyeOutlined
                     style={{ color: "#fff", width: 18, height: 18 }}
                   />
-                </Button>
+                </span>
                 {/* 删除自定义海报按钮 */}
                 {isCustom && (
                   <Button
@@ -607,31 +561,9 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
                 <img
                   src={material.preview}
                   alt={material.name}
-                  style={{
-                    width: 100,
-                    height: 180,
-                    objectFit: "cover",
-                    borderRadius: 4,
-                    marginBottom: 0,
-                    display: "block",
-                  }}
+                  className={styles["basic-material-img"]}
                 />
-                <div
-                  style={{
-                    position: "absolute",
-                    left: 0,
-                    bottom: 0,
-                    width: "100%",
-                    background: "rgba(0,0,0,0.5)",
-                    color: "#fff",
-                    fontSize: 14,
-                    padding: "4px 0",
-                    borderBottomLeftRadius: 4,
-                    borderBottomRightRadius: 4,
-                    textAlign: "center",
-                    zIndex: 3,
-                  }}
-                >
+                <div className={styles["basic-material-name"]}>
                   {material.name}
                 </div>
               </div>
@@ -639,19 +571,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           })}
           {/* 添加海报卡片 */}
           <div
-            style={{
-              border: "2px dashed #bbb",
-              borderRadius: 8,
-              padding: 6,
-              cursor: "pointer",
-              background: "#fafbfc",
-              textAlign: "center",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              height: 190,
-            }}
+            className={styles["basic-add-material"]}
             onClick={() => uploadInputRef.current?.click()}
           >
             <span style={{ fontSize: 36, color: "#bbb", marginBottom: 8 }}>
@@ -705,11 +625,10 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
         </Modal>
       </div>
       {/* 订单导入区块优化 */}
-      <div style={openOrder} className="my-4">
-        <div style={{ fontWeight: 500, marginBottom: 8 }}>订单表格上传</div>
-        <div style={{ display: "flex", gap: 12, marginBottom: 4 }}>
+      <div className={styles["basic-order-upload"]} style={openOrder}>
+        <div className={styles["basic-order-upload-label"]}>订单表格上传</div>
+        <div className={styles["basic-order-upload-actions"]}>
           <Button
-            type="button"
             style={{ display: "flex", alignItems: "center", gap: 4 }}
             onClick={handleDownloadTemplate}
           >
@@ -741,78 +660,68 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
             />
           </Button>
         </div>
-        <div style={{ color: "#888", fontSize: 13, marginBottom: 8 }}>
+        <div className={styles["basic-order-upload-tip"]}>
           支持 CSV、Excel 格式，上传后将文件保存到服务器
         </div>
       </div>
       {/* 电话获客设置区块，仅在选择电话获客场景时显示 */}
       {formData.scenario === 5 && (
-        <div style={{ margin: "16px 0" }}>
-          <div
-            style={{
-              background: "#f7f8fa",
-              borderRadius: 10,
-              padding: 20,
-              boxShadow: "0 2px 8px rgba(0,0,0,0.03)",
-              marginBottom: 12,
-            }}
-          >
-            <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 16 }}>
-              电话获客设置
+        <div className={styles["basic-phone-settings"]}>
+          <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 16 }}>
+            电话获客设置
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>自动加好友</span>
+              <Switch
+                checked={phoneSettings.autoAdd}
+                onChange={(v) =>
+                  setPhoneSettings((s) => ({ ...s, autoAdd: v }))
+                }
+              />
             </div>
-            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-              >
-                <span>自动加好友</span>
-                <Switch
-                  checked={phoneSettings.autoAdd}
-                  onChange={(v) =>
-                    setPhoneSettings((s) => ({ ...s, autoAdd: v }))
-                  }
-                />
-              </div>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-              >
-                <span>语音转文字</span>
-                <Switch
-                  checked={phoneSettings.speechToText}
-                  onChange={(v) =>
-                    setPhoneSettings((s) => ({ ...s, speechToText: v }))
-                  }
-                />
-              </div>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-              >
-                <span>问题提取</span>
-                <Switch
-                  checked={phoneSettings.questionExtraction}
-                  onChange={(v) =>
-                    setPhoneSettings((s) => ({ ...s, questionExtraction: v }))
-                  }
-                />
-              </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>语音转文字</span>
+              <Switch
+                checked={phoneSettings.speechToText}
+                onChange={(v) =>
+                  setPhoneSettings((s) => ({ ...s, speechToText: v }))
+                }
+              />
+            </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>问题提取</span>
+              <Switch
+                checked={phoneSettings.questionExtraction}
+                onChange={(v) =>
+                  setPhoneSettings((s) => ({ ...s, questionExtraction: v }))
+                }
+              />
             </div>
           </div>
         </div>
       )}
       {/* 微信群设置区块，仅在选择微信群场景时显示 */}
       {formData.scenario === 7 && (
-        <div style={{ margin: "16px 0" }}>
+        <div className={styles["basic-wechat-group"]}>
           <div style={{ marginBottom: 8 }}>
             <Input
               value={weixinqunName}
@@ -833,24 +742,19 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           </div>
         </div>
       )}
-
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          margin: "16px 0",
-        }}
-      >
+      <div className={styles["basic-footer-switch"]}>
         <span>是否启用</span>
         <Switch
           checked={formData.enabled}
           onChange={(value) => onChange({ ...formData, enabled: value })}
         />
       </div>
-      <Button className="mt-4" type="primary" onClick={onNext}>
-        下一步
-      </Button>
+
+      <div className={styles["basic-footer-switch"]}>
+        <ButtonMobile block color="primary" onClick={onNext}>
+          下一步
+        </ButtonMobile>
+      </div>
     </div>
   );
 };

nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx

@@ -13,6 +13,7 @@ import {
 } from "antd";
 import { QuestionCircleOutlined, MessageOutlined } from "@ant-design/icons";
 import DeviceSelection from "@/components/DeviceSelection";
+import Layout from "@/components/Layout/Layout";
 
 interface FriendRequestSettingsProps {
   formData: any;
@@ -97,143 +98,151 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
 
   return (
     <>
-      <div className="space-y-6">
-        <div>
-          <span className="font-medium text-base">选择设备</span>
-          <div className="mt-2">
-            <DeviceSelection
-              selectedDevices={selectedDevices.map((d) => d.id)}
-              onSelect={(deviceIds) => {
-                const newSelectedDevices = deviceIds.map((id) => ({
-                  id,
-                  name: `设备 ${id}`,
-                  status: "online",
-                }));
-                setSelectedDevices(newSelectedDevices);
-                onChange({ ...formData, device: deviceIds });
-              }}
-              placeholder="选择设备"
-            />
+      <Layout
+        footer={
+          <div className="p-4 border-t bg-white">
+            <div className="flex justify-between">
+              <Button onClick={onPrev}>上一步</Button>
+              <Button type="primary" onClick={handleNext}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        }
+      >
+        <div className="p-4 space-y-6">
+          <div>
+            <span className="font-medium text-base">选择设备</span>
+            <div className="mt-2">
+              <DeviceSelection
+                selectedDevices={selectedDevices.map((d) => d.id)}
+                onSelect={(deviceIds) => {
+                  const newSelectedDevices = deviceIds.map((id) => ({
+                    id,
+                    name: `设备 ${id}`,
+                    status: "online",
+                  }));
+                  setSelectedDevices(newSelectedDevices);
+                  onChange({ ...formData, device: deviceIds });
+                }}
+                placeholder="选择设备"
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="mb-4">
-          <div className="flex items-center space-x-2 mb-1 relative">
-            <span className="font-medium text-base">好友备注</span>
-            <span
-              className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs cursor-pointer hover:bg-gray-300 transition-colors"
-              onMouseEnter={() => setShowRemarkTip(true)}
-              onMouseLeave={() => setShowRemarkTip(false)}
-              onClick={() => setShowRemarkTip((v) => !v)}
-            >
-              ?
-            </span>
-            {showRemarkTip && (
-              <div className="absolute left-24 top-0 z-20 w-64 p-3 bg-white border border-gray-200 rounded shadow-lg text-sm text-gray-700">
-                <div>设置添加好友时的备注格式</div>
-                <div className="mt-2 text-xs text-gray-500">备注格式预览：</div>
-                <div className="mt-1 text-blue-600">
-                  {formData.remarkType === "phone" &&
-                    `138****1234+${getScenarioTitle()}`}
-                  {formData.remarkType === "nickname" &&
-                    `小红书用户2851+${getScenarioTitle()}`}
-                  {formData.remarkType === "source" &&
-                    `抖音直播+${getScenarioTitle()}`}
+          <div className="mb-4">
+            <div className="flex items-center space-x-2 mb-1 relative">
+              <span className="font-medium text-base">好友备注</span>
+              <span
+                className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs cursor-pointer hover:bg-gray-300 transition-colors"
+                onMouseEnter={() => setShowRemarkTip(true)}
+                onMouseLeave={() => setShowRemarkTip(false)}
+                onClick={() => setShowRemarkTip((v) => !v)}
+              >
+                ?
+              </span>
+              {showRemarkTip && (
+                <div className="absolute left-24 top-0 z-20 w-64 p-3 bg-white border border-gray-200 rounded shadow-lg text-sm text-gray-700">
+                  <div>设置添加好友时的备注格式</div>
+                  <div className="mt-2 text-xs text-gray-500">
+                    备注格式预览：
+                  </div>
+                  <div className="mt-1 text-blue-600">
+                    {formData.remarkType === "phone" &&
+                      `138****1234+${getScenarioTitle()}`}
+                    {formData.remarkType === "nickname" &&
+                      `小红书用户2851+${getScenarioTitle()}`}
+                    {formData.remarkType === "source" &&
+                      `抖音直播+${getScenarioTitle()}`}
+                  </div>
                 </div>
-              </div>
-            )}
-          </div>
-          <Select
-            value={formData.remarkType || "phone"}
-            onChange={(value) => onChange({ ...formData, remarkType: value })}
-            className="w-full mt-2"
-          >
-            {remarkTypes.map((type) => (
-              <Select.Option key={type.value} value={type.value}>
-                {type.label}
-              </Select.Option>
-            ))}
-          </Select>
-        </div>
-
-        <div>
-          <div className="flex items-center justify-between">
-            <span className="font-medium text-base">招呼语</span>
-            <Button
-              onClick={() => setIsTemplateDialogOpen(true)}
-              className="text-blue-500"
+              )}
+            </div>
+            <Select
+              value={formData.remarkType || "phone"}
+              onChange={(value) => onChange({ ...formData, remarkType: value })}
+              className="w-full mt-2"
             >
-              <MessageOutlined className="h-4 w-4 mr-2" />
-              参考模板
-            </Button>
+              {remarkTypes.map((type) => (
+                <Select.Option key={type.value} value={type.value}>
+                  {type.label}
+                </Select.Option>
+              ))}
+            </Select>
           </div>
-          <Input
-            value={formData.greeting}
-            onChange={(e) =>
-              onChange({ ...formData, greeting: e.target.value })
-            }
-            placeholder="请输入招呼语"
-            className="mt-2"
-          />
-        </div>
 
-        <div>
-          <span className="font-medium text-base">添加间隔</span>
-          <div className="flex items-center space-x-2 mt-2">
+          <div>
+            <div className="flex items-center justify-between">
+              <span className="font-medium text-base">招呼语</span>
+              <Button
+                onClick={() => setIsTemplateDialogOpen(true)}
+                className="text-blue-500"
+              >
+                <MessageOutlined className="h-4 w-4 mr-2" />
+                参考模板
+              </Button>
+            </div>
             <Input
-              type="number"
-              value={formData.addFriendInterval || 1}
+              value={formData.greeting}
               onChange={(e) =>
-                onChange({
-                  ...formData,
-                  addFriendInterval: Number(e.target.value),
-                })
+                onChange({ ...formData, greeting: e.target.value })
               }
-            />
-            <div className="w-10">分钟</div>
-          </div>
-        </div>
-
-        <div>
-          <span className="font-medium text-base">允许加人的时间段</span>
-          <div className="flex items-center space-x-2 mt-2">
-            <Input
-              type="time"
-              value={formData.addFriendTimeStart || "09:00"}
-              onChange={(e) =>
-                onChange({ ...formData, addFriendTimeStart: e.target.value })
-              }
-              className="w-32"
-            />
-            <span>至</span>
-            <Input
-              type="time"
-              value={formData.addFriendTimeEnd || "18:00"}
-              onChange={(e) =>
-                onChange({ ...formData, addFriendTimeEnd: e.target.value })
-              }
-              className="w-32"
+              placeholder="请输入招呼语"
+              className="mt-2"
             />
           </div>
-        </div>
 
-        {hasWarnings && (
-          <Alert
-            message="警告"
-            description="您有未完成的设置项，建议完善后再进入下一步。"
-            type="warning"
-            showIcon
-            className="bg-amber-50 border-amber-200"
-          />
-        )}
+          <div>
+            <span className="font-medium text-base">添加间隔</span>
+            <div className="flex items-center space-x-2 mt-2">
+              <Input
+                type="number"
+                value={formData.addFriendInterval || 1}
+                onChange={(e) =>
+                  onChange({
+                    ...formData,
+                    addFriendInterval: Number(e.target.value),
+                  })
+                }
+              />
+              <div className="w-10">分钟</div>
+            </div>
+          </div>
 
-        <div className="flex justify-between pt-4">
-          <Button onClick={onPrev}>上一步</Button>
-          <Button type="primary" onClick={handleNext}>
-            下一步
-          </Button>
+          <div>
+            <span className="font-medium text-base">允许加人的时间段</span>
+            <div className="flex items-center space-x-2 mt-2">
+              <Input
+                type="time"
+                value={formData.addFriendTimeStart || "09:00"}
+                onChange={(e) =>
+                  onChange({ ...formData, addFriendTimeStart: e.target.value })
+                }
+                className="w-32"
+              />
+              <span>至</span>
+              <Input
+                type="time"
+                value={formData.addFriendTimeEnd || "18:00"}
+                onChange={(e) =>
+                  onChange({ ...formData, addFriendTimeEnd: e.target.value })
+                }
+                className="w-32"
+              />
+            </div>
+          </div>
+
+          {hasWarnings && (
+            <Alert
+              message="警告"
+              description="您有未完成的设置项，建议完善后再进入下一步。"
+              type="warning"
+              showIcon
+              className="bg-amber-50 border-amber-200"
+            />
+          )}
         </div>
-      </div>
+      </Layout>
 
       <Modal
         open={isTemplateDialogOpen}

nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx

@@ -13,6 +13,7 @@ import {
   LinkOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
 
 interface MessageContent {
   id: string;
@@ -533,23 +534,29 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
 
   return (
     <>
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold">消息设置</h2>
-          <Button onClick={() => setIsAddDayPlanOpen(true)}>
-            <PlusOutlined className="h-4 w-4" />
-          </Button>
-        </div>
+      <Layout
+        footer={
+          <div className="p-4 border-t bg-white">
+            <div className="flex justify-between">
+              <Button onClick={onPrev}>上一步</Button>
+              <Button type="primary" onClick={onNext}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        }
+      >
+        <div className="p-4 space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold">消息设置</h2>
+            <Button onClick={() => setIsAddDayPlanOpen(true)}>
+              <PlusOutlined className="h-4 w-4" />
+            </Button>
+          </div>
 
-        <Tabs defaultActiveKey="0" items={items} />
-
-        <div className="flex justify-between pt-4">
-          <Button onClick={onPrev}>上一步</Button>
-          <Button type="primary" onClick={onNext}>
-            下一步
-          </Button>
+          <Tabs defaultActiveKey="0" items={items} />
         </div>
-      </div>
+      </Layout>
 
       {/* 添加天数计划弹窗 */}
       <Modal

nkebao/src/pages/scenarios/plan/new/steps/base.module.scss

@@ -0,0 +1,164 @@
+.basic-container {
+  padding: 12px;
+}
+.basic-scene-select {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+.basic-scene-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+.basic-scene-btn {
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  font-weight: 500;
+  font-size: 16px;
+  outline: none;
+  cursor: pointer;
+  background: rgba(#1677ff,0.1);
+  color: #1677ff;
+  transition: all 0.2s;
+}
+.basic-scene-btn.selected {
+  background: #1677ff;
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(22,119,255,0.08);
+}
+.basic-label {
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+.basic-input-block {
+  border: 1px solid #eee;
+  margin-bottom: 16px;
+}
+.basic-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding-bottom: 16px;
+}
+.basic-tag-item{
+  margin-bottom: 6px;
+}
+.basic-custom-tag-input {
+  display: flex;
+  gap: 8px;
+}
+.basic-success-tip {
+  display: flex;
+  padding-top: 16px;
+}
+.basic-materials {
+  margin: 16px 0;
+}
+.basic-materials-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+
+.basic-material-preview{
+  position: absolute;
+  top: 8px;
+  padding-left: 2px;
+  right: 8px;
+  background:rgba(0,0,0,0.5);
+  border-radius: 50%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  cursor:pointer;
+}
+.basic-material-card {
+  border: 2px solid #eee;
+  border-radius: 8px;
+  padding: 6px;
+  cursor: pointer;
+  background: #fff;
+  text-align: center;
+  position: relative;
+  min-height: 192px;
+  transition: border 0.2s;
+}
+.basic-material-card.selected {
+  border: 2px solid #1890ff;
+  background: #e6f7ff;
+}
+.basic-material-img {
+  width: 100px;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 0;
+  display: block;
+}
+.basic-material-name {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 14px;
+  padding: 4px 0;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  text-align: center;
+  z-index: 3;
+}
+.basic-add-material {
+  border: 2px dashed #bbb;
+  border-radius: 8px;
+  padding: 6px;
+  cursor: pointer;
+  background: #fafbfc;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 190px;
+}
+.basic-order-upload {
+  margin: 16px 0;
+}
+.basic-order-upload-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.basic-order-upload-actions {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+.basic-order-upload-tip {
+  color: #888;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+.basic-phone-settings {
+  margin: 16px 0;
+  background: #f7f8fa;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+  margin-bottom: 12px;
+}
+.basic-wechat-group {
+  margin: 16px 0;
+}
+.basic-footer-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0;
+}

nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { NavBar } from "antd-mobile";
-import Layout from "@/components/Layout/Layout";
-import MeauMobile from "@/components/MeauMobile/MeauMoible";
-
-const WechatAccountDetail: React.FC = () => {
-  return (
-    <Layout
-      header={
-        <NavBar
-          backArrow
-          style={{ background: "#fff" }}
-          onBack={() => window.history.back()}
-        >
-          <div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
-            微信号详情
-          </div>
-        </NavBar>
-      }
-      footer={<MeauMobile />}
-    >
-      <div style={{ padding: 20, textAlign: "center", color: "#666" }}>
-        <h3>微信号详情页面</h3>
-        <p>此页面正在开发中...</p>
-      </div>
-    </Layout>
-  );
-};
-
-export default WechatAccountDetail;

nkebao/src/pages/wechat-accounts/WechatAccounts.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { NavBar, Button } from "antd-mobile";
-import { PlusOutlined } from "@ant-design/icons";
-import Layout from "@/components/Layout/Layout";
-import MeauMobile from "@/components/MeauMobile/MeauMoible";
-
-const WechatAccounts: React.FC = () => {
-  return (
-    <Layout
-      header={
-        <NavBar
-          back={null}
-          style={{ background: "#fff" }}
-          left={
-            <div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
-              微信号管理
-            </div>
-          }
-          right={
-            <Button size="small" color="primary">
-              <PlusOutlined />
-              <span style={{ marginLeft: 4, fontSize: 12 }}>添加微信号</span>
-            </Button>
-          }
-        />
-      }
-      footer={<MeauMobile />}
-    >
-      <div style={{ padding: 20, textAlign: "center", color: "#666" }}>
-        <h3>微信号管理页面</h3>
-        <p>此页面正在开发中...</p>
-      </div>
-    </Layout>
-  );
-};
-
-export default WechatAccounts;

nkebao/src/pages/wechat-accounts/detail/api.ts

@@ -0,0 +1,26 @@
+import request from "@/api/request";
+
+// 获取微信号详情
+export function getWechatAccountDetail(id: string) {
+  return request("/WechatAccount/detail", { id }, "GET");
+}
+
+// 获取微信号summary
+export function getWechatAccountSummary(id: string) {
+  return request(`/v1/wechats/${id}/summary`, {}, "GET");
+}
+
+// 获取微信号好友列表
+export function getWechatFriends(params: {
+  wechatAccountKeyword: string;
+  pageIndex: number;
+  pageSize: number;
+  friendKeyword?: string;
+}) {
+  return request("/WechatFriend/friendlistData", params, "POST");
+}
+
+// 获取微信好友详情
+export function getWechatFriendDetail(id: string) {
+  return request("/v1/WechatFriend/detail", { id }, "GET");
+}

nkebao/src/pages/wechat-accounts/detail/detail.module.scss

@@ -0,0 +1,720 @@
+.wechat-account-detail-page {
+  padding: 16px;
+  background: linear-gradient(to bottom, #f0f8ff, #ffffff);
+  min-height: 100vh;
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+  }
+
+  .account-card {
+    margin-bottom: 16px;
+    border-radius: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e8f4fd;
+
+    .account-info {
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      padding: 20px;
+
+      .avatar-section {
+        position: relative;
+
+        .avatar {
+          width: 64px;
+          height: 64px;
+          border-radius: 50%;
+          border: 4px solid #e8f4fd;
+        }
+
+                 .status-dot {
+           position: absolute;
+           bottom: 2px;
+           right: 2px;
+           width: 16px;
+           height: 16px;
+           border-radius: 50%;
+           border: 2px solid #fff;
+
+           &.status-normal {
+             background: #52c41a;
+           }
+
+           &.status-abnormal {
+             background: #ff4d4f;
+           }
+         }
+      }
+
+      .info-section {
+        flex: 1;
+        min-width: 0;
+
+        .name-row {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 4px;
+
+          .nickname {
+            font-size: 20px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin: 0;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .status-tag {
+            font-size: 12px;
+            padding: 2px 8px;
+            border-radius: 12px;
+          }
+        }
+
+        .wechat-id {
+          font-size: 14px;
+          color: #666;
+          margin: 0 0 12px 0;
+        }
+
+        .action-buttons {
+          display: flex;
+          gap: 8px;
+          flex-wrap: wrap;
+
+          .action-btn {
+            font-size: 12px;
+            padding: 6px 12px;
+            border-radius: 8px;
+            border: 1px solid #d9d9d9;
+            background: #fff;
+            color: #666;
+            transition: all 0.2s;
+
+            &:hover {
+              background: #f5f5f5;
+              border-color: #bfbfbf;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tabs-card {
+    border-radius: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e8f4fd;
+
+    .tabs {
+      .adm-tabs-header {
+        border-bottom: 1px solid #e8e8e8;
+        background: #fff;
+        border-radius: 16px 16px 0 0;
+
+        .adm-tabs-tab {
+          font-size: 14px;
+          font-weight: 500;
+          color: #666;
+          transition: all 0.2s;
+
+          &.adm-tabs-tab-active {
+            color: #1677ff;
+            font-weight: 600;
+          }
+        }
+
+        .adm-tabs-tab-line {
+          background: #1677ff;
+          height: 2px;
+        }
+      }
+
+      .adm-tabs-content {
+        padding: 16px;
+      }
+    }
+  }
+
+  .overview-content {
+    .info-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      margin-bottom: 16px;
+
+      .info-card {
+        background: linear-gradient(135deg, #e6f7ff, #f0f8ff);
+        padding: 16px;
+        border-radius: 12px;
+        border: 1px solid #bae7ff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s;
+
+        &:hover {
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+          transform: translateY(-1px);
+        }
+
+        .info-header {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 8px;
+
+          .info-icon {
+            font-size: 16px;
+            color: #1677ff;
+            padding: 6px;
+            background: #e6f7ff;
+            border-radius: 8px;
+          }
+
+          .info-title {
+            flex: 1;
+
+            .title-text {
+              font-size: 12px;
+              font-weight: 600;
+              color: #1677ff;
+              margin-bottom: 2px;
+            }
+
+            .title-sub {
+              font-size: 10px;
+              color: #666;
+            }
+          }
+        }
+
+        .info-value {
+          text-align: right;
+          font-size: 18px;
+          font-weight: 700;
+          color: #1677ff;
+
+          .value-unit {
+            font-size: 12px;
+            color: #666;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+
+    .weight-card {
+      background: linear-gradient(135deg, #fff7e6, #fff2d9);
+      padding: 20px;
+      border-radius: 12px;
+      border: 1px solid #ffd591;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+      margin-bottom: 16px;
+      transition: all 0.3s;
+
+      &:hover {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+      }
+
+      .weight-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+
+        .weight-icon {
+          font-size: 16px;
+          color: #fa8c16;
+          margin-right: 8px;
+        }
+
+        .weight-title {
+          flex: 1;
+          font-size: 14px;
+          font-weight: 600;
+          color: #fa8c16;
+        }
+
+        .weight-score {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          padding: 6px 12px;
+          border-radius: 16px;
+          font-weight: 600;
+
+          &.text-green-600 {
+            background: #f6ffed;
+            color: #52c41a;
+          }
+
+          &.text-yellow-600 {
+            background: #fffbe6;
+            color: #fa8c16;
+          }
+
+          &.text-red-600 {
+            background: #fff2f0;
+            color: #ff4d4f;
+          }
+
+          .score-value {
+            font-size: 20px;
+            font-weight: 700;
+          }
+
+          .score-unit {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .weight-description {
+        font-size: 12px;
+        color: #fa8c16;
+        background: #fff7e6;
+        padding: 8px 12px;
+        border-radius: 8px;
+        border: 1px solid #ffd591;
+        margin-bottom: 16px;
+      }
+
+      .weight-items {
+        .weight-item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 12px;
+
+          .item-label {
+            flex-shrink: 0;
+            width: 64px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #fa8c16;
+          }
+
+          .progress-bar {
+            flex: 1;
+            margin: 0 12px;
+            height: 8px;
+            background: #ffd591;
+            border-radius: 4px;
+            overflow: hidden;
+
+            .progress-fill {
+              height: 100%;
+              background: linear-gradient(90deg, #fa8c16, #ffa940);
+              border-radius: 4px;
+              transition: width 0.5s ease;
+            }
+          }
+
+          .item-value {
+            flex-shrink: 0;
+            width: 40px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #fa8c16;
+            text-align: right;
+          }
+        }
+      }
+    }
+
+    .restrictions-card {
+      background: linear-gradient(135deg, #fff2f0, #fff1f0);
+      padding: 16px;
+      border-radius: 12px;
+      border: 1px solid #ffccc7;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+      .restrictions-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+
+        .restrictions-icon {
+          font-size: 16px;
+          color: #ff4d4f;
+          margin-right: 8px;
+        }
+
+        .restrictions-title {
+          flex: 1;
+          font-size: 14px;
+          font-weight: 600;
+          color: #ff4d4f;
+        }
+
+        .restrictions-btn {
+          font-size: 12px;
+          padding: 4px 8px;
+          border-radius: 6px;
+        }
+      }
+
+      .restrictions-list {
+        .restriction-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 8px 0;
+          border-bottom: 1px solid #ffccc7;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .restriction-info {
+            flex: 1;
+
+            .restriction-reason {
+              display: block;
+              font-size: 12px;
+              color: #333;
+              margin-bottom: 2px;
+            }
+
+            .restriction-date {
+              font-size: 10px;
+              color: #666;
+            }
+          }
+
+          .restriction-level {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 8px;
+            font-weight: 500;
+
+            &.text-red-600 {
+              background: #fff2f0;
+              color: #ff4d4f;
+            }
+
+            &.text-yellow-600 {
+              background: #fffbe6;
+              color: #fa8c16;
+            }
+
+            &.text-gray-600 {
+              background: #f5f5f5;
+              color: #666;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .friends-content {
+    .search-bar {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+
+      .search-input-wrapper {
+        flex: 1;
+
+        .adm-input {
+          border-radius: 8px;
+          border: 1px solid #d9d9d9;
+        }
+      }
+
+      .search-btn {
+        padding: 8px 12px;
+        border-radius: 8px;
+      }
+    }
+
+    .friends-list {
+      .empty {
+        text-align: center;
+        color: #999;
+        padding: 40px 0;
+        font-size: 14px;
+      }
+
+      .error {
+        text-align: center;
+        color: #ff4d4f;
+        padding: 40px 0;
+
+        p {
+          margin-bottom: 12px;
+        }
+      }
+
+      .friend-item {
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        border-radius: 8px;
+        margin-bottom: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          background: #f5f5f5;
+          border-color: #d9d9d9;
+        }
+
+        .friend-avatar {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          margin-right: 12px;
+        }
+
+        .friend-info {
+          flex: 1;
+          min-width: 0;
+
+          .friend-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+
+            .friend-name {
+              font-size: 14px;
+              font-weight: 500;
+              color: #333;
+              max-width: 180px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+
+              .friend-remark {
+                color: #666;
+                margin-left: 4px;
+              }
+            }
+
+            .friend-arrow {
+              font-size: 12px;
+              color: #ccc;
+            }
+          }
+
+          .friend-wechat-id {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 4px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .friend-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px;
+
+            .friend-tag {
+              font-size: 10px;
+              padding: 2px 6px;
+              border-radius: 6px;
+            }
+          }
+        }
+      }
+
+      .loading-more {
+        display: flex;
+        justify-content: center;
+        padding: 16px 0;
+      }
+    }
+  }
+}
+
+.popup-content {
+  padding: 20px;
+  max-height: 80vh;
+  overflow-y: auto;
+
+  .popup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+      margin: 0;
+    }
+  }
+
+  .popup-description {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  .popup-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  .restrictions-detail {
+    .restriction-detail-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .restriction-detail-info {
+        flex: 1;
+
+        .restriction-detail-reason {
+          font-size: 14px;
+          color: #333;
+          margin-bottom: 4px;
+        }
+
+        .restriction-detail-date {
+          font-size: 12px;
+          color: #666;
+        }
+      }
+
+      .restriction-detail-level {
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 8px;
+        font-weight: 500;
+
+        &.text-red-600 {
+          background: #fff2f0;
+          color: #ff4d4f;
+        }
+
+        &.text-yellow-600 {
+          background: #fffbe6;
+          color: #fa8c16;
+        }
+
+        &.text-gray-600 {
+          background: #f5f5f5;
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .loading-detail {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px 0;
+  }
+
+  .error-detail {
+    text-align: center;
+    color: #ff4d4f;
+    padding: 40px 0;
+
+    p {
+      margin-bottom: 12px;
+    }
+  }
+
+  .friend-detail-content {
+    .friend-detail-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid #f0f0f0;
+
+      .friend-detail-avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+      }
+
+      .friend-detail-info {
+        .friend-detail-name {
+          font-size: 16px;
+          font-weight: 600;
+          color: #333;
+          margin: 0 0 4px 0;
+        }
+
+        .friend-detail-wechat-id {
+          font-size: 12px;
+          color: #666;
+          margin: 0;
+        }
+      }
+    }
+
+    .friend-detail-items {
+      .detail-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 12px 0;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .detail-label {
+          font-size: 14px;
+          color: #666;
+          flex-shrink: 0;
+          width: 80px;
+        }
+
+        .detail-value {
+          font-size: 14px;
+          color: #333;
+          text-align: right;
+          flex: 1;
+          margin-left: 16px;
+        }
+
+        .detail-tags {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 4px;
+          justify-content: flex-end;
+          flex: 1;
+          margin-left: 16px;
+
+          .detail-tag {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 6px;
+          }
+        }
+      }
+    }
+  }
+}

nkebao/src/pages/wechat-accounts/detail/index.tsx

@@ -0,0 +1,940 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  NavBar,
+  Card,
+  Tabs,
+  Button,
+  SpinLoading,
+  Popup,
+  Toast,
+  Input,
+  Avatar,
+  Tag,
+} from "antd-mobile";
+import NavCommon from "@/components/NavCommon";
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  UserOutlined,
+  ClockCircleOutlined,
+  MessageOutlined,
+  StarOutlined,
+  ExclamationCircleOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
+import style from "./detail.module.scss";
+import {
+  getWechatAccountDetail,
+  getWechatAccountSummary,
+  getWechatFriends,
+  getWechatFriendDetail,
+} from "./api";
+
+interface WechatAccountSummary {
+  accountAge: string;
+  activityLevel: {
+    allTimes: number;
+    dayTimes: number;
+  };
+  accountWeight: {
+    scope: number;
+    ageWeight: number;
+    activityWeigth: number;
+    restrictWeight: number;
+    realNameWeight: number;
+  };
+  statistics: {
+    todayAdded: number;
+    addLimit: number;
+  };
+  restrictions: {
+    id: number;
+    level: string;
+    reason: string;
+    date: string;
+  }[];
+}
+
+interface Friend {
+  id: string;
+  avatar: string;
+  nickname: string;
+  wechatId: string;
+  remark: string;
+  addTime: string;
+  lastInteraction: string;
+  tags: Array<{
+    id: string;
+    name: string;
+    color: string;
+  }>;
+  region: string;
+  source: string;
+  notes: string;
+}
+
+interface WechatFriendDetail {
+  id: number;
+  avatar: string;
+  nickname: string;
+  region: string;
+  wechatId: string;
+  addDate: string;
+  tags: string[];
+  memo: string;
+  source: string;
+}
+
+const WechatAccountDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [accountSummary, setAccountSummary] =
+    useState<WechatAccountSummary | null>(null);
+  const [accountInfo, setAccountInfo] = useState<any>(null);
+  const [showRestrictions, setShowRestrictions] = useState(false);
+  const [showTransferConfirm, setShowTransferConfirm] = useState(false);
+  const [showFriendDetail, setShowFriendDetail] = useState(false);
+  const [selectedFriend, setSelectedFriend] = useState<Friend | null>(null);
+  const [friendDetail, setFriendDetail] = useState<WechatFriendDetail | null>(
+    null
+  );
+  const [isLoadingFriendDetail, setIsLoadingFriendDetail] = useState(false);
+  const [friendDetailError, setFriendDetailError] = useState<string | null>(
+    null
+  );
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeTab, setActiveTab] = useState("overview");
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingInfo, setLoadingInfo] = useState(true);
+  const [loadingSummary, setLoadingSummary] = useState(true);
+
+  // 好友列表相关状态
+  const [friends, setFriends] = useState<Friend[]>([]);
+  const [friendsPage, setFriendsPage] = useState(1);
+  const [friendsTotal, setFriendsTotal] = useState(0);
+  const [hasMoreFriends, setHasMoreFriends] = useState(true);
+  const [isFetchingFriends, setIsFetchingFriends] = useState(false);
+  const [hasFriendLoadError, setHasFriendLoadError] = useState(false);
+  const [isFriendsEmpty, setIsFriendsEmpty] = useState(false);
+  const friendsObserver = useRef<IntersectionObserver | null>(null);
+  const friendsLoadingRef = useRef<HTMLDivElement | null>(null);
+
+  // 获取基础信息
+  const fetchAccountInfo = useCallback(async () => {
+    if (!id) return;
+    setLoadingInfo(true);
+    try {
+      const response = await getWechatAccountDetail(id);
+      if (response && response.data) {
+        setAccountInfo(response.data);
+      } else {
+        Toast.show({
+          content: response?.msg || "获取账号信息失败",
+          position: "top",
+        });
+      }
+    } catch (e) {
+      Toast.show({ content: "获取账号信息失败", position: "top" });
+    } finally {
+      setLoadingInfo(false);
+    }
+  }, [id]);
+
+  // 获取summary
+  const fetchAccountSummary = useCallback(async () => {
+    if (!id) return;
+    setLoadingSummary(true);
+    try {
+      const response = await getWechatAccountSummary(id);
+      if (response && response.data) {
+        setAccountSummary(response.data);
+      } else {
+        Toast.show({
+          content: response?.msg || "获取账号概览失败",
+          position: "top",
+        });
+      }
+    } catch (e) {
+      Toast.show({ content: "获取账号概览失败", position: "top" });
+    } finally {
+      setLoadingSummary(false);
+    }
+  }, [id]);
+
+  // 获取好友列表
+  const fetchFriends = useCallback(
+    async (page: number = 1, isNewSearch: boolean = false) => {
+      if (!id || isFetchingFriends) return;
+
+      try {
+        setIsFetchingFriends(true);
+        setHasFriendLoadError(false);
+        const response = await getWechatFriends({
+          wechatAccountKeyword: id,
+          pageIndex: page,
+          pageSize: 20,
+          friendKeyword: searchQuery,
+        });
+
+        if (response && response.data) {
+          const newFriends = response.data.list.map((friend: any) => ({
+            id: friend.id.toString(),
+            avatar: friend.avatar || "/placeholder.svg",
+            nickname: friend.nickname || "未知用户",
+            wechatId: friend.wechatId || "",
+            remark: friend.memo || "",
+            addTime:
+              friend.createTime || new Date().toISOString().split("T")[0],
+            lastInteraction:
+              friend.lastInteraction || new Date().toISOString().split("T")[0],
+            tags: friend.tags
+              ? friend.tags.map((tag: string, index: number) => ({
+                  id: `tag-${index}`,
+                  name: tag,
+                  color: getRandomTagColor(),
+                }))
+              : [],
+            region: friend.region || "未知",
+            source: friend.source || "未知",
+            notes: friend.notes || "",
+          }));
+
+          if (isNewSearch) {
+            setFriends(newFriends);
+            if (newFriends.length === 0) {
+              setIsFriendsEmpty(true);
+              setHasMoreFriends(false);
+            } else {
+              setIsFriendsEmpty(false);
+              setHasMoreFriends(newFriends.length === 20);
+            }
+          } else {
+            setFriends((prev) => [...prev, ...newFriends]);
+            setHasMoreFriends(newFriends.length === 20);
+          }
+
+          setFriendsTotal(response.data.total);
+          setFriendsPage(page);
+        } else {
+          setHasFriendLoadError(true);
+          if (isNewSearch) {
+            setFriends([]);
+            setIsFriendsEmpty(true);
+            setHasMoreFriends(false);
+          }
+          Toast.show({
+            content: response?.msg || "获取好友列表失败",
+            position: "top",
+          });
+        }
+      } catch (error) {
+        console.error("获取好友列表失败:", error);
+        setHasFriendLoadError(true);
+        if (isNewSearch) {
+          setFriends([]);
+          setIsFriendsEmpty(true);
+          setHasMoreFriends(false);
+        }
+        Toast.show({
+          content: "获取好友列表失败，请检查网络连接",
+          position: "top",
+        });
+      } finally {
+        setIsFetchingFriends(false);
+      }
+    },
+    [id, searchQuery, isFetchingFriends]
+  );
+
+  // 初始化数据
+  useEffect(() => {
+    if (id) {
+      fetchAccountInfo();
+      fetchAccountSummary();
+      if (activeTab === "friends") {
+        fetchFriends(1, true);
+      }
+    }
+    // eslint-disable-next-line
+  }, [id]);
+
+  // 监听标签切换
+  useEffect(() => {
+    if (activeTab === "friends" && id) {
+      setIsFriendsEmpty(false);
+      setHasFriendLoadError(false);
+      fetchFriends(1, true);
+    }
+  }, [activeTab, id, fetchFriends]);
+
+  // 无限滚动加载好友
+  useEffect(() => {
+    if (
+      !friendsLoadingRef.current ||
+      !hasMoreFriends ||
+      isFetchingFriends ||
+      isFriendsEmpty
+    )
+      return;
+
+    friendsObserver.current = new IntersectionObserver(
+      (entries) => {
+        if (
+          entries[0].isIntersecting &&
+          hasMoreFriends &&
+          !isFetchingFriends &&
+          !isFriendsEmpty
+        ) {
+          fetchFriends(friendsPage + 1, false);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    friendsObserver.current.observe(friendsLoadingRef.current);
+
+    return () => {
+      if (friendsObserver.current) {
+        friendsObserver.current.disconnect();
+      }
+    };
+  }, [
+    hasMoreFriends,
+    isFetchingFriends,
+    friendsPage,
+    fetchFriends,
+    isFriendsEmpty,
+  ]);
+
+  // 工具函数
+  const getRandomTagColor = (): string => {
+    const colors = [
+      "bg-blue-100 text-blue-800",
+      "bg-green-100 text-green-800",
+      "bg-red-100 text-red-800",
+      "bg-pink-100 text-pink-800",
+      "bg-emerald-100 text-emerald-800",
+      "bg-amber-100 text-amber-800",
+    ];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  const calculateAccountAge = (registerTime: string) => {
+    const registerDate = new Date(registerTime);
+    const now = new Date();
+    const diffTime = Math.abs(now.getTime() - registerDate.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    const years = Math.floor(diffDays / 365);
+    const months = Math.floor((diffDays % 365) / 30);
+    return { years, months };
+  };
+
+  const formatAccountAge = (age: { years: number; months: number }) => {
+    if (age.years > 0) {
+      return `${age.years}年${age.months}个月`;
+    }
+    return `${age.months}个月`;
+  };
+
+  const getWeightColor = (weight: number) => {
+    if (weight >= 80) return "text-green-600";
+    if (weight >= 60) return "text-yellow-600";
+    return "text-red-600";
+  };
+
+  const getWeightDescription = (weight: number) => {
+    if (weight >= 80) return "账号质量优秀，可以正常使用";
+    if (weight >= 60) return "账号质量良好，需要注意使用频率";
+    return "账号质量较差，建议谨慎使用";
+  };
+
+  const handleTransferFriends = () => {
+    setShowTransferConfirm(true);
+  };
+
+  const confirmTransferFriends = () => {
+    Toast.show({
+      content: "好友转移计划已创建，请在场景获客中查看详情",
+      position: "top",
+    });
+    setShowTransferConfirm(false);
+    navigate("/scenarios");
+  };
+
+  const handleFriendClick = async (friend: Friend) => {
+    setSelectedFriend(friend);
+    setShowFriendDetail(true);
+    setIsLoadingFriendDetail(true);
+    setFriendDetailError(null);
+
+    try {
+      const response = await getWechatFriendDetail(friend.id);
+      if (response && response.data) {
+        setFriendDetail(response.data);
+      } else {
+        setFriendDetailError(response?.msg || "获取好友详情失败");
+      }
+    } catch (error) {
+      console.error("获取好友详情失败:", error);
+      setFriendDetailError("网络错误，请稍后重试");
+    } finally {
+      setIsLoadingFriendDetail(false);
+    }
+  };
+
+  const getRestrictionLevelColor = (level: string) => {
+    switch (level) {
+      case "high":
+        return "text-red-600";
+      case "medium":
+        return "text-yellow-600";
+      default:
+        return "text-gray-600";
+    }
+  };
+
+  const formatDateTime = (dateString: string) => {
+    const date = new Date(dateString);
+    return date
+      .toLocaleString("zh-CN", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+      })
+      .replace(/\//g, "-");
+  };
+
+  const handleSearch = () => {
+    setIsFriendsEmpty(false);
+    setHasFriendLoadError(false);
+    fetchFriends(1, true);
+  };
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+  };
+
+  if (loadingInfo || loadingSummary) {
+    return (
+      <Layout
+        header={
+          <NavBar back={null} style={{ background: "#fff" }}>
+            <span className={style["nav-title"]}>微信号详情</span>
+          </NavBar>
+        }
+      >
+        <div className={style["loading"]}>
+          <SpinLoading color="primary" style={{ fontSize: 32 }} />
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout header={<NavCommon title="微信号详情" />}>
+      <div className={style["wechat-account-detail-page"]}>
+        {/* 账号基本信息卡片 */}
+        <Card className={style["account-card"]}>
+          <div className={style["account-info"]}>
+            <div className={style["avatar-section"]}>
+              <Avatar
+                src={accountInfo?.avatar || "/placeholder.svg"}
+                className={style["avatar"]}
+              />
+              <div
+                className={`${style["status-dot"]} ${accountInfo?.wechatStatus === 1 ? style["status-normal"] : style["status-abnormal"]}`}
+              />
+            </div>
+            <div className={style["info-section"]}>
+              <div className={style["name-row"]}>
+                <h2 className={style["nickname"]}>
+                  {accountInfo?.nickname || "未知昵称"}
+                </h2>
+                <Tag
+                  color={accountInfo?.wechatStatus === 1 ? "success" : "danger"}
+                  className={style["status-tag"]}
+                >
+                  {accountInfo?.wechatStatus === 1 ? "正常" : "异常"}
+                </Tag>
+              </div>
+              <p className={style["wechat-id"]}>
+                微信号：{accountInfo?.wechatAccount || "未知"}
+              </p>
+              <div className={style["action-buttons"]}>
+                <Button
+                  size="small"
+                  fill="outline"
+                  className={style["action-btn"]}
+                >
+                  <UserOutlined /> {accountInfo?.deviceMemo || "未知设备"}
+                </Button>
+                <Button
+                  size="small"
+                  fill="outline"
+                  className={style["action-btn"]}
+                  onClick={handleTransferFriends}
+                >
+                  <UserOutlined /> 好友转移
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* 标签页 */}
+        <Card className={style["tabs-card"]}>
+          <Tabs
+            activeKey={activeTab}
+            onChange={handleTabChange}
+            className={style["tabs"]}
+          >
+            <Tabs.Tab title="账号概览" key="overview">
+              <div className={style["overview-content"]}>
+                {/* 账号基础信息 */}
+                <div className={style["info-grid"]}>
+                  <div className={style["info-card"]}>
+                    <div className={style["info-header"]}>
+                      <ClockCircleOutlined className={style["info-icon"]} />
+                      <div className={style["info-title"]}>
+                        <div className={style["title-text"]}>账号年龄</div>
+                        {accountSummary && (
+                          <div className={style["title-sub"]}>
+                            注册于{" "}
+                            {new Date(
+                              accountSummary.accountAge
+                            ).toLocaleDateString()}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    {accountSummary && (
+                      <div className={style["info-value"]}>
+                        {formatAccountAge(
+                          calculateAccountAge(accountSummary.accountAge)
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  <div className={style["info-card"]}>
+                    <div className={style["info-header"]}>
+                      <MessageOutlined className={style["info-icon"]} />
+                      <div className={style["info-title"]}>
+                        <div className={style["title-text"]}>活跃程度</div>
+                        {accountSummary && (
+                          <div className={style["title-sub"]}>
+                            总聊天{" "}
+                            {accountSummary.activityLevel.allTimes.toLocaleString()}{" "}
+                            次
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    {accountSummary && (
+                      <div className={style["info-value"]}>
+                        {accountSummary.activityLevel.dayTimes.toLocaleString()}
+                        <span className={style["value-unit"]}>次/天</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* 账号权重评估 */}
+                {accountSummary && (
+                  <div className={style["weight-card"]}>
+                    <div className={style["weight-header"]}>
+                      <StarOutlined className={style["weight-icon"]} />
+                      <span className={style["weight-title"]}>
+                        账号权重评估
+                      </span>
+                      <div
+                        className={`${style["weight-score"]} ${getWeightColor(accountSummary.accountWeight.scope)}`}
+                      >
+                        <span className={style["score-value"]}>
+                          {accountSummary.accountWeight.scope}
+                        </span>
+                        <span className={style["score-unit"]}>分</span>
+                      </div>
+                    </div>
+                    <p className={style["weight-description"]}>
+                      {getWeightDescription(accountSummary.accountWeight.scope)}
+                    </p>
+                    <div className={style["weight-items"]}>
+                      <div className={style["weight-item"]}>
+                        <span className={style["item-label"]}>账号年龄</span>
+                        <div className={style["progress-bar"]}>
+                          <div
+                            className={style["progress-fill"]}
+                            style={{
+                              width: `${accountSummary.accountWeight.ageWeight}%`,
+                            }}
+                          />
+                        </div>
+                        <span className={style["item-value"]}>
+                          {accountSummary.accountWeight.ageWeight}%
+                        </span>
+                      </div>
+                      <div className={style["weight-item"]}>
+                        <span className={style["item-label"]}>活跃度</span>
+                        <div className={style["progress-bar"]}>
+                          <div
+                            className={style["progress-fill"]}
+                            style={{
+                              width: `${accountSummary.accountWeight.activityWeigth}%`,
+                            }}
+                          />
+                        </div>
+                        <span className={style["item-value"]}>
+                          {accountSummary.accountWeight.activityWeigth}%
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* 限制记录 */}
+                {accountSummary &&
+                  accountSummary.restrictions &&
+                  accountSummary.restrictions.length > 0 && (
+                    <div className={style["restrictions-card"]}>
+                      <div className={style["restrictions-header"]}>
+                        <ExclamationCircleOutlined
+                          className={style["restrictions-icon"]}
+                        />
+                        <span className={style["restrictions-title"]}>
+                          限制记录
+                        </span>
+                        <Button
+                          size="small"
+                          fill="outline"
+                          onClick={() => setShowRestrictions(true)}
+                          className={style["restrictions-btn"]}
+                        >
+                          查看详情
+                        </Button>
+                      </div>
+                      <div className={style["restrictions-list"]}>
+                        {accountSummary.restrictions
+                          .slice(0, 3)
+                          .map((restriction) => (
+                            <div
+                              key={restriction.id}
+                              className={style["restriction-item"]}
+                            >
+                              <div className={style["restriction-info"]}>
+                                <span className={style["restriction-reason"]}>
+                                  {restriction.reason}
+                                </span>
+                                <span className={style["restriction-date"]}>
+                                  {formatDateTime(restriction.date)}
+                                </span>
+                              </div>
+                              <span
+                                className={`${style["restriction-level"]} ${getRestrictionLevelColor(restriction.level)}`}
+                              >
+                                {restriction.level === "high"
+                                  ? "高风险"
+                                  : restriction.level === "medium"
+                                    ? "中风险"
+                                    : "低风险"}
+                              </span>
+                            </div>
+                          ))}
+                      </div>
+                    </div>
+                  )}
+              </div>
+            </Tabs.Tab>
+
+            <Tabs.Tab
+              title={`好友列表${activeTab === "friends" && friendsTotal > 0 ? ` (${friendsTotal.toLocaleString()})` : ""}`}
+              key="friends"
+            >
+              <div className={style["friends-content"]}>
+                {/* 搜索栏 */}
+                <div className={style["search-bar"]}>
+                  <div className={style["search-input-wrapper"]}>
+                    <Input
+                      placeholder="搜索好友昵称/微信号"
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      prefix={<SearchOutlined />}
+                      allowClear
+                      size="large"
+                      onPressEnter={handleSearch}
+                    />
+                  </div>
+                  <Button
+                    size="small"
+                    onClick={handleSearch}
+                    loading={isFetchingFriends}
+                    className={style["search-btn"]}
+                  >
+                    <ReloadOutlined />
+                  </Button>
+                </div>
+
+                {/* 好友列表 */}
+                <div className={style["friends-list"]}>
+                  {isFriendsEmpty ? (
+                    <div className={style["empty"]}>暂无好友数据</div>
+                  ) : hasFriendLoadError ? (
+                    <div className={style["error"]}>
+                      <p>加载失败，请重试</p>
+                      <Button
+                        size="small"
+                        onClick={() => fetchFriends(1, true)}
+                      >
+                        重试
+                      </Button>
+                    </div>
+                  ) : (
+                    <>
+                      {friends.map((friend) => (
+                        <div
+                          key={friend.id}
+                          className={style["friend-item"]}
+                          onClick={() => handleFriendClick(friend)}
+                        >
+                          <Avatar
+                            src={friend.avatar}
+                            className={style["friend-avatar"]}
+                          />
+                          <div className={style["friend-info"]}>
+                            <div className={style["friend-header"]}>
+                              <div className={style["friend-name"]}>
+                                {friend.nickname}
+                                {friend.remark && (
+                                  <span className={style["friend-remark"]}>
+                                    ({friend.remark})
+                                  </span>
+                                )}
+                              </div>
+                              <RightOutlined
+                                className={style["friend-arrow"]}
+                              />
+                            </div>
+                            <div className={style["friend-wechat-id"]}>
+                              {friend.wechatId}
+                            </div>
+                            <div className={style["friend-tags"]}>
+                              {friend.tags?.map((tag, index) => (
+                                <Tag
+                                  key={index}
+                                  size="small"
+                                  className={style["friend-tag"]}
+                                >
+                                  {typeof tag === "string" ? tag : tag.name}
+                                </Tag>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                      {hasMoreFriends && !isFriendsEmpty && (
+                        <div
+                          ref={friendsLoadingRef}
+                          className={style["loading-more"]}
+                        >
+                          <SpinLoading
+                            color="primary"
+                            style={{ fontSize: 24 }}
+                          />
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            </Tabs.Tab>
+          </Tabs>
+        </Card>
+      </div>
+
+      {/* 限制记录详情弹窗 */}
+      <Popup
+        visible={showRestrictions}
+        onMaskClick={() => setShowRestrictions(false)}
+        bodyStyle={{ borderRadius: "16px 16px 0 0" }}
+      >
+        <div className={style["popup-content"]}>
+          <div className={style["popup-header"]}>
+            <h3>限制记录详情</h3>
+            <Button
+              size="small"
+              fill="outline"
+              onClick={() => setShowRestrictions(false)}
+            >
+              关闭
+            </Button>
+          </div>
+          <p className={style["popup-description"]}>每次限制恢复时间为24小时</p>
+          {accountSummary && accountSummary.restrictions && (
+            <div className={style["restrictions-detail"]}>
+              {accountSummary.restrictions.map((restriction) => (
+                <div
+                  key={restriction.id}
+                  className={style["restriction-detail-item"]}
+                >
+                  <div className={style["restriction-detail-info"]}>
+                    <div className={style["restriction-detail-reason"]}>
+                      {restriction.reason}
+                    </div>
+                    <div className={style["restriction-detail-date"]}>
+                      {formatDateTime(restriction.date)}
+                    </div>
+                  </div>
+                  <span
+                    className={`${style["restriction-detail-level"]} ${getRestrictionLevelColor(restriction.level)}`}
+                  >
+                    {restriction.level === "high"
+                      ? "高风险"
+                      : restriction.level === "medium"
+                        ? "中风险"
+                        : "低风险"}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </Popup>
+
+      {/* 好友转移确认弹窗 */}
+      <Popup
+        visible={showTransferConfirm}
+        onMaskClick={() => setShowTransferConfirm(false)}
+        bodyStyle={{ borderRadius: "16px 16px 0 0" }}
+      >
+        <div className={style["popup-content"]}>
+          <div className={style["popup-header"]}>
+            <h3>确认好友转移</h3>
+          </div>
+          <p className={style["popup-description"]}>
+            确定要将该微信号的好友转移到其他账号吗？此操作将创建一个好友转移计划。
+          </p>
+          <div className={style["popup-actions"]}>
+            <Button block color="primary" onClick={confirmTransferFriends}>
+              确认转移
+            </Button>
+            <Button
+              block
+              color="danger"
+              fill="outline"
+              onClick={() => setShowTransferConfirm(false)}
+            >
+              取消
+            </Button>
+          </div>
+        </div>
+      </Popup>
+
+      {/* 好友详情弹窗 */}
+      <Popup
+        visible={showFriendDetail}
+        onMaskClick={() => setShowFriendDetail(false)}
+        bodyStyle={{ borderRadius: "16px 16px 0 0" }}
+      >
+        <div className={style["popup-content"]}>
+          <div className={style["popup-header"]}>
+            <h3>好友详情</h3>
+            <Button
+              size="small"
+              fill="outline"
+              onClick={() => setShowFriendDetail(false)}
+            >
+              关闭
+            </Button>
+          </div>
+
+          {isLoadingFriendDetail ? (
+            <div className={style["loading-detail"]}>
+              <SpinLoading color="primary" style={{ fontSize: 32 }} />
+            </div>
+          ) : friendDetailError ? (
+            <div className={style["error-detail"]}>
+              <p>{friendDetailError}</p>
+              <Button
+                size="small"
+                onClick={() => handleFriendClick(selectedFriend!)}
+              >
+                重试
+              </Button>
+            </div>
+          ) : friendDetail && selectedFriend ? (
+            <div className={style["friend-detail-content"]}>
+              <div className={style["friend-detail-header"]}>
+                <Avatar
+                  src={selectedFriend.avatar}
+                  className={style["friend-detail-avatar"]}
+                />
+                <div className={style["friend-detail-info"]}>
+                  <h4 className={style["friend-detail-name"]}>
+                    {selectedFriend.nickname}
+                  </h4>
+                  <p className={style["friend-detail-wechat-id"]}>
+                    微信号：{selectedFriend.wechatId}
+                  </p>
+                </div>
+              </div>
+
+              <div className={style["friend-detail-items"]}>
+                <div className={style["detail-item"]}>
+                  <span className={style["detail-label"]}>地区</span>
+                  <span className={style["detail-value"]}>
+                    {friendDetail.region || "未知"}
+                  </span>
+                </div>
+                <div className={style["detail-item"]}>
+                  <span className={style["detail-label"]}>添加时间</span>
+                  <span className={style["detail-value"]}>
+                    {friendDetail.addDate}
+                  </span>
+                </div>
+                <div className={style["detail-item"]}>
+                  <span className={style["detail-label"]}>来源</span>
+                  <span className={style["detail-value"]}>
+                    {friendDetail.source || "未知"}
+                  </span>
+                </div>
+                {friendDetail.memo && (
+                  <div className={style["detail-item"]}>
+                    <span className={style["detail-label"]}>备注</span>
+                    <span className={style["detail-value"]}>
+                      {friendDetail.memo}
+                    </span>
+                  </div>
+                )}
+                {friendDetail.tags && friendDetail.tags.length > 0 && (
+                  <div className={style["detail-item"]}>
+                    <span className={style["detail-label"]}>标签</span>
+                    <div className={style["detail-tags"]}>
+                      {friendDetail.tags.map((tag, index) => (
+                        <Tag
+                          key={index}
+                          size="small"
+                          className={style["detail-tag"]}
+                        >
+                          {tag}
+                        </Tag>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </Popup>
+    </Layout>
+  );
+};
+
+export default WechatAccountDetail;

nkebao/src/pages/wechat-accounts/list/api.ts

@@ -0,0 +1,30 @@
+import request from "@/api/request";
+
+// 获取微信号列表
+export function getWechatAccounts(params: {
+  page: number;
+  page_size: number;
+  keyword?: string;
+}) {
+  return request("v1/wechats", params, "GET");
+}
+
+// 获取微信号详情
+export function getWechatAccountDetail(id: string) {
+  return request("v1/WechatAccount/detail", { id }, "GET");
+}
+
+// 获取微信号好友列表
+export function getWechatFriends(params: {
+  wechatAccountKeyword: string;
+  pageIndex: number;
+  pageSize: number;
+  friendKeyword?: string;
+}) {
+  return request("v1/WechatFriend/friendlistData", params, "POST");
+}
+
+// 获取微信好友详情
+export function getWechatFriendDetail(id: string) {
+  return request("v1/WechatFriend/detail", { id }, "GET");
+}

nkebao/src/pages/wechat-accounts/list/index.module.scss

@@ -0,0 +1,171 @@
+.wechat-accounts-page {
+  padding: 0 12px;
+}
+
+.nav-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #222;
+}
+
+.card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.account-card {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  padding: 14px 14px 10px 14px;
+  transition: box-shadow 0.2s;
+  cursor: pointer;
+  border: 1px solid #f0f0f0;
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+    border-color: #e6f7ff;
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.avatar-wrapper {
+  position: relative;
+  margin-right: 12px;
+}
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 3px solid #e6f0fa;
+  box-shadow: 0 0 0 2px #1677ff33;
+  object-fit: cover;
+}
+.status-dot-normal {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 14px;
+  height: 14px;
+  background: #52c41a;
+  border: 2px solid #fff;
+  border-radius: 50%;
+}
+.status-dot-abnormal {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 14px;
+  height: 14px;
+  background: #ff4d4f;
+  border: 2px solid #fff;
+  border-radius: 50%;
+}
+.header-info {
+  flex: 1;
+  min-width: 0;
+}
+.nickname-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.nickname {
+  font-weight: 600;
+  font-size: 16px;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.status-label-normal {
+  background: #e6fffb;
+  color: #13c2c2;
+  font-size: 12px;
+  border-radius: 8px;
+  padding: 2px 8px;
+  margin-left: 4px;
+}
+.status-label-abnormal {
+  background: #fff1f0;
+  color: #ff4d4f;
+  font-size: 12px;
+  border-radius: 8px;
+  padding: 2px 8px;
+  margin-left: 4px;
+}
+.wechat-id {
+  color: #888;
+  font-size: 13px;
+  margin-top: 2px;
+}
+.card-action {
+  margin-left: 8px;
+}
+.card-body {
+  margin-top: 2px;
+}
+.row-group {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  gap: 8px;
+}
+.row-item {
+  font-size: 13px;
+  color: #555;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.strong {
+  font-weight: 600;
+  color: #222;
+}
+.strong-green {
+  font-weight: 600;
+  color: #52c41a;
+}
+.progress-bar {
+  margin: 6px 0 8px 0;
+}
+.progress-bg {
+  width: 100%;
+  height: 8px;
+  background: #f0f0f0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 8px;
+  background: linear-gradient(90deg, #1677ff 0%, #69c0ff 100%);
+  border-radius: 6px;
+  transition: width 0.3s;
+}
+.pagination {
+  margin: 16px 0 0 0;
+  display: flex;
+  justify-content: center;
+}
+.popup-content {
+  padding: 16px 0 8px 0;
+}
+.popup-content img {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+.empty {
+  text-align: center;
+  color: #999;
+  padding: 48px 0 32px 0;
+  font-size: 15px;
+}

nkebao/src/pages/wechat-accounts/list/index.tsx

@@ -0,0 +1,309 @@
+import React, { useState, useEffect } from "react";
+import {
+  NavBar,
+  List,
+  Card,
+  Button,
+  SpinLoading,
+  Popup,
+  Toast,
+} from "antd-mobile";
+import { Pagination, Input, Tooltip } from "antd";
+import {
+  ArrowLeftOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+} from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import Layout from "@/components/Layout/Layout";
+import style from "./index.module.scss";
+import { getWechatAccounts } from "./api";
+
+interface WechatAccount {
+  id: number;
+  nickname: string;
+  avatar: string;
+  wechatId: string;
+  wechatAccount: string;
+  deviceId: number;
+  times: number; // 今日可添加
+  addedCount: number; // 今日新增
+  wechatStatus: number; // 1正常 0异常
+  totalFriend: number;
+  deviceMemo: string; // 设备名
+  activeTime: string; // 最后活跃
+}
+
+const PAGE_SIZE = 10;
+
+const WechatAccounts: React.FC = () => {
+  const navigate = useNavigate();
+  const [accounts, setAccounts] = useState<WechatAccount[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalAccounts, setTotalAccounts] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [selectedAccount, setSelectedAccount] = useState<WechatAccount | null>(
+    null
+  );
+
+  const fetchAccounts = async (page = 1, keyword = "") => {
+    setIsLoading(true);
+    try {
+      const res = await getWechatAccounts({
+        page,
+        page_size: PAGE_SIZE,
+        keyword,
+      });
+      if (res && res.list) {
+        setAccounts(res.list);
+        setTotalAccounts(res.total || 0);
+      } else {
+        setAccounts([]);
+        setTotalAccounts(0);
+      }
+    } catch (e) {
+      Toast.show({ content: "获取微信号失败", position: "top" });
+      setAccounts([]);
+      setTotalAccounts(0);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAccounts(currentPage, searchTerm);
+    // eslint-disable-next-line
+  }, [currentPage]);
+
+  const handleSearch = () => {
+    setCurrentPage(1);
+    fetchAccounts(1, searchTerm);
+  };
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await fetchAccounts(currentPage, searchTerm);
+    setIsRefreshing(false);
+    Toast.show({ content: "刷新成功", position: "top" });
+  };
+
+  const handleAccountClick = (account: WechatAccount) => {
+    setSelectedAccount(account);
+    setPopupVisible(true);
+  };
+
+  const handleTransferFriends = (account: WechatAccount) => {
+    // TODO: 实现好友转移弹窗或跳转
+    Toast.show({ content: `好友转移：${account.nickname}` });
+  };
+
+  return (
+    <Layout
+      header={
+        <>
+          <NavBar
+            back={null}
+            style={{ background: "#fff" }}
+            left={
+              <div className={style["nav-title"]}>
+                <ArrowLeftOutlined
+                  twoToneColor="#1677ff"
+                  onClick={() => navigate(-1)}
+                />
+              </div>
+            }
+          >
+            <span className={style["nav-title"]}>微信号管理</span>
+          </NavBar>
+          <div className="search-bar">
+            <div className="search-input-wrapper">
+              <Input
+                placeholder="搜索微信号/昵称"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
+                onPressEnter={handleSearch}
+              />
+            </div>
+            <Button
+              size="small"
+              onClick={handleRefresh}
+              loading={isRefreshing}
+              className="refresh-btn"
+            >
+              <ReloadOutlined />
+            </Button>
+          </div>
+        </>
+      }
+    >
+      <div className={style["wechat-accounts-page"]}>
+        {isLoading ? (
+          <div className={style["loading"]}>
+            <SpinLoading color="primary" style={{ fontSize: 32 }} />
+          </div>
+        ) : accounts.length === 0 ? (
+          <div className={style["empty"]}>暂无微信账号数据</div>
+        ) : (
+          <div className={style["card-list"]}>
+            {accounts.map((account) => {
+              const percent =
+                account.times > 0
+                  ? Math.min((account.addedCount / account.times) * 100, 100)
+                  : 0;
+              return (
+                <div
+                  key={account.id}
+                  className={style["account-card"]}
+                  onClick={() => handleAccountClick(account)}
+                >
+                  <div className={style["card-header"]}>
+                    <div className={style["avatar-wrapper"]}>
+                      <img
+                        src={account.avatar}
+                        alt={account.nickname}
+                        className={style["avatar"]}
+                      />
+                      <span
+                        className={
+                          account.wechatStatus === 1
+                            ? style["status-dot-normal"]
+                            : style["status-dot-abnormal"]
+                        }
+                      />
+                    </div>
+                    <div className={style["header-info"]}>
+                      <div className={style["nickname-row"]}>
+                        <span className={style["nickname"]}>
+                          {account.nickname}
+                        </span>
+                        <span
+                          className={
+                            account.wechatStatus === 1
+                              ? style["status-label-normal"]
+                              : style["status-label-abnormal"]
+                          }
+                        >
+                          {account.wechatStatus === 1 ? "正常" : "异常"}
+                        </span>
+                      </div>
+                      <div className={style["wechat-id"]}>
+                        微信号：{account.wechatAccount}
+                      </div>
+                    </div>
+                  </div>
+                  <div className={style["card-body"]}>
+                    <div className={style["row-group"]}>
+                      <div className={style["row-item"]}>
+                        <span>好友数量：</span>
+                        <span className={style["strong"]}>
+                          {account.totalFriend}
+                        </span>
+                      </div>
+                      <div className={style["row-item"]}>
+                        <span>今日新增：</span>
+                        <span className={style["strong-green"]}>
+                          +{account.addedCount}
+                        </span>
+                      </div>
+                    </div>
+                    <div className={style["row-group"]}>
+                      <div className={style["row-item"]}>
+                        <span>今日可添加：</span>
+                        <span>{account.times}</span>
+                      </div>
+                      <div className={style["row-item"]}>
+                        <Tooltip title={`每日最多添加 ${account.times} 个好友`}>
+                          <span>进度：</span>
+                          <span>
+                            {account.addedCount}/{account.times}
+                          </span>
+                        </Tooltip>
+                      </div>
+                    </div>
+                    <div className={style["progress-bar"]}>
+                      <div className={style["progress-bg"]}>
+                        <div
+                          className={style["progress-fill"]}
+                          style={{ width: `${percent}%` }}
+                        />
+                      </div>
+                    </div>
+                    <div className={style["row-group"]}>
+                      <div className={style["row-item"]}>
+                        <span>所属设备：</span>
+                        <span>{account.deviceMemo || "-"}</span>
+                      </div>
+                      <div className={style["row-item"]}>
+                        <span>最后活跃：</span>
+                        <span>{account.activeTime}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <div className={style["pagination"]}>
+          {totalAccounts > PAGE_SIZE && (
+            <Pagination
+              total={Math.ceil(totalAccounts / PAGE_SIZE)}
+              current={currentPage}
+              onChange={setCurrentPage}
+            />
+          )}
+        </div>
+        <Popup
+          visible={popupVisible}
+          onMaskClick={() => setPopupVisible(false)}
+          bodyStyle={{ borderRadius: "16px 16px 0 0" }}
+        >
+          {selectedAccount && (
+            <div className={style["popup-content"]}>
+              <div style={{ textAlign: "center", margin: 16 }}>
+                <img
+                  src={selectedAccount.avatar}
+                  alt="avatar"
+                  style={{ width: 60, height: 60, borderRadius: 30 }}
+                />
+                <div style={{ fontWeight: 600, marginTop: 8 }}>
+                  {selectedAccount.nickname}
+                </div>
+                <div style={{ color: "#888", fontSize: 12 }}>
+                  微信号：{selectedAccount.wechatAccount}
+                </div>
+              </div>
+              <div style={{ margin: 16 }}>
+                <Button
+                  block
+                  color="primary"
+                  onClick={() => {
+                    navigate(`/wechat-accounts/detail/${selectedAccount.id}`);
+                  }}
+                >
+                  查看详情
+                </Button>
+              </div>
+              <Button
+                block
+                color="danger"
+                fill="outline"
+                onClick={() => setPopupVisible(false)}
+              >
+                关闭
+              </Button>
+            </div>
+          )}
+        </Popup>
+      </div>
+    </Layout>
+  );
+};
+
+export default WechatAccounts;

nkebao/src/pages/workspace/moments-sync/new/api.ts

@@ -0,0 +1,32 @@
+import request from "@/api/request";
+
+// 创建朋友圈同步任务
+export const createMomentsSync = (params: {
+  name: string;
+  devices: string[];
+  contentLibraries: string[];
+  syncCount: number;
+  startTime: string;
+  endTime: string;
+  accountType: number;
+  status: number;
+  type: number;
+}) => request("/v1/workbench/create", params, "POST");
+
+// 更新朋友圈同步任务
+export const updateMomentsSync = (params: {
+  id: string;
+  name: string;
+  devices: string[];
+  contentLibraries: string[];
+  syncCount: number;
+  startTime: string;
+  endTime: string;
+  accountType: number;
+  status: number;
+  type: number;
+}) => request("/v1/workbench/update", params, "POST");
+
+// 获取朋友圈同步任务详情
+export const getMomentsSyncDetail = (id: string) =>
+  request("/v1/workbench/detail", { id }, "GET");

nkebao/src/pages/workspace/moments-sync/new/index.module.scss

@@ -84,7 +84,7 @@
 }
 
 .inputTime {
-  width: 90px;
+  width: 100px;
   height: 40px;
   border-radius: 8px;
   font-size: 15px;

nkebao/src/pages/workspace/moments-sync/new/index.tsx

@@ -7,8 +7,19 @@ import { NavBar } from "antd-mobile";
 import Layout from "@/components/Layout/Layout";
 import style from "./index.module.scss";
 import request from "@/api/request";
+import StepIndicator from "@/components/StepIndicator";
+import {
+  createMomentsSync,
+  updateMomentsSync,
+  getMomentsSyncDetail,
+} from "./api";
+import DeviceSelection from "@/components/DeviceSelection";
 
-const steps = ["基础设置", "设备选择", "内容库选择"];
+const steps = [
+  { id: 1, title: "基础设置", subtitle: "基础设置" },
+  { id: 2, title: "设备选择", subtitle: "设备选择" },
+  { id: 3, title: "内容库选择", subtitle: "内容库选择" },
+];
 
 const defaultForm = {
   taskName: "",
@@ -34,7 +45,7 @@ const NewMomentsSync: React.FC = () => {
     if (!id) return;
     setLoading(true);
     try {
-      const res = await request("/v1/workbench/detail", { id }, "GET");
+      const res = await getMomentsSyncDetail(id);
       if (res) {
         setFormData({
           taskName: res.name,
@@ -95,11 +106,11 @@ const NewMomentsSync: React.FC = () => {
         type: 2,
       };
       if (isEditMode && id) {
-        await request("/v1/workbench/update", { id, ...params }, "POST");
+        await updateMomentsSync({ id, ...params });
         message.success("更新成功");
         navigate(`/workspace/moments-sync/${id}`);
       } else {
-        await request("/v1/workbench/create", params, "POST");
+        await createMomentsSync(params);
         message.success("创建成功");
         navigate("/workspace/moments-sync");
       }
@@ -214,18 +225,14 @@ const NewMomentsSync: React.FC = () => {
       return (
         <div className={style.formStep}>
           <div className={style.formItem}>
-            <Input
-              placeholder="选择设备"
-              prefix={<span className={style.searchIcon}>Q</span>}
-              className={style.searchInput}
-              onClick={() => message.info("这里应弹出设备选择器")}
-              readOnly
+            <div className={style.formLabel}>选择设备</div>
+            <DeviceSelection
+              selectedDevices={formData.selectedDevices}
+              onSelect={(devices) => updateForm({ selectedDevices: devices })}
+              placeholder="请选择设备"
+              showSelectedList={true}
+              selectedListMaxHeight={200}
             />
-            {formData.selectedDevices.length > 0 && (
-              <div className={style.selectedTip}>
-                已选设备: {formData.selectedDevices.length}个
-              </div>
-            )}
           </div>
           <div className={style.formStepBtnRow}>
             <Button onClick={prev} className={style.prevBtn}>
@@ -294,25 +301,7 @@ const NewMomentsSync: React.FC = () => {
       }
     >
       <div className={style.formBg}>
-        <div className={style.formSteps}>
-          {steps.map((s, i) => (
-            <div
-              key={s}
-              className={
-                style.formStepIndicator +
-                " " +
-                (i === currentStep
-                  ? style.formStepActive
-                  : i < currentStep
-                    ? style.formStepDone
-                    : "")
-              }
-            >
-              <span className={style.formStepNum}>{i + 1}</span>
-              <span>{s}</span>
-            </div>
-          ))}
-        </div>
+        <StepIndicator currentStep={currentStep + 1} steps={steps} />
         {loading ? (
           <div className={style.formLoading}>
             <Spin />

nkebao/src/router/module/component-test.tsx

@@ -0,0 +1,11 @@
+import ComponentTest from "@/pages/component-test";
+
+const componentTestRoutes = [
+  {
+    path: "/component-test",
+    element: <ComponentTest />,
+    auth: true,
+  },
+];
+
+export default componentTestRoutes;

nkebao/src/router/module/index.tsx

@@ -1,5 +1,7 @@
 import Home from "@/pages/home/index";
 import Mine from "@/pages/mine/index";
+import WechatAccounts from "@/pages/wechat-accounts/list/index";
+import WechatAccountDetail from "@/pages/wechat-accounts/detail/index";
 
 const routes = [
   // 基础路由
@@ -13,6 +15,17 @@ const routes = [
     element: <Mine />,
     auth: true,
   },
+  // 微信号管理路由
+  {
+    path: "/wechat-accounts",
+    element: <WechatAccounts />,
+    auth: true,
+  },
+  {
+    path: "/wechat-accounts/detail/:id",
+    element: <WechatAccountDetail />,
+    auth: true,
+  },
 ];
 
 export default routes;

nkebao/src/router/module/wechat-accounts.tsx

@@ -1,17 +1,17 @@
-import WechatAccounts from "@/pages/wechat-accounts/WechatAccounts";
-import WechatAccountDetail from "@/pages/wechat-accounts/WechatAccountDetail";
-
-const wechatAccountRoutes = [
-  {
-    path: "/wechat-accounts",
-    element: <WechatAccounts />,
-    auth: true,
-  },
-  {
-    path: "/wechat-accounts/:id",
-    element: <WechatAccountDetail />,
-    auth: true,
-  },
-];
-
-export default wechatAccountRoutes;
+import WechatAccounts from "@/pages/wechat-accounts/list";
+import WechatAccountDetail from "@/pages/wechat-accounts/detail";
+
+const wechatAccountRoutes = [
+  {
+    path: "/wechat-accounts",
+    element: <WechatAccounts />,
+    auth: true,
+  },
+  {
+    path: "/wechat-accounts/detail/:id",
+    element: <WechatAccountDetail />,
+    auth: true,
+  },
+];
+
+export default wechatAccountRoutes;