Refactor MomentPublish component: update styling for account cards, enhance selected state visuals, and switch to customer store for account data management.

2026-01-04 12:07:17 +08:00
parent 5ae0d997d9
commit 53b679aeb6
3 changed files with 133 additions and 34 deletions
--- a/1
+++ b/1
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/MomentPublish.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/MomentPublish.module.scss
@@ -31,41 +31,86 @@

    .accountCard {
      flex: 1;
-      min-width: 120px;
+      max-width: 140px;
      cursor: pointer;
-      border: 2px solid #f0f0f0;
-      border-radius: 8px;
+      border: 2px solid #e8e8e8;
+      border-radius: 12px;
      transition: all 0.3s;
      position: relative;
+      background: #fff;

-      &:hover:not(.disabled) {
+      &:hover:not(.disabled):not(.selected) {
        border-color: #d9d9d9;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        transform: translateY(-2px);
      }

      &.selected {
        border-color: #1890ff;
-        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
+        box-shadow:
+          0 0 0 3px rgba(24, 144, 255, 0.15),
+          0 4px 12px rgba(24, 144, 255, 0.2);
      }

      &.disabled {
-        opacity: 0.6;
+        opacity: 0.5;
        cursor: not-allowed;
        background-color: #fafafa;
+        border-color: #f0f0f0;
      }

-      :global(.ant-card-body) {
-        padding: 16px;
-      }
+      padding: 20px 16px;

      .accountInfo {
        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .avatarWrapper {
+          position: relative;
+          margin-bottom: 12px;
+
+          .accountAvatar {
+            border: 3px solid #e8e8e8;
+            transition: all 0.3s;
+          }
+
+          .selectedIndicator {
+            position: absolute;
+            bottom: -2px;
+            right: -2px;
+            width: 24px;
+            height: 24px;
+            background: #1890ff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 3px solid #fff;
+            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
+
+            .checkIcon {
+              color: #fff;
+              font-size: 14px;
+              font-weight: bold;
+              line-height: 1;
+            }
+          }
+        }
+
+        .accountCard.selected .avatarWrapper .accountAvatar {
+          border-color: #1890ff;
+          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }

        .accountName {
          font-size: 14px;
          font-weight: 500;
          color: #262626;
          margin-bottom: 8px;
+          transition: color 0.3s;
        }

        .usageBadge {
@@ -75,6 +120,7 @@
            height: 20px;
            line-height: 18px;
            border-radius: 10px;
+            padding: 0 8px;
          }
        }

@@ -84,6 +130,19 @@
          margin-top: 4px;
        }
      }
+
+      // 选中状态下的样式增强
+      &.selected .accountInfo {
+        .accountName {
+          color: #1890ff;
+          font-weight: 600;
+        }
+
+        .avatarWrapper .accountAvatar {
+          border-color: #1890ff;
+          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+      }
    }
  }

--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/MomentPublish.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/MomentPublish.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { Button, Input, Select, message, Card, Badge } from "antd";
-import { useCkChatStore } from "@/store/module/ckchat/ckchat";
+import { Button, Input, Select, message, Badge, Avatar } from "antd";
+import { useCustomerStore, updateCustomerList } from "@weChatStore/customer";
+import { getCustomerList } from "@apiModule/wechat";
 import { addMoment } from "./api";
 import styles from "./MomentPublish.module.scss";
 import { KfUserListData } from "@/pages/pc/ckbox/data";
