Merge branch 'yongpxu-dev' into yongpxu-dev2

# Conflicts: # nkebao/.env.development resolved by yongpxu-dev version # nkebao/src/components/SelectionTest.tsx resolved by yongpxu-dev2 version
2025-07-22 19:24:15 +08:00
parent 7445840fdf 00900e1ea3
commit e1c32aff0e
11 changed files with 1255 additions and 212 deletions
--- a/nkebao/src/components/FriendSelection/index.module.scss
+++ b/nkebao/src/components/FriendSelection/index.module.scss
@@ -205,13 +205,21 @@
 }

 .popupFooter {
-  border-top: 1px solid #f0f0f0;
-  padding: 16px;
  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;
+}
 .cancelBtn {
  padding: 0 24px;
  border-radius: 24px;
--- a/nkebao/src/components/FriendSelection/index.tsx
+++ b/nkebao/src/components/FriendSelection/index.tsx
@@ -1,11 +1,7 @@
 import React, { useState, useEffect } from "react";
-import {
-  SearchOutlined,
-  CloseOutlined,
-  LeftOutlined,
-  RightOutlined,
-} from "@ant-design/icons";
-import { Input, Button, Popup, Toast } from "antd-mobile";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Popup, Toast } from "antd-mobile";
+import { Button, Input } from "antd";
 import { getFriendList } from "./api";
 import style from "./index.module.scss";

