更新設備選擇組件，新增設備頭像和好友數據顯示，調整樣式以提升用戶體驗，並更新相關數據結構以支持新屬性。

2025-08-13 12:18:43 +08:00
parent 4e78eb6c5e
commit e2dfd44874
11 changed files with 489 additions and 119 deletions
--- a/Cunkebao/dist/.vite/manifest.json
+++ b/Cunkebao/dist/.vite/manifest.json
@@ -33,7 +33,7 @@
    "name": "vendor"
  },
  "index.html": {
-    "file": "assets/index-D3HSx5Yt.js",
+    "file": "assets/index-DTZ_ow5W.js",
    "name": "index",
    "src": "index.html",
    "isEntry": true,
--- a/Cunkebao/dist/index.html
+++ b/Cunkebao/dist/index.html
@@ -11,7 +11,7 @@
    </style>
    <!-- 引入 uni-app web-view SDK（必须） -->
    <script type="text/javascript" src="./websdk.js"></script>
-    <script type="module" crossorigin src="/assets/index-D3HSx5Yt.js"></script>
+    <script type="module" crossorigin src="/assets/index-DTZ_ow5W.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-2vc8h_ct.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-D1w-jetn.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-6WF66_dS.js">
--- a/Cunkebao/src/components/DeviceSelection/data.ts
+++ b/Cunkebao/src/components/DeviceSelection/data.ts
@@ -8,6 +8,8 @@ export interface DeviceSelectionItem {
  wxid?: string;
  nickname?: string;
  usedInPlans?: number;
+  avatar?: string;
+  totalFriend?: number;
 }

 // 组件属性接口
--- a/Cunkebao/src/components/DeviceSelection/index.module.scss
+++ b/Cunkebao/src/components/DeviceSelection/index.module.scss
@@ -67,60 +67,154 @@
 }
 .deviceItem {
  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  border-radius: 12px;
-  border: 1px solid #f0f0f0;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
  background: #fff;
-  cursor: pointer;
-  transition: background 0.2s;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
+  border: 1px solid #f5f5f5;
+
  &:hover {
-    background: #f5f6fa;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.checkboxContainer {
+  flex-shrink: 0;
+}
+
+.imeiText {
+  font-size: 13px;
+  color: #666;
+  font-family: monospace;
+  flex: 1;
+}
+
+.mainContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f8f9fa;
  }
 }
 .deviceCheckbox {
-  margin-top: 4px;
+  flex-shrink: 0;
 }
 .deviceInfo {
  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
+.deviceAvatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatarText {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 700;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.deviceContent {
+  flex: 1;
+  min-width: 0;
+}
+
 .deviceInfoRow {
  display: flex;
  align-items: center;
-  justify-content: space-between;
+  gap: 6px;
+  margin-bottom: 6px;
 }
 .deviceName {
-  font-weight: 500;
  font-size: 16px;
-  color: #222;
+  font-weight: 600;
+  color: #1a1a1a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .statusOnline {
-  width: 56px;
-  height: 24px;
-  border-radius: 12px;
-  background: #52c41a;
-  color: #fff;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  color: #52c41a;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  font-weight: 500;
 }
 .statusOffline {
-  width: 56px;
-  height: 24px;
-  border-radius: 12px;
-  background: #e5e6eb;
-  color: #888;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  color: #ff4d4f;
+  background: #fff2f0;
+  border: 1px solid #ffccc7;
+  font-weight: 500;
 }
 .deviceInfoDetail {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.infoLabel {
  font-size: 13px;
-  color: #888;
-  margin-top: 4px;
+  color: #666;
+  min-width: 50px;
+}
+
+.infoValue {
+  font-size: 13px;
+  color: #333;
+
+  &.imei {
+    font-family: monospace;
+  }
+
+  &.friendCount {
+    font-weight: 500;
+  }
 }
 .loadingBox {
  display: flex;
--- a/Cunkebao/src/components/DeviceSelection/index.tsx
+++ b/Cunkebao/src/components/DeviceSelection/index.tsx
@@ -86,11 +86,52 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
              style={{
                display: "flex",
                alignItems: "center",
-                padding: "4px 8px",
+                padding: "8px 12px",
                borderBottom: "1px solid #f0f0f0",
                fontSize: 14,
              }}
            >
+              {/* 头像 */}
+              <div
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: "6px",
+                  background:
+                    "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  overflow: "hidden",
+                  boxShadow: "0 2px 8px rgba(102, 126, 234, 0.25)",
+                  marginRight: "12px",
+                  flexShrink: 0,
+                }}
+              >
+                {device.avatar ? (
+                  <img
+                    src={device.avatar}
+                    alt="头像"
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                    }}
+                  />
+                ) : (
+                  <span
+                    style={{
+                      fontSize: 16,
+                      color: "#fff",
+                      fontWeight: 700,
+                      textShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                    }}
+                  >
+                    {(device.memo || device.wechatId || "设")[0]}
+                  </span>
+                )}
+              </div>
+
              <div
                style={{
                  flex: 1,
@@ -100,7 +141,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
                  textOverflow: "ellipsis",
                }}
              >