@@ -24,44 +25,60 @@ const MomentPublish: React.FC<MomentPublishProps> = ({ onPublishSuccess }) => {
  const [linkUrl, setLinkUrl] = useState<string>("");
  const [accounts, setAccounts] = useState<KfUserListData[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
+  const [customerListLoading, setCustomerListLoading] =
+    useState<boolean>(false);

  // 从store获取客服列表
-  const kfUserList = useCkChatStore(state => state.kfUserList);
+  const customerList = useCustomerStore(state => state.customerList);
+
+  // 初始化获取客服列表
+  useEffect(() => {
+    const fetchCustomerList = async () => {
+      setCustomerListLoading(true);
+      try {
+        const res = await getCustomerList();
+        updateCustomerList(res);
+      } catch (error) {
+        console.error("获取客服列表失败:", error);
+        message.error("获取客服列表失败");
+      } finally {
+        setCustomerListLoading(false);
+      }
+    };
+
+    // 如果客服列表为空，则获取
+    if (customerList.length === 0) {
+      fetchCustomerList();
+    }
+  }, []);

  // 获取账号使用情况
  const fetchAccountUsage = useCallback(async () => {
-    if (kfUserList.length === 0) return;
+    if (customerList.length === 0) return;

    // 直接使用客服列表数据，不需要额外的API调用
-    const accountData = kfUserList.map((kf, index) => ({
-      ...kf,
-      name: kf.nickname || `客服${index + 1}`,
-      isSelected: selectedAccounts.includes(kf.id.toString()),
-      isDisabled: kf.momentsNum >= kf.momentsMax,
+    const accountData = customerList.map((customer, index) => ({
+      ...customer,
+      name: customer.nickname || `客服${index + 1}`,
+      isSelected: selectedAccounts.includes(customer.id.toString()),
+      isDisabled: customer.momentsNum >= customer.momentsMax,
    }));

    setAccounts(accountData);
-  }, [kfUserList, selectedAccounts]);
+  }, [customerList, selectedAccounts]);

-  // 如果没有选中的账号且有可用账号，自动选择第一个可用账号
-  useEffect(() => {
-    if (selectedAccounts.length === 0 && accounts.length > 0) {
-      const firstAvailable = accounts.find(acc => !acc.isDisabled);
-      if (firstAvailable) {
-        setSelectedAccounts([firstAvailable.id.toString()]);
-      }
-    }
-  }, [accounts, selectedAccounts.length]);
+  // 移除自动选择逻辑，允许用户手动选择或取消选择

  // 当客服列表变化时，重新获取使用情况
  useEffect(() => {
    fetchAccountUsage();
-  }, [kfUserList, selectedAccounts, fetchAccountUsage]);
+  }, [customerList, selectedAccounts, fetchAccountUsage]);

  const handleAccountSelect = (accountId: string) => {
    const account = accounts.find(acc => acc.id.toString() === accountId);
    if (!account || account.isDisabled) return;

+    // 允许取消选择：如果已选中则取消，未选中则选中
    setSelectedAccounts(prev =>
      prev.includes(accountId)
        ? prev.filter(id => id !== accountId)
@@ -146,8 +163,13 @@ const MomentPublish: React.FC<MomentPublishProps> = ({ onPublishSuccess }) => {
      setLinkImage("");
      setLinkUrl("");
      setTimingTime("");
-      // 重新获取账号使用情况
-      await fetchAccountUsage();
+      // 重新获取客服列表以更新使用情况
+      try {
+        const res = await getCustomerList();
+        updateCustomerList(res);
+      } catch (error) {
+        console.error("刷新客服列表失败:", error);
+      }
      // 触发父组件的刷新回调
      onPublishSuccess?.();
    } catch (error) {
@@ -167,7 +189,7 @@ const MomentPublish: React.FC<MomentPublishProps> = ({ onPublishSuccess }) => {
        <h4 className={styles.sectionTitle}>选择发布账号</h4>
        <div className={styles.accountList}>
          {accounts.map(account => (
-            <Card
+            <div
              key={account.id}
              className={`${styles.accountCard} ${
                selectedAccounts.includes(account.id.toString())
@@ -177,6 +199,23 @@ const MomentPublish: React.FC<MomentPublishProps> = ({ onPublishSuccess }) => {
              onClick={() => handleAccountSelect(account.id.toString())}
            >
              <div className={styles.accountInfo}>
+                <div className={styles.avatarWrapper}>
+                  <Avatar
+                    src={account.avatar}
+                    size={56}
+                    className={styles.accountAvatar}
+                    style={{
+                      backgroundColor: !account.avatar ? "#1890ff" : undefined,
+                    }}
+                  >
+                    {!account.avatar && account.name?.charAt(0)}
+                  </Avatar>
+                  {selectedAccounts.includes(account.id.toString()) && (
+                    <div className={styles.selectedIndicator}>
+                      <span className={styles.checkIcon}>✓</span>
+                    </div>
+                  )}
+                </div>
                <div className={styles.accountName}>{account.name}</div>
                <Badge
                  count={`${account.momentsNum}/${account.momentsMax}`}
@@ -189,7 +228,7 @@ const MomentPublish: React.FC<MomentPublishProps> = ({ onPublishSuccess }) => {
                  <div className={styles.limitText}>今日已达上限</div>
                )}
              </div>
-            </Card>
+            </div>
          ))}
        </div>
      </div>