@@ -29,6 +25,11 @@ interface FriendSelectionProps {
  className?: string;
  visible?: boolean; // 新增
  onVisibleChange?: (visible: boolean) => void; // 新增
+  selectedListMaxHeight?: number;
+  showInput?: boolean;
+  showSelectedList?: boolean;
+  readonly?: boolean;
+  onConfirm?: (selectedIds: string[], selectedItems: WechatFriend[]) => void; // 新增
 }

 export default function FriendSelection({
@@ -41,6 +42,11 @@ export default function FriendSelection({
  className = "",
  visible,
  onVisibleChange,
+  selectedListMaxHeight = 300,
+  showInput = true,
+  showSelectedList = true,
+  readonly = false,
+  onConfirm,
 }: FriendSelectionProps) {
  const [popupVisible, setPopupVisible] = useState(false);
  const [friends, setFriends] = useState<WechatFriend[]>([]);
@@ -59,6 +65,7 @@ export default function FriendSelection({

  // 打开弹窗并请求第一页好友
  const openPopup = () => {
+    if (readonly) return;
    setCurrentPage(1);
    setSearchQuery("");
    setRealVisible(true);
@@ -152,8 +159,23 @@ export default function FriendSelection({
    return `已选择 ${selectedFriends.length} 个好友`;
  };

+  // 获取已选好友详细信息
+  const selectedFriendObjs = selectedFriends
+    .map((id) => friends.find((f) => f.id === id))
+    .filter(Boolean) as WechatFriend[];
+
+  // 删除已选好友
+  const handleRemoveFriend = (id: string) => {
+    if (readonly) return;
+    onSelect(selectedFriends.filter((f) => f !== id));
+  };
+
+  // 确认按钮逻辑
  const handleConfirm = () => {
-    setPopupVisible(false);
+    setRealVisible(false);
+    if (onConfirm) {
+      onConfirm(selectedFriends, selectedFriendObjs);
+    }
  };

  // 清空搜索
@@ -166,35 +188,85 @@ export default function FriendSelection({
  return (
    <>
      {/* 输入框 */}
-      <div className={`${style.inputWrapper} ${className}`}>
-        <span className={style.inputIcon}>
-          <svg
-            width="20"
-            height="20"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-            />
-          </svg>
-        </span>
-        <Input
-          placeholder={placeholder}
-          className={style.input}
-          readOnly
-          onClick={openPopup}
-          value={getDisplayText()}
-        />
-      </div>
-
-      {/* 微信好友选择弹窗 */}
+      {showInput && (
+        <div className={`${style.inputWrapper} ${className}`}>
+          <Input
+            placeholder={placeholder}
+            value={getDisplayText()}
+            onClick={openPopup}
+            prefix={<SearchOutlined />}
+            allowClear={!readonly}
+            size="large"
+            readOnly={readonly}
+            disabled={readonly}
+            style={
+              readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+            }
+          />
+        </div>
+      )}
+      {/* 已选好友列表窗口 */}
+      {showSelectedList && selectedFriendObjs.length > 0 && (
+        <div
+          className={style.selectedListWindow}
+          style={{
+            maxHeight: selectedListMaxHeight,
+            overflowY: "auto",
+            marginTop: 8,
+            border: "1px solid #e5e6eb",
+            borderRadius: 8,
+            background: "#fff",
+          }}
+        >
+          {selectedFriendObjs.map((friend) => (
+            <div
+              key={friend.id}
+              className={style.selectedListRow}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: "4px 8px",
+                borderBottom: "1px solid #f0f0f0",
+                fontSize: 14,
+              }}
+            >
+              <div
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {friend.nickname || friend.wechatId || friend.id}
+              </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={() => handleRemoveFriend(friend.id)}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      {/* 弹窗 */}
      <Popup
-        visible={realVisible}
+        visible={realVisible && !readonly}
        onMaskClick={() => setRealVisible(false)}
        position="bottom"
        bodyStyle={{ height: "100vh" }}
@@ -206,23 +278,33 @@ export default function FriendSelection({
              <Input
                placeholder="搜索好友"
                value={searchQuery}
-                onChange={(val) => setSearchQuery(val)}
-                className={style.searchInput}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                disabled={readonly}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
              />
-              <SearchOutlined className={style.searchIcon} />
-              {searchQuery && (
+              {searchQuery && !readonly && (
                <Button
-                  fill="none"
-                  size="mini"
+                  type="text"
+                  icon={<DeleteOutlined />}
+                  size="small"
                  className={style.clearBtn}
                  onClick={handleClearSearch}
-                >
-                  <CloseOutlined />
-                </Button>
+                  style={{
+                    color: "#ff4d4f",
+                    border: "none",
+                    background: "none",
+                    minWidth: 24,
+                    height: 24,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                />
              )}
            </div>
          </div>
-
          <div className={style.friendList}>
            {loading ? (
              <div className={style.loadingBox}>
@@ -234,7 +316,7 @@ export default function FriendSelection({
                  <label
                    key={friend.id}
                    className={style.friendItem}
-                    onClick={() => handleFriendToggle(friend.id)}
+                    onClick={() => !readonly && handleFriendToggle(friend.id)}
                  >
                    <div className={style.radioWrapper}>
                      <div
@@ -290,54 +372,48 @@ export default function FriendSelection({
              </div>
            )}
          </div>
-
+          {/* 分页栏 */}
          <div className={style.paginationRow}>
            <div className={style.totalCount}>总计 {totalFriends} 个好友</div>
            <div className={style.paginationControls}>
              <Button
-                fill="none"
-                size="mini"
+                type="text"
+                size="small"
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1 || loading}
                className={style.pageBtn}
+                style={{ borderRadius: 16 }}
              >
-                <LeftOutlined />
+                &lt;
              </Button>
              <span className={style.pageInfo}>
                {currentPage} / {totalPages}
              </span>
              <Button
-                fill="none"
-                size="mini"
+                type="text"
+                size="small"
                onClick={() =>
                  setCurrentPage(Math.min(totalPages, currentPage + 1))
                }
                disabled={currentPage === totalPages || loading}
                className={style.pageBtn}
+                style={{ borderRadius: 16 }}
              >
-                <RightOutlined />
+                &gt;
              </Button>
            </div>
          </div>
-
+          {/* 底部按钮栏 */}
          <div className={style.popupFooter}>
-            <Button
-              fill="outline"
-              onClick={() => setRealVisible(false)}
-              className={style.cancelBtn}
-            >
-              取消
-            </Button>
-            <Button
-              color="primary"
-              onClick={() => {
-                setRealVisible(false);
-                handleConfirm();
-              }}
-              className={style.confirmBtn}
-            >
-              确定 ({selectedFriends.length})
-            </Button>
+            <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>
      </Popup>
--- a/nkebao/src/components/GroupSelection/index.module.scss
+++ b/nkebao/src/components/GroupSelection/index.module.scss
@@ -205,19 +205,18 @@
 }

 .popupFooter {
-  border-top: 1px solid #f0f0f0;
-  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
  background: #fff;
 }
-.cancelBtn {
-  padding: 0 24px;
-  border-radius: 24px;
-  border: 1px solid #e5e6eb;
+.selectedCount {
+  font-size: 14px;
+  color: #888;
 }
-.confirmBtn {
-  padding: 0 24px;
-  border-radius: 24px;
+.footerBtnGroup {
+  display: flex;
+  gap: 12px;
 }
--- a/nkebao/src/components/GroupSelection/index.tsx
+++ b/nkebao/src/components/GroupSelection/index.tsx
@@ -4,8 +4,10 @@ import {
  CloseOutlined,
  LeftOutlined,
  RightOutlined,
+  DeleteOutlined,
 } from "@ant-design/icons";
-import { Input, Button, Popup, Toast } from "antd-mobile";
+import { Button as AntdButton, Input as AntdInput } from "antd";
+import { Popup, Toast } from "antd-mobile";
 import { getGroupList } from "./api";
 import style from "./index.module.scss";

@@ -27,8 +29,13 @@ interface GroupSelectionProps {
  onSelectDetail?: (groups: WechatGroup[]) => void;
  placeholder?: string;
  className?: string;
-  visible?: boolean; // 新增
-  onVisibleChange?: (visible: boolean) => void; // 新增
+  visible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+  selectedListMaxHeight?: number;
+  showInput?: boolean;
+  showSelectedList?: boolean;
+  readonly?: boolean;
+  onConfirm?: (selectedIds: string[], selectedItems: WechatGroup[]) => void; // 新增
 }

 export default function GroupSelection({
@@ -39,6 +46,11 @@ export default function GroupSelection({
  className = "",
  visible,
  onVisibleChange,
+  selectedListMaxHeight = 300,
+  showInput = true,
+  showSelectedList = true,
+  readonly = false,
+  onConfirm,
 }: GroupSelectionProps) {
  const [popupVisible, setPopupVisible] = useState(false);
  const [groups, setGroups] = useState<WechatGroup[]>([]);
@@ -48,6 +60,17 @@ export default function GroupSelection({
  const [totalGroups, setTotalGroups] = useState(0);
  const [loading, setLoading] = useState(false);

+  // 获取已选群聊详细信息
+  const selectedGroupObjs = selectedGroups
+    .map((id) => groups.find((g) => g.id === id))
+    .filter(Boolean) as WechatGroup[];
+
+  // 删除已选群聊
+  const handleRemoveGroup = (id: string) => {
+    if (readonly) return;
+    onSelect(selectedGroups.filter((g) => g !== id));
+  };
+
  // 受控弹窗逻辑
  const realVisible = visible !== undefined ? visible : popupVisible;
  const setRealVisible = (v: boolean) => {
@@ -55,8 +78,9 @@ export default function GroupSelection({
    if (visible === undefined) setPopupVisible(v);
  };

-  // 打开弹窗并请求第一页群组
+  // 打开弹窗
  const openPopup = () => {
+    if (readonly) return;
    setCurrentPage(1);
    setSearchQuery("");
    setRealVisible(true);
@@ -138,8 +162,12 @@ export default function GroupSelection({
    return `已选择 ${selectedGroups.length} 个群聊`;
  };

+  // 确认按钮逻辑
  const handleConfirm = () => {
    setRealVisible(false);
+    if (onConfirm) {
+      onConfirm(selectedGroups, selectedGroupObjs);
+    }
  };

  // 清空搜索
@@ -152,35 +180,85 @@ export default function GroupSelection({
  return (
    <>
      {/* 输入框 */}
-      <div className={`${style.inputWrapper} ${className}`}>
-        <span className={style.inputIcon}>
-          <svg
-            width="20"
-            height="20"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-            />
-          </svg>
-        </span>
-        <Input
-          placeholder={placeholder}
-          className={style.input}
-          readOnly
-          onClick={openPopup}
-          value={getDisplayText()}
-        />
-      </div>
-
-      {/* 群组选择弹窗 */}
+      {showInput && (
+        <div className={`${style.inputWrapper} ${className}`}>
+          <AntdInput
+            placeholder={placeholder}
+            value={getDisplayText()}
+            onClick={openPopup}
+            prefix={<SearchOutlined />}
+            allowClear={!readonly}
+            size="large"
+            readOnly={readonly}
+            disabled={readonly}
+            style={
+              readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+            }
+          />
+        </div>
+      )}
+      {/* 已选群聊列表窗口 */}
+      {showSelectedList && selectedGroupObjs.length > 0 && (
+        <div
+          className={style.selectedListWindow}
+          style={{
+            maxHeight: selectedListMaxHeight,
+            overflowY: "auto",
+            marginTop: 8,
+            border: "1px solid #e5e6eb",
+            borderRadius: 8,
+            background: "#fff",
+          }}
+        >
+          {selectedGroupObjs.map((group) => (
+            <div
+              key={group.id}
+              className={style.selectedListRow}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: "4px 8px",
+                borderBottom: "1px solid #f0f0f0",
+                fontSize: 14,
+              }}
+            >
+              <div
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {group.name || group.chatroomId || group.id}
+              </div>
+              {!readonly && (
+                <AntdButton
+                  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={() => handleRemoveGroup(group.id)}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      {/* 弹窗 */}
      <Popup
-        visible={realVisible}
+        visible={realVisible && !readonly}
        onMaskClick={() => setRealVisible(false)}
        position="bottom"
        bodyStyle={{ height: "100vh" }}
@@ -189,26 +267,37 @@ export default function GroupSelection({
          <div className={style.popupHeader}>
            <div className={style.popupTitle}>选择群聊</div>
            <div className={style.searchWrapper}>
-              <Input
+              <AntdInput
                placeholder="搜索群聊"
                value={searchQuery}
-                onChange={(val) => setSearchQuery(val)}
-                className={style.searchInput}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                disabled={readonly}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
              />
              <SearchOutlined className={style.searchIcon} />
-              {searchQuery && (
-                <Button
-                  fill="none"
-                  size="mini"
+              {searchQuery && !readonly && (
+                <AntdButton
+                  type="text"
+                  icon={<CloseOutlined />}
+                  size="small"
                  className={style.clearBtn}
                  onClick={handleClearSearch}
-                >
-                  <CloseOutlined />
-                </Button>
+                  style={{
+                    color: "#ff4d4f",
+                    border: "none",
+                    background: "none",
+                    minWidth: 24,
+                    height: 24,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                />
              )}
            </div>
          </div>
-
          <div className={style.groupList}>
            {loading ? (
              <div className={style.loadingBox}>
@@ -220,7 +309,7 @@ export default function GroupSelection({
                  <label
                    key={group.id}
                    className={style.groupItem}
-                    onClick={() => handleGroupToggle(group.id)}
+                    onClick={() => !readonly && handleGroupToggle(group.id)}
                  >
                    <div className={style.radioWrapper}>
                      <div
@@ -272,57 +361,50 @@ export default function GroupSelection({
              </div>
            )}
          </div>
-
+          {/* 分页栏 */}
          <div className={style.paginationRow}>
-            <div className={style.totalCount}>
-              总计 {totalGroups} 个群聊
-              {searchQuery && ` (搜索: "${searchQuery}")`}
-            </div>
+            <div className={style.totalCount}>总计 {totalGroups} 个群聊</div>
            <div className={style.paginationControls}>
-              <Button
-                fill="none"
-                size="mini"
+              <AntdButton
+                type="text"
+                size="small"
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1 || loading}
                className={style.pageBtn}
+                style={{ borderRadius: 16 }}
              >
                <LeftOutlined />
-              </Button>
+              </AntdButton>
              <span className={style.pageInfo}>
                {currentPage} / {totalPages}
              </span>
-              <Button
-                fill="none"
-                size="mini"
+              <AntdButton
+                type="text"
+                size="small"
                onClick={() =>
                  setCurrentPage(Math.min(totalPages, currentPage + 1))
                }
                disabled={currentPage === totalPages || loading}
                className={style.pageBtn}
+                style={{ borderRadius: 16 }}
              >
                <RightOutlined />
-              </Button>
+              </AntdButton>
            </div>
          </div>
-
+          {/* 底部按钮栏 */}
          <div className={style.popupFooter}>
-            <Button
-              fill="outline"
-              onClick={() => setRealVisible(false)}
-              className={style.cancelBtn}
-            >
-              取消
-            </Button>
-            <Button
-              color="primary"
-              onClick={() => {
-                setRealVisible(false);
-                handleConfirm();
-              }}
-              className={style.confirmBtn}
-            >
-              确定 ({selectedGroups.length})
-            </Button>
+            <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>
      </Popup>