-                【 {device.memo}】 - {device.wechatId}
+                {device.memo} - {device.wechatId}
              </div>
              {!readonly && (
                <Button
--- a/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
+++ b/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
@@ -51,6 +51,8 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
              wxid: d.wechatId || "",
              nickname: d.nickname || "",
              usedInPlans: d.usedInPlans || 0,
+              avatar: d.avatar || "",
+              totalFriend: d.totalFriend || 0,
            })),
          );
          setTotal(res.total || 0);
@@ -161,31 +163,67 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
          ) : (
            <div className={style.deviceListInner}>
              {filteredDevices.map(device => (
-                <label key={device.id} className={style.deviceItem}>
-                  <Checkbox
-                    checked={selectedOptions.some(v => v.id === device.id)}
-                    onChange={() => handleDeviceToggle(device)}
-                    className={style.deviceCheckbox}
-                  />
-                  <div className={style.deviceInfo}>
-                    <div className={style.deviceInfoRow}>
-                      <span className={style.deviceName}>{device.memo}</span>
-                      <div
-                        className={
-                          device.status === "online"
-                            ? style.statusOnline
-                            : style.statusOffline
-                        }
-                      >
-                        {device.status === "online" ? "在线" : "离线"}
+                <div key={device.id} className={style.deviceItem}>
+                  {/* 顶部行：选择框和IMEI */}
+                  <div className={style.headerRow}>
+                    <div className={style.checkboxContainer}>
+                      <Checkbox
+                        checked={selectedOptions.some(v => v.id === device.id)}
+                        onChange={() => handleDeviceToggle(device)}
+                        className={style.deviceCheckbox}
+                      />
+                    </div>
+                    <span className={style.imeiText}>
+                      IMEI: {device.imei?.toUpperCase()}
+                    </span>
+                  </div>
+
+                  {/* 主要内容区域：头像和详细信息 */}
+                  <div className={style.mainContent}>
+                    {/* 头像 */}
+                    <div className={style.deviceAvatar}>
+                      {device.avatar ? (
+                        <img src={device.avatar} alt="头像" />
+                      ) : (
+                        <span className={style.avatarText}>
+                          {(device.memo || device.wechatId || "设")[0]}
+                        </span>
+                      )}
+                    </div>
+
+                    {/* 设备信息 */}
+                    <div className={style.deviceContent}>
+                      <div className={style.deviceInfoRow}>
+                        <span className={style.deviceName}>{device.memo}</span>
+                        <div
+                          className={
+                            device.status === "online"
+                              ? style.statusOnline
+                              : style.statusOffline
+                          }
+                        >
+                          {device.status === "online" ? "在线" : "离线"}
+                        </div>
+                      </div>
+                      <div className={style.deviceInfoDetail}>
+                        <div className={style.infoItem}>
+                          <span className={style.infoLabel}>微信号:</span>
+                          <span className={style.infoValue}>
+                            {device.wechatId}
+                          </span>
+                        </div>
+                        <div className={style.infoItem}>
+                          <span className={style.infoLabel}>好友数:</span>
+                          <span
+                            className={`${style.infoValue} ${style.friendCount}`}
+                          >
+                            {device.totalFriend ?? "-"}
+                          </span>
+                        </div>
                      </div>
                    </div>
-                    <div className={style.deviceInfoDetail}>
-                      <div>IMEI: {device.imei}</div>
-                      <div>微信号: {device.wechatId}</div>
-                    </div>
                  </div>
-                </label>
+                </div>
              ))}
            </div>
          )}
--- a/Cunkebao/src/pages/mobile/mine/content/form/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/content/form/index.tsx
@@ -62,9 +62,7 @@ export default function ContentForm() {
          setSelectedFriends(data.sourceFriends || []);
          setSelectedGroups(data.selectedGroups || []);
          setSelectedGroupsOptions(data.selectedGroupsOptions || []);
-
-          setSelectedFriendsOptions(data.sourceFriendsOptions || []);
-
+          setSelectedFriendsOptions(data.friendsGroupsOptions || []);
          setKeywordsInclude((data.keywordInclude || []).join(","));
          setKeywordsExclude((data.keywordExclude || []).join(","));
          setAIPrompt(data.aiPrompt || "");
--- a/Cunkebao/src/pages/mobile/mine/content/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/content/list/index.tsx
@@ -132,7 +132,7 @@ const ContentLibraryList: React.FC = () => {
  };

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

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

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

--- a/Cunkebao/src/types/device.ts
+++ b/Cunkebao/src/types/device.ts
@@ -11,6 +11,7 @@ export interface Device {
  nickname?: string;
  battery?: number;
  lastActive?: string;
+  avatar?: string;
  features?: {
    autoAddFriend?: boolean;
    autoReply?: boolean;