feat: 本次提交更新内容如下

点赞记录完成

nkebao/src/pages/workspace/auto-like/list/api.ts

@@ -5,7 +5,7 @@ import {
   UpdateLikeTaskData,
   LikeRecord,
   PaginatedResponse,
-} from "@/pages/workspace/auto-like/record/api";
+} from "@/pages/workspace/auto-like/record/data";
 
 // 获取自动点赞任务列表
 export function fetchAutoLikeTasks(

nkebao/src/pages/workspace/auto-like/list/index.tsx

@@ -23,7 +23,7 @@ import {
   toggleAutoLikeTask,
   copyAutoLikeTask,
 } from "./api";
-import { LikeTask } from "@/pages/workspace/auto-like/record/api";
+import { LikeTask } from "@/pages/workspace/auto-like/record/data";
 import style from "./index.module.scss";
 
 // 卡片菜单组件

nkebao/src/pages/workspace/auto-like/new/api.ts

@@ -3,7 +3,7 @@ import {
   CreateLikeTaskData,
   UpdateLikeTaskData,
   LikeTask,
-} from "@/pages/workspace/auto-like/record/api";
+} from "@/pages/workspace/auto-like/record/data";
 
 // 获取自动点赞任务详情
 export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {

nkebao/src/pages/workspace/auto-like/new/index.tsx

@@ -15,7 +15,7 @@ import {
 import {
   CreateLikeTaskData,
   ContentType,
-} from "@/pages/workspace/auto-like/record/api";
+} from "@/pages/workspace/auto-like/record/data";
 import style from "./new.module.scss";
 import MeauMobile from "@/components/MeauMobile/MeauMoible";
 

nkebao/src/pages/workspace/auto-like/record/api.ts

@@ -1,119 +1,63 @@
-// 自动点赞任务状态
+import request from "@/api/request";
-export type LikeTaskStatus = 1 | 2; // 1: 开启, 2: 关闭
+import {
+  LikeTask,
+  CreateLikeTaskData,
+  UpdateLikeTaskData,
+  LikeRecord,
+  PaginatedResponse,
+} from "@/pages/workspace/auto-like/record/data";
 
-// 内容类型
+// 获取自动点赞任务列表
-export type ContentType = "text" | "image" | "video" | "link";
+export function fetchAutoLikeTasks(
-
+  params = { type: 1, page: 1, limit: 100 }
-// 设备信息
+): Promise<LikeTask[]> {
-export interface Device {
+  return request("/v1/workbench/list", params, "GET");
-  id: string;
-  name: string;
-  status: "online" | "offline";
-  lastActive: string;
 }
 
-// 好友信息
+// 获取单个任务详情
-export interface Friend {
+export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
-  id: string;
+  return request("/v1/workbench/detail", { id }, "GET");
-  nickname: string;
-  wechatId: string;
-  avatar: string;
-  tags: string[];
-  region: string;
-  source: string;
 }
 
-// 点赞记录
+// 创建自动点赞任务
-export interface LikeRecord {
+export function createAutoLikeTask(data: CreateLikeTaskData): Promise<any> {
-  id: string;
+  return request("/v1/workbench/create", { ...data, type: 1 }, "POST");
-  workbenchId: string;
-  momentsId: string;
-  snsId: string;
-  wechatAccountId: string;
-  wechatFriendId: string;
-  likeTime: string;
-  content: string;
-  resUrls: string[];
-  momentTime: string;
-  userName: string;
-  operatorName: string;
-  operatorAvatar: string;
-  friendName: string;
-  friendAvatar: string;
 }
 
-// 自动点赞任务
+// 更新自动点赞任务
-export interface LikeTask {
+export function updateAutoLikeTask(data: UpdateLikeTaskData): Promise<any> {
-  id: string;
+  return request("/v1/workbench/update", { ...data, type: 1 }, "POST");
-  name: string;
-  status: LikeTaskStatus;
-  deviceCount: number;
-  targetGroup: string;
-  likeCount: number;
-  lastLikeTime: string;
-  createTime: string;
-  creator: string;
-  likeInterval: number;
-  maxLikesPerDay: number;
-  timeRange: { start: string; end: string };
-  contentTypes: ContentType[];
-  targetTags: string[];
-  devices: string[];
-  friends: string[];
-  friendMaxLikes: number;
-  friendTags: string;
-  enableFriendTags: boolean;
-  todayLikeCount: number;
-  totalLikeCount: number;
-  updateTime: string;
 }
 
-// 创建任务数据
+// 删除自动点赞任务
-export interface CreateLikeTaskData {
+export function deleteAutoLikeTask(id: string): Promise<any> {
-  name: string;
+  return request("/v1/workbench/delete", { id }, "DELETE");
-  interval: number;
-  maxLikes: number;
-  startTime: string;
-  endTime: string;
-  contentTypes: ContentType[];
-  devices: string[];
-  friends?: string[];
-  friendMaxLikes: number;
-  friendTags?: string;
-  enableFriendTags: boolean;
-  targetTags: string[];
 }
 
-// 更新任务数据
+// 切换任务状态
-export interface UpdateLikeTaskData extends CreateLikeTaskData {
+export function toggleAutoLikeTask(id: string, status: string): Promise<any> {
-  id: string;
+  return request("/v1/workbench/update-status", { id, status }, "POST");
 }
 
-// 任务配置
+// 复制自动点赞任务
-export interface TaskConfig {
+export function copyAutoLikeTask(id: string): Promise<any> {
-  interval: number;
+  return request("/v1/workbench/copy", { id }, "POST");
-  maxLikes: number;
-  startTime: string;
-  endTime: string;
-  contentTypes: ContentType[];
-  devices: string[];
-  friends: string[];
-  friendMaxLikes: number;
-  friendTags: string;
-  enableFriendTags: boolean;
 }
 
-// API响应类型
+// 获取点赞记录
-export interface ApiResponse<T = any> {
+export function fetchLikeRecords(
-  code: number;
+  workbenchId: string,
-  msg: string;
+  page: number = 1,
-  data: T;
+  limit: number = 20,
-}
+  keyword?: string
-
+): Promise<PaginatedResponse<LikeRecord>> {
-// 分页响应类型
+  const params: any = {
-export interface PaginatedResponse<T> {
+    workbenchId,
-  list: T[];
+    page: page.toString(),
-  total: number;
+    limit: limit.toString(),
-  page: number;
+  };
-  limit: number;
+  if (keyword) {
+    params.keyword = keyword;
+  }
+  return request("/v1/workbench/like-records", params, "GET");
 }

nkebao/src/pages/workspace/auto-like/record/data.ts

@@ -1,173 +1,119 @@
-import { request } from "../../../../api/request";
+// 自动点赞任务状态
-import {
+export type LikeTaskStatus = 1 | 2; // 1: 开启, 2: 关闭
-  LikeTask,
-  CreateLikeTaskData,
-  UpdateLikeTaskData,
-  LikeRecord,
-  ApiResponse,
-  PaginatedResponse,
-} from "@/pages/workspace/auto-like/record/api";
 
-// 获取自动点赞任务列表
+// 内容类型
-export async function fetchAutoLikeTasks(): Promise<LikeTask[]> {
+export type ContentType = "text" | "image" | "video" | "link";
-  try {
-    const res = await request<ApiResponse<PaginatedResponse<LikeTask>>>({
-      url: "/v1/workbench/list",
-      method: "GET",
-      params: {
-        type: 1,
-        page: 1,
-        limit: 100,
-      },
-    });
 
-    if (res.code === 200 && res.data) {
+// 设备信息
-      return res.data.list || [];
+export interface Device {
-    }
+  id: string;
-    return [];
+  name: string;
-  } catch (error) {
+  status: "online" | "offline";
-    console.error("获取自动点赞任务失败:", error);
+  lastActive: string;
-    return [];
-  }
 }
 
-// 获取单个任务详情
+// 好友信息
-export async function fetchAutoLikeTaskDetail(
+export interface Friend {
-  id: string
+  id: string;
-): Promise<LikeTask | null> {
+  nickname: string;
-  try {
+  wechatId: string;
-    console.log(`Fetching task detail for id: ${id}`);
+  avatar: string;
-    const res = await request<any>({
+  tags: string[];
-      url: "/v1/workbench/detail",
+  region: string;
-      method: "GET",
+  source: string;
-      params: { id },
-    });
-    console.log("Task detail API response:", res);
-
-    if (res.code === 200) {
-      if (res.data) {
-        if (typeof res.data === "object") {
-          return res.data;
-        } else {
-          console.error(
-            "Task detail API response data is not an object:",
-            res.data
-          );
-          return null;
-        }
-      } else {
-        console.error("Task detail API response missing data field:", res);
-        return null;
-      }
-    }
-
-    console.error("Task detail API error:", res.msg || "Unknown error");
-    return null;
-  } catch (error) {
-    console.error("获取任务详情失败:", error);
-    return null;
-  }
 }
 
-// 创建自动点赞任务
+// 点赞记录
-export async function createAutoLikeTask(
+export interface LikeRecord {
-  data: CreateLikeTaskData
+  id: string;
-): Promise<ApiResponse> {
+  workbenchId: string;
-  return request({
+  momentsId: string;
-    url: "/v1/workbench/create",
+  snsId: string;
-    method: "POST",
+  wechatAccountId: string;
-    data: {
+  wechatFriendId: string;
-      ...data,
+  likeTime: string;
-      type: 1, // 自动点赞类型
+  content: string;
-    },
+  resUrls: string[];
-  });
+  momentTime: string;
+  userName: string;
+  operatorName: string;
+  operatorAvatar: string;
+  friendName: string;
+  friendAvatar: string;
 }
 
-// 更新自动点赞任务
+// 自动点赞任务
-export async function updateAutoLikeTask(
+export interface LikeTask {
-  data: UpdateLikeTaskData
+  id: string;
-): Promise<ApiResponse> {
+  name: string;
-  return request({
+  status: LikeTaskStatus;
-    url: "/v1/workbench/update",
+  deviceCount: number;
-    method: "POST",
+  targetGroup: string;
-    data: {
+  likeCount: number;
-      ...data,
+  lastLikeTime: string;
-      type: 1, // 自动点赞类型
+  createTime: string;
-    },
+  creator: string;
-  });
+  likeInterval: number;
+  maxLikesPerDay: number;
+  timeRange: { start: string; end: string };
+  contentTypes: ContentType[];
+  targetTags: string[];
+  devices: string[];
+  friends: string[];
+  friendMaxLikes: number;
+  friendTags: string;
+  enableFriendTags: boolean;
+  todayLikeCount: number;
+  totalLikeCount: number;
+  updateTime: string;
 }
 
-// 删除自动点赞任务
+// 创建任务数据
-export async function deleteAutoLikeTask(id: string): Promise<ApiResponse> {
+export interface CreateLikeTaskData {
-  return request({
+  name: string;
-    url: "/v1/workbench/delete",
+  interval: number;
-    method: "DELETE",
+  maxLikes: number;
-    params: { id },
+  startTime: string;
-  });
+  endTime: string;
+  contentTypes: ContentType[];
+  devices: string[];
+  friends?: string[];
+  friendMaxLikes: number;
+  friendTags?: string;
+  enableFriendTags: boolean;
+  targetTags: string[];
 }
 
-// 切换任务状态
+// 更新任务数据
-export async function toggleAutoLikeTask(
+export interface UpdateLikeTaskData extends CreateLikeTaskData {
-  id: string,
+  id: string;
-  status: string
-): Promise<ApiResponse> {
-  return request({
-    url: "/v1/workbench/update-status",
-    method: "POST",
-    data: { id, status },
-  });
 }
 
-// 复制自动点赞任务
+// 任务配置
-export async function copyAutoLikeTask(id: string): Promise<ApiResponse> {
+export interface TaskConfig {
-  return request({
+  interval: number;
-    url: "/v1/workbench/copy",
+  maxLikes: number;
-    method: "POST",
+  startTime: string;
-    data: { id },
+  endTime: string;
-  });
+  contentTypes: ContentType[];
+  devices: string[];
+  friends: string[];
+  friendMaxLikes: number;
+  friendTags: string;
+  enableFriendTags: boolean;
 }
 
-// 获取点赞记录
+// API响应类型
-export async function fetchLikeRecords(
+export interface ApiResponse<T = any> {
-  workbenchId: string,
+  code: number;
-  page: number = 1,
+  msg: string;
-  limit: number = 20,
+  data: T;
-  keyword?: string
+}
-): Promise<PaginatedResponse<LikeRecord>> {
+
-  try {
+// 分页响应类型
-    const params: any = {
+export interface PaginatedResponse<T> {
-      workbenchId,
+  list: T[];
-      page: page.toString(),
+  total: number;
-      limit: limit.toString(),
+  page: number;
-    };
+  limit: number;
-
-    if (keyword) {
-      params.keyword = keyword;
-    }
-
-    const res = await request<ApiResponse<PaginatedResponse<LikeRecord>>>({
-      url: "/v1/workbench/records",
-      method: "GET",
-      params,
-    });
-
-    if (res.code === 200 && res.data) {
-      return res.data;
-    }
-
-    return {
-      list: [],
-      total: 0,
-      page: 1,
-      limit: 20,
-    };
-  } catch (error) {
-    console.error("获取点赞记录失败:", error);
-    return {
-      list: [],
-      total: 0,
-      page: 1,
-      limit: 20,
-    };
-  }
 }

nkebao/src/pages/workspace/auto-like/record/index.tsx

@@ -1,20 +1,27 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { NavBar, Button, Toast, SpinLoading, Card, Avatar } from "antd-mobile";
-import { Input } from "antd";
-import InfiniteList from "@/components/InfiniteList/InfiniteList";
 import {
-  SearchOutlined,
+  Button,
-  ReloadOutlined,
+  Input,
+  Card,
+  Badge,
+  Avatar,
+  Skeleton,
+  message,
+  Spin,
+  Divider,
+  Pagination,
+} from "antd";
+import {
   LikeOutlined,
+  ReloadOutlined,
+  SearchOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-
+import styles from "./record.module.scss";
+import NavCommon from "@/components/NavCommon";
+import { fetchLikeRecords } from "./api";
 import Layout from "@/components/Layout/Layout";
-import MeauMobile from "@/components/MeauMobile/MeauMoible";
-import { fetchLikeRecords, fetchAutoLikeTaskDetail } from "./data";
-import { LikeRecord, LikeTask } from "./api";
-import style from "./record.module.scss";
 
 // 格式化日期
 const formatDate = (dateString: string) => {
@@ -32,264 +39,271 @@ const formatDate = (dateString: string) => {
   }
 };
 
-const AutoLikeDetail: React.FC = () => {
+export default function AutoLikeRecord() {
   const { id } = useParams<{ id: string }>();
-  const [records, setRecords] = useState<LikeRecord[]>([]);
+  const [records, setRecords] = useState<any[]>([]);
-  const [taskDetail, setTaskDetail] = useState<LikeTask | null>(null);
   const [recordsLoading, setRecordsLoading] = useState(false);
-  const [taskLoading, setTaskLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
   const [total, setTotal] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
   const pageSize = 10;
 
-  // 获取任务详情
-  const fetchTaskDetail = async () => {
-    if (!id) return;
-    setTaskLoading(true);
-    try {
-      const detail = await fetchAutoLikeTaskDetail(id);
-      setTaskDetail(detail);
-    } catch (error) {
-      Toast.show({
-        content: "获取任务详情失败",
-        position: "top",
-      });
-    } finally {
-      setTaskLoading(false);
-    }
-  };
-
-  // 获取点赞记录
-  const fetchRecords = async (
-    page: number = 1,
-    isLoadMore: boolean = false
-  ) => {
-    if (!id) return;
-
-    if (!isLoadMore) {
-      setRecordsLoading(true);
-    }
-
-    try {
-      const response = await fetchLikeRecords(id, page, pageSize, searchTerm);
-      const newRecords = response.list || [];
-
-      if (isLoadMore) {
-        setRecords((prev) => [...prev, ...newRecords]);
-      } else {
-        setRecords(newRecords);
-      }
-
-      setTotal(response.total || 0);
-      setCurrentPage(page);
-      setHasMore(newRecords.length === pageSize);
-    } catch (error) {
-      Toast.show({
-        content: "获取点赞记录失败",
-        position: "top",
-      });
-    } finally {
-      setRecordsLoading(false);
-    }
-  };
-
   useEffect(() => {
-    fetchTaskDetail();
+    if (!id) return;
-    fetchRecords(1, false);
+    setRecordsLoading(true);
+    fetchLikeRecords(id, 1, pageSize)
+      .then((response: any) => {
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+        setCurrentPage(1);
+      })
+      .catch(() => {
+        message.error("获取点赞记录失败，请稍后重试");
+      })
+      .finally(() => setRecordsLoading(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
   const handleSearch = () => {
     setCurrentPage(1);
-    fetchRecords(1, false);
+    fetchLikeRecords(id!, 1, pageSize, searchTerm)
+      .then((response: any) => {
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+        setCurrentPage(1);
+      })
+      .catch(() => {
+        message.error("获取点赞记录失败，请稍后重试");
+      });
   };
 
   const handleRefresh = () => {
-    fetchRecords(currentPage, false);
+    fetchLikeRecords(id!, currentPage, pageSize, searchTerm)
+      .then((response: any) => {
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+      })
+      .catch(() => {
+        message.error("获取点赞记录失败，请稍后重试");
+      });
   };
 
-  const handleLoadMore = async () => {
+  const handlePageChange = (newPage: number) => {
-    if (hasMore && !recordsLoading) {
+    fetchLikeRecords(id!, newPage, pageSize, searchTerm)
-      await fetchRecords(currentPage + 1, true);
+      .then((response: any) => {
-    }
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+        setCurrentPage(newPage);
+      })
+      .catch(() => {
+        message.error("获取点赞记录失败，请稍后重试");
+      });
   };
 
-  const renderRecordItem = (record: LikeRecord) => (
-    <Card key={record.id} className={style["record-card"]}>
-      <div className={style["record-header"]}>
-        <div className={style["user-info"]}>
-          <Avatar
-            src={
-              record.friendAvatar ||
-              "https://api.dicebear.com/7.x/avataaars/svg?seed=fallback"
-            }
-            className={style["user-avatar"]}
-            fallback={<UserOutlined />}
-          />
-          <div className={style["user-details"]}>
-            <div className={style["user-name"]} title={record.friendName}>
-              {record.friendName}
-            </div>
-            <div className={style["user-role"]}>内容发布者</div>
-          </div>
-        </div>
-        <div className={style["record-time"]}>
-          {formatDate(record.momentTime || record.likeTime)}
-        </div>
-      </div>
-
-      <div className={style["record-content"]}>
-        {record.content && (
-          <p className={style["content-text"]}>{record.content}</p>
-        )}
-
-        {Array.isArray(record.resUrls) && record.resUrls.length > 0 && (
-          <div className={style["content-images"]}>
-            {record.resUrls.slice(0, 9).map((image: string, idx: number) => (
-              <div key={idx} className={style["image-item"]}>
-                <img
-                  src={image}
-                  alt={`内容图片 ${idx + 1}`}
-                  className={style["content-image"]}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className={style["like-info"]}>
-        <Avatar
-          src={
-            record.operatorAvatar ||
-            "https://api.dicebear.com/7.x/avataaars/svg?seed=operator"
-          }
-          className={style["operator-avatar"]}
-          fallback={<UserOutlined />}
-        />
-        <div className={style["like-text"]}>
-          <span className={style["operator-name"]} title={record.operatorName}>
-            {record.operatorName}
-          </span>
-          <span className={style["like-action"]}>点赞了这条内容</span>
-        </div>
-      </div>
-    </Card>
-  );
-
   return (
     <Layout
       header={
-        <NavBar
+        <>
-          backArrow
+          <NavCommon title="点赞记录" />
-          style={{ background: "#fff" }}
+          <div className={styles.headerSearchBar}>
-          onBack={() => window.history.back()}
+            <div className={styles.headerSearchInputWrap}>
-          left={
-            <div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
-              点赞记录
-            </div>
-          }
-        />
-      }
-      footer={<MeauMobile activeKey="workspace" />}
-    >
-      <div className={style["detail-page"]}>
-        {/* 任务信息卡片 */}
-        {taskDetail && (
-          <div className={style["task-info-card"]}>
-            <div className={style["task-header"]}>
-              <h3 className={style["task-name"]}>{taskDetail.name}</h3>
-              <span
-                className={`${style["task-status"]} ${
-                  Number(taskDetail.status) === 1
-                    ? style["active"]
-                    : style["inactive"]
-                }`}
-              >
-                {Number(taskDetail.status) === 1 ? "进行中" : "已暂停"}
-              </span>
-            </div>
-            <div className={style["task-stats"]}>
-              <div className={style["stat-item"]}>
-                <LikeOutlined className={style["stat-icon"]} />
-                <span className={style["stat-label"]}>今日点赞：</span>
-                <span className={style["stat-value"]}>
-                  {taskDetail.todayLikeCount || 0}
-                </span>
-              </div>
-              <div className={style["stat-item"]}>
-                <LikeOutlined className={style["stat-icon"]} />
-                <span className={style["stat-label"]}>总点赞数：</span>
-                <span className={style["stat-value"]}>
-                  {taskDetail.totalLikeCount || 0}
-                </span>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* 搜索区域 */}
-        <div className={style["search-section"]}>
-          <div className={style["search-wrapper"]}>
-            <div className={style["search-input-wrapper"]}>
-              <SearchOutlined className={style["search-icon"]} />
               <Input
+                prefix={<SearchOutlined className={styles.headerSearchIcon} />}
                 placeholder="搜索好友昵称或内容"
-                className={style["search-input"]}
+                className={styles.headerSearchInput}
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 onPressEnter={handleSearch}
+                allowClear
               />
             </div>
             <Button
-              size="small"
+              icon={<ReloadOutlined spin={recordsLoading} />}
-              onClick={handleSearch}
-              className={style["search-btn"]}
-            >
-              搜索
-            </Button>
-            <button
-              className={style["refresh-btn"]}
               onClick={handleRefresh}
-              disabled={recordsLoading}
+              loading={recordsLoading}
-            >
+              type="default"
-              <ReloadOutlined
+              shape="circle"
-                style={{
+            />
-                  animation: recordsLoading
-                    ? "spin 1s linear infinite"
-                    : "none",
-                }}
-              />
-            </button>
           </div>
-        </div>
+        </>
-
+      }
-        {/* 记录列表 */}
+      footer={
-        <div className={style["records-section"]}>
+        <>
-          {recordsLoading && currentPage === 1 ? (
+          <div className={styles.footerPagination}>
-            <div className={style["loading"]}>
+            <Pagination
-              <SpinLoading color="primary" />
+              current={currentPage}
-              <div className={style["loading-text"]}>加载中...</div>
+              total={total}
+              pageSize={pageSize}
+              onChange={handlePageChange}
+              showSizeChanger={false}
+              showQuickJumper
+              showTotal={(total, range) =>
+                `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
+              }
+              size="default"
+              className={styles.pagination}
+            />
+          </div>
+        </>
+      }
+    >
+      <div className={styles.bgWrap}>
+        <div className={styles.contentWrap}>
+          {recordsLoading ? (
+            <div className={styles.skeletonWrap}>
+              {Array.from({ length: 3 }).map((_, index) => (
+                <div key={index} className={styles.skeletonCard}>
+                  <div className={styles.skeletonCardHeader}>
+                    <Skeleton.Avatar
+                      active
+                      size={40}
+                      className={styles.skeletonAvatar}
+                    />
+                    <div className={styles.skeletonNameWrap}>
+                      <Skeleton.Input
+                        active
+                        size="small"
+                        className={styles.skeletonName}
+                        style={{ width: 96 }}
+                      />
+                      <Skeleton.Input
+                        active
+                        size="small"
+                        className={styles.skeletonSub}
+                        style={{ width: 64 }}
+                      />
+                    </div>
+                  </div>
+                  <Divider className={styles.skeletonSep} />
+                  <div className={styles.skeletonContentWrap}>
+                    <Skeleton.Input
+                      active
+                      size="small"
+                      className={styles.skeletonContent1}
+                      style={{ width: "100%" }}
+                    />
+                    <Skeleton.Input
+                      active
+                      size="small"
+                      className={styles.skeletonContent2}
+                      style={{ width: "75%" }}
+                    />
+                    <div className={styles.skeletonImgWrap}>
+                      <Skeleton.Image
+                        active
+                        className={styles.skeletonImg}
+                        style={{ width: 80, height: 80 }}
+                      />
+                      <Skeleton.Image
+                        active
+                        className={styles.skeletonImg}
+                        style={{ width: 80, height: 80 }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
             </div>
           ) : records.length === 0 ? (
-            <div className={style["empty-state"]}>
+            <div className={styles.emptyWrap}>
-              <LikeOutlined className={style["empty-icon"]} />
+              <LikeOutlined className={styles.emptyIcon} />
-              <div className={style["empty-text"]}>暂无点赞记录</div>
+              <p className={styles.emptyText}>暂无点赞记录</p>
             </div>
           ) : (
-            <InfiniteList
+            <>
-              data={records}
+              {records.map((record) => (
-              renderItem={renderRecordItem}
+                <div key={record.id} className={styles.recordCard}>
-              hasMore={hasMore}
+                  <div className={styles.recordCardHeader}>
-              onLoadMore={handleLoadMore}
+                    <div className={styles.recordCardHeaderLeft}>
-              className={style["records-list"]}
+                      <Avatar
-            />
+                        src={record.friendAvatar || undefined}
+                        icon={<UserOutlined />}
+                        size={40}
+                        className={styles.avatarImg}
+                      />
+                      <div className={styles.friendInfo}>
+                        <div
+                          className={styles.friendName}
+                          title={record.friendName}
+                        >
+                          {record.friendName}
+                        </div>
+                        <div className={styles.friendSub}>内容发布者</div>
+                      </div>
+                    </div>
+                    <Badge
+                      className={styles.timeBadge}
+                      count={formatDate(record.momentTime || record.likeTime)}
+                      style={{
+                        background: "#e8f0fe",
+                        color: "#333",
+                        fontWeight: 400,
+                      }}
+                    />
+                  </div>
+                  <Divider className={styles.cardSep} />
+                  <div className={styles.cardContent}>
+                    {record.content && (
+                      <p className={styles.contentText}>{record.content}</p>
+                    )}
+                    {Array.isArray(record.resUrls) &&
+                      record.resUrls.length > 0 && (
+                        <div
+                          className={
+                            `${styles.imgGrid} ` +
+                            (record.resUrls.length === 1
+                              ? styles.grid1
+                              : record.resUrls.length === 2
+                                ? styles.grid2
+                                : record.resUrls.length <= 3
+                                  ? styles.grid3
+                                  : record.resUrls.length <= 6
+                                    ? styles.grid6
+                                    : styles.grid9)
+                          }
+                        >
+                          {record.resUrls
+                            .slice(0, 9)
+                            .map((image: string, idx: number) => (
+                              <div key={idx} className={styles.imgItem}>
+                                <img
+                                  src={image}
+                                  alt={`内容图片 ${idx + 1}`}
+                                  className={styles.img}
+                                />
+                              </div>
+                            ))}
+                        </div>
+                      )}
+                  </div>
+                  <div className={styles.operatorWrap}>
+                    <Avatar
+                      src={record.operatorAvatar || undefined}
+                      icon={<UserOutlined />}
+                      size={32}
+                      className={styles.operatorAvatar}
+                    />
+                    <div className={styles.operatorInfo}>
+                      <span
+                        className={styles.operatorName}
+                        title={record.operatorName}
+                      >
+                        {record.operatorName}
+                      </span>
+                      <span className={styles.operatorAction}>
+                        <LikeOutlined
+                          style={{ color: "red", marginRight: 4 }}
+                        />
+                        已赞
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </>
           )}
         </div>
       </div>
     </Layout>
   );
-};
+}
-
-export default AutoLikeDetail;

nkebao/src/pages/workspace/auto-like/record/record.module.scss

@@ -1,351 +1,266 @@
-.detail-page {
+// 搜索栏
-  background: #f5f5f5;
+.headerSearchBar {
-  min-height: 100vh;
-  padding-bottom: 80px;
-}
-
-.task-info-card {
-  background: white;
-  margin: 16px;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.task-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.task-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin: 0;
-}
-
-.task-status {
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  
-  &.active {
-    background: #f6ffed;
-    color: #52c41a;
-    border: 1px solid #b7eb8f;
-  }
-  
-  &.inactive {
-    background: #f5f5f5;
-    color: #666;
-    border: 1px solid #d9d9d9;
-  }
-}
-
-.task-stats {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  color: #666;
-}
-
-.stat-icon {
-  font-size: 16px;
-  color: #1890ff;
-}
-
-.stat-label {
-  font-weight: 500;
-}
-
-.stat-value {
-  color: #333;
-  font-weight: 600;
-}
-
-.search-section {
-  padding: 0 16px 16px;
-}
-
-.search-wrapper {
   display: flex;
   align-items: center;
   gap: 8px;
-  background: white;
+  padding: 16px;
-  border-radius: 8px;
-  padding: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
-
+.headerSearchInputWrap {
-.search-input-wrapper {
   position: relative;
   flex: 1;
 }
-
+.headerSearchIcon {
-.search-input {
-  width: 100%;
-  height: 36px;
-  padding: 0 12px 0 32px;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  font-size: 14px;
-  
-  &:focus {
-    border-color: #1890ff;
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-    outline: none;
-  }
-}
-
-.search-icon {
   position: absolute;
-  left: 8px;
+  left: 12px;
-  top: 50%;
+  top: 10px;
-  transform: translateY(-50%);
+  width: 16px;
-  color: #999;
+  height: 16px;
-  font-size: 14px;
+  color: #a3a3a3;
+}
+.headerSearchInput {
+  padding-left: 32px !important;
+}
+.spin {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  100% { transform: rotate(360deg); }
 }
 
-.search-btn {
+// 分页
-  height: 36px;
+.footerPagination {
-  padding: 0 12px;
-  border-radius: 6px;
-  font-size: 14px;
-  white-space: nowrap;
-}
-
-.refresh-btn {
-  height: 36px;
-  width: 36px;
-  padding: 0;
-  border-radius: 6px;
   display: flex;
-  align-items: center;
   justify-content: center;
-  border: 1px solid #d9d9d9;
+  align-items: center;
-  background: white;
+  padding: 12px 0;
-  cursor: pointer;
+  background: #fff;
-  transition: all 0.2s;
+}
-  
+.pagination {
-  &:hover {
+  :global(.ant-pagination-item) {
+    border-radius: 6px;
+  }
+  :global(.ant-pagination-item-active) {
+    background: #1890ff;
     border-color: #1890ff;
-    color: #1890ff;
   }
-  
+  :global(.ant-pagination-prev),
-  &:disabled {
+  :global(.ant-pagination-next) {
-    opacity: 0.5;
+    border-radius: 6px;
-    cursor: not-allowed;
+  }
+  :global(.ant-pagination-jump-prev),
+  :global(.ant-pagination-jump-next) {
+    border-radius: 6px;
   }
 }
 
-.records-section {
+// 背景和内容
-  padding: 0 16px;
+.bgWrap {
+  background: #f7f7fa;
+  min-height: 100vh;
+  padding-bottom: 80px;
 }
-
+.contentWrap {
-.records-list {
+  padding: 12px;
   display: flex;
   flex-direction: column;
+  gap: 16px;
+}
+
+// 骨架屏
+.skeletonWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.skeletonCard {
+  padding: 0px;
+}
+.skeletonCardHeader {
+  display: flex;
+  align-items: center;
   gap: 12px;
+  margin-bottom: 12px;
 }
-
+.skeletonAvatar {
-.record-card {
+  width: 40px;
-  background: white;
+  height: 40px;
+  border-radius: 50%;
+}
+.skeletonNameWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.skeletonName {
+  width: 96px;
+  height: 16px;
+}
+.skeletonSub {
+  width: 64px;
+  height: 12px;
+}
+.skeletonSep {
+  margin: 12px 0;
+}
+.skeletonContentWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.skeletonContent1 {
+  width: 100%;
+  height: 16px;
+}
+.skeletonContent2 {
+  width: 75%;
+  height: 16px;
+}
+.skeletonImgWrap {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+.skeletonImg {
+  width: 80px;
+  height: 80px;
   border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.record-header {
+// 空状态
+.emptyWrap {
+  text-align: center;
+  padding: 48px 0;
+}
+.emptyIcon {
+  width: 48px;
+  height: 48px;
+  color: #e5e7eb;
+  margin: 0 auto 12px auto;
+}
+.emptyText {
+  color: #888;
+  font-size: 16px;
+}
+
+// 记录卡片
+.recordCard {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  padding: 16px;
+}
+.recordCardHeader {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 12px;
 }
-
+.recordCardHeaderLeft {
-.user-info {
   display: flex;
   align-items: center;
   gap: 12px;
   max-width: 65%;
 }
-
+.avatarImg {
-.user-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  flex-shrink: 0;
 }
-
+.friendInfo {
-.user-details {
   min-width: 0;
 }
-
+.friendName {
-.user-name {
+  font-weight: 500;
-  font-size: 14px;
+  white-space: nowrap;
-  font-weight: 600;
-  color: #333;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
 }
-
+.friendSub {
-.user-role {
+  font-size: 13px;
-  font-size: 12px;
+  color: #888;
-  color: #666;
-  margin-top: 2px;
 }
-
+.timeBadge {
-.record-time {
+  background: #e8f0fe;
-  font-size: 12px;
-  color: #666;
-  background: #f8f9fa;
-  padding: 4px 8px;
-  border-radius: 4px;
   white-space: nowrap;
   flex-shrink: 0;
 }
-
+.cardSep {
-.record-content {
+  margin: 12px 0;
+}
+.cardContent {
   margin-bottom: 12px;
 }
-
+.contentText {
-.content-text {
+  color: #444;
-  font-size: 14px;
-  color: #333;
-  line-height: 1.5;
   margin-bottom: 12px;
   white-space: pre-line;
 }
-
+.imgGrid {
-.content-images {
   display: grid;
-  gap: 4px;
+  gap: 8px;
-  
-  &.single {
-    grid-template-columns: 1fr;
-  }
-  
-  &.double {
-    grid-template-columns: 1fr 1fr;
-  }
-  
-  &.multiple {
-    grid-template-columns: repeat(3, 1fr);
-  }
 }
-
+.grid1 {
-.image-item {
+  grid-template-columns: 1fr;
-  aspect-ratio: 1;
+}
-  border-radius: 6px;
+.grid2 {
+  grid-template-columns: 1fr 1fr;
+}
+.grid3 {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.grid6 {
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+.grid9 {
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+}
+.imgItem {
+  position: relative;
+  aspect-ratio: 1/1;
+  border-radius: 8px;
   overflow: hidden;
 }
-
+.img {
-.content-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.like-info {
+// 操作人
+.operatorWrap {
   display: flex;
   align-items: center;
-  gap: 8px;
+  margin-top: 16px;
-  padding: 8px 12px;
+  padding: 8px;
-  background: #f8f9fa;
+  background: #f3f4f6;
-  border-radius: 6px;
+  border-radius: 8px;
 }
-
+.operatorAvatar {
-.operator-avatar {
+  width: 32px !important;
-  width: 32px;
+  height: 32px !important;
-  height: 32px;
+  margin-right: 8px;
-  border-radius: 50%;
   flex-shrink: 0;
 }
-
+.operatorInfo {
-.like-text {
   font-size: 14px;
-  color: #666;
+  position: relative;
-  min-width: 0;
+  flex: 1;
+  position: relative;
 }
-
+.operatorName {
-.operator-name {
+  font-weight: 500;
-  font-weight: 600;
+  max-width: 100%;
-  color: #333;
+  display: inline-block;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-  max-width: 100%;
 }
-
+.operatorAction {
-.like-action {
+  color: #888;
-  margin-left: 4px;
+  margin-left: 8px;
+  font-size: 12px;
+  position: absolute;
+  right: 0;
+  top: 2px;
 }
-
-.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 60vh;
-  gap: 16px;
-}
-
-.loading-text {
-  color: #666;
-  font-size: 14px;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: #666;
-}
-
-.empty-icon {
-  font-size: 48px;
-  color: #d9d9d9;
-  margin-bottom: 16px;
-}
-
-.empty-text {
-  font-size: 16px;
-  color: #999;
-}
-
-// 移动端适配
-@media (max-width: 768px) {
-  .task-stats {
-    flex-direction: column;
-    gap: 12px;
-  }
-  
-  .search-wrapper {
-    flex-direction: column;
-    gap: 12px;
-  }
-  
-  .search-btn {
-    width: 100%;
-  }
-  
-  .user-info {
-    max-width: 60%;
-  }
-  
-  .content-images {
-    &.multiple {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-}