From 029902de3d4a6eccca299f442b68acb6150e01ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?= =?UTF-8?q?=E5=B9=B3?= Date: Thu, 24 Jul 2025 10:13:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?= =?UTF-8?q?=E7=82=B9=E8=B5=9E=E8=AE=B0=E5=BD=95=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/workspace/auto-like/list/api.ts | 2 +- .../pages/workspace/auto-like/list/index.tsx | 2 +- .../src/pages/workspace/auto-like/new/api.ts | 2 +- .../pages/workspace/auto-like/new/index.tsx | 2 +- .../pages/workspace/auto-like/record/api.ts | 150 ++---- .../pages/workspace/auto-like/record/data.ts | 258 ++++------ .../workspace/auto-like/record/index.tsx | 474 +++++++++--------- .../auto-like/record/record.module.scss | 473 +++++++---------- 8 files changed, 591 insertions(+), 772 deletions(-) diff --git a/nkebao/src/pages/workspace/auto-like/list/api.ts b/nkebao/src/pages/workspace/auto-like/list/api.ts index 34d4424a..fae08ec4 100644 --- a/nkebao/src/pages/workspace/auto-like/list/api.ts +++ b/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( diff --git a/nkebao/src/pages/workspace/auto-like/list/index.tsx b/nkebao/src/pages/workspace/auto-like/list/index.tsx index 9851eeaf..81f46d1d 100644 --- a/nkebao/src/pages/workspace/auto-like/list/index.tsx +++ b/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"; // 卡片菜单组件 diff --git a/nkebao/src/pages/workspace/auto-like/new/api.ts b/nkebao/src/pages/workspace/auto-like/new/api.ts index 703d7bb6..8a684aa3 100644 --- a/nkebao/src/pages/workspace/auto-like/new/api.ts +++ b/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 { diff --git a/nkebao/src/pages/workspace/auto-like/new/index.tsx b/nkebao/src/pages/workspace/auto-like/new/index.tsx index 8d04bc0a..5ad689ea 100644 --- a/nkebao/src/pages/workspace/auto-like/new/index.tsx +++ b/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"; diff --git a/nkebao/src/pages/workspace/auto-like/record/api.ts b/nkebao/src/pages/workspace/auto-like/record/api.ts index bace06ec..a0ffdfa5 100644 --- a/nkebao/src/pages/workspace/auto-like/record/api.ts +++ b/nkebao/src/pages/workspace/auto-like/record/api.ts @@ -1,119 +1,63 @@ -// 自动点赞任务状态 -export type LikeTaskStatus = 1 | 2; // 1: 开启, 2: 关闭 +import request from "@/api/request"; +import { + LikeTask, + CreateLikeTaskData, + UpdateLikeTaskData, + LikeRecord, + PaginatedResponse, +} from "@/pages/workspace/auto-like/record/data"; -// 内容类型 -export type ContentType = "text" | "image" | "video" | "link"; - -// 设备信息 -export interface Device { - id: string; - name: string; - status: "online" | "offline"; - lastActive: string; +// 获取自动点赞任务列表 +export function fetchAutoLikeTasks( + params = { type: 1, page: 1, limit: 100 } +): Promise { + return request("/v1/workbench/list", params, "GET"); } -// 好友信息 -export interface Friend { - id: string; - nickname: string; - wechatId: string; - avatar: string; - tags: string[]; - region: string; - source: string; +// 获取单个任务详情 +export function fetchAutoLikeTaskDetail(id: string): Promise { + return request("/v1/workbench/detail", { id }, "GET"); } -// 点赞记录 -export interface LikeRecord { - id: string; - 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 function createAutoLikeTask(data: CreateLikeTaskData): Promise { + return request("/v1/workbench/create", { ...data, type: 1 }, "POST"); } -// 自动点赞任务 -export interface LikeTask { - id: string; - 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 function updateAutoLikeTask(data: UpdateLikeTaskData): Promise { + return request("/v1/workbench/update", { ...data, type: 1 }, "POST"); } -// 创建任务数据 -export interface CreateLikeTaskData { - name: string; - interval: number; - maxLikes: number; - startTime: string; - endTime: string; - contentTypes: ContentType[]; - devices: string[]; - friends?: string[]; - friendMaxLikes: number; - friendTags?: string; - enableFriendTags: boolean; - targetTags: string[]; +// 删除自动点赞任务 +export function deleteAutoLikeTask(id: string): Promise { + return request("/v1/workbench/delete", { id }, "DELETE"); } -// 更新任务数据 -export interface UpdateLikeTaskData extends CreateLikeTaskData { - id: string; +// 切换任务状态 +export function toggleAutoLikeTask(id: string, status: string): Promise { + return request("/v1/workbench/update-status", { id, status }, "POST"); } -// 任务配置 -export interface TaskConfig { - interval: number; - maxLikes: number; - startTime: string; - endTime: string; - contentTypes: ContentType[]; - devices: string[]; - friends: string[]; - friendMaxLikes: number; - friendTags: string; - enableFriendTags: boolean; +// 复制自动点赞任务 +export function copyAutoLikeTask(id: string): Promise { + return request("/v1/workbench/copy", { id }, "POST"); } -// API响应类型 -export interface ApiResponse { - code: number; - msg: string; - data: T; -} - -// 分页响应类型 -export interface PaginatedResponse { - list: T[]; - total: number; - page: number; - limit: number; +// 获取点赞记录 +export function fetchLikeRecords( + workbenchId: string, + page: number = 1, + limit: number = 20, + keyword?: string +): Promise> { + const params: any = { + workbenchId, + page: page.toString(), + limit: limit.toString(), + }; + if (keyword) { + params.keyword = keyword; + } + return request("/v1/workbench/like-records", params, "GET"); } diff --git a/nkebao/src/pages/workspace/auto-like/record/data.ts b/nkebao/src/pages/workspace/auto-like/record/data.ts index 122a093d..bace06ec 100644 --- a/nkebao/src/pages/workspace/auto-like/record/data.ts +++ b/nkebao/src/pages/workspace/auto-like/record/data.ts @@ -1,173 +1,119 @@ -import { request } from "../../../../api/request"; -import { - LikeTask, - CreateLikeTaskData, - UpdateLikeTaskData, - LikeRecord, - ApiResponse, - PaginatedResponse, -} from "@/pages/workspace/auto-like/record/api"; +// 自动点赞任务状态 +export type LikeTaskStatus = 1 | 2; // 1: 开启, 2: 关闭 -// 获取自动点赞任务列表 -export async function fetchAutoLikeTasks(): Promise { - try { - const res = await request>>({ - url: "/v1/workbench/list", - method: "GET", - params: { - type: 1, - page: 1, - limit: 100, - }, - }); +// 内容类型 +export type ContentType = "text" | "image" | "video" | "link"; - if (res.code === 200 && res.data) { - return res.data.list || []; - } - return []; - } catch (error) { - console.error("获取自动点赞任务失败:", error); - return []; - } +// 设备信息 +export interface Device { + id: string; + name: string; + status: "online" | "offline"; + lastActive: string; } -// 获取单个任务详情 -export async function fetchAutoLikeTaskDetail( - id: string -): Promise { - try { - console.log(`Fetching task detail for id: ${id}`); - const res = await request({ - url: "/v1/workbench/detail", - method: "GET", - 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 interface Friend { + id: string; + nickname: string; + wechatId: string; + avatar: string; + tags: string[]; + region: string; + source: string; } -// 创建自动点赞任务 -export async function createAutoLikeTask( - data: CreateLikeTaskData -): Promise { - return request({ - url: "/v1/workbench/create", - method: "POST", - data: { - ...data, - type: 1, // 自动点赞类型 - }, - }); +// 点赞记录 +export interface LikeRecord { + id: string; + 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 async function updateAutoLikeTask( - data: UpdateLikeTaskData -): Promise { - return request({ - url: "/v1/workbench/update", - method: "POST", - data: { - ...data, - type: 1, // 自动点赞类型 - }, - }); +// 自动点赞任务 +export interface LikeTask { + id: string; + 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 async function deleteAutoLikeTask(id: string): Promise { - return request({ - url: "/v1/workbench/delete", - method: "DELETE", - params: { id }, - }); +// 创建任务数据 +export interface CreateLikeTaskData { + name: string; + interval: number; + maxLikes: number; + startTime: string; + endTime: string; + contentTypes: ContentType[]; + devices: string[]; + friends?: string[]; + friendMaxLikes: number; + friendTags?: string; + enableFriendTags: boolean; + targetTags: string[]; } -// 切换任务状态 -export async function toggleAutoLikeTask( - id: string, - status: string -): Promise { - return request({ - url: "/v1/workbench/update-status", - method: "POST", - data: { id, status }, - }); +// 更新任务数据 +export interface UpdateLikeTaskData extends CreateLikeTaskData { + id: string; } -// 复制自动点赞任务 -export async function copyAutoLikeTask(id: string): Promise { - return request({ - url: "/v1/workbench/copy", - method: "POST", - data: { id }, - }); +// 任务配置 +export interface TaskConfig { + interval: number; + maxLikes: number; + startTime: string; + endTime: string; + contentTypes: ContentType[]; + devices: string[]; + friends: string[]; + friendMaxLikes: number; + friendTags: string; + enableFriendTags: boolean; } -// 获取点赞记录 -export async function fetchLikeRecords( - workbenchId: string, - page: number = 1, - limit: number = 20, - keyword?: string -): Promise> { - try { - const params: any = { - workbenchId, - page: page.toString(), - limit: limit.toString(), - }; - - if (keyword) { - params.keyword = keyword; - } - - const res = await request>>({ - 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, - }; - } +// API响应类型 +export interface ApiResponse { + code: number; + msg: string; + data: T; +} + +// 分页响应类型 +export interface PaginatedResponse { + list: T[]; + total: number; + page: number; + limit: number; } diff --git a/nkebao/src/pages/workspace/auto-like/record/index.tsx b/nkebao/src/pages/workspace/auto-like/record/index.tsx index 5ccc5ce4..9bd51eda 100644 --- a/nkebao/src/pages/workspace/auto-like/record/index.tsx +++ b/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, - ReloadOutlined, + Button, + 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([]); - const [taskDetail, setTaskDetail] = useState(null); + const [records, setRecords] = useState([]); 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(); - fetchRecords(1, false); + if (!id) return; + 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 () => { - if (hasMore && !recordsLoading) { - await fetchRecords(currentPage + 1, true); - } + const handlePageChange = (newPage: number) => { + fetchLikeRecords(id!, newPage, pageSize, searchTerm) + .then((response: any) => { + setRecords(response.list || []); + setTotal(response.total || 0); + setCurrentPage(newPage); + }) + .catch(() => { + message.error("获取点赞记录失败，请稍后重试"); + }); }; - const renderRecordItem = (record: LikeRecord) => ( - -
-
- } - /> -
-
- {record.friendName} -
-
内容发布者
-
-
-
- {formatDate(record.momentTime || record.likeTime)} -
-
- -
- {record.content && ( -

{record.content}

- )} - - {Array.isArray(record.resUrls) && record.resUrls.length > 0 && ( -
- {record.resUrls.slice(0, 9).map((image: string, idx: number) => ( -
- {`内容图片 -
- ))} -
- )} -
- -
- } - /> -
- - {record.operatorName} - - 点赞了这条内容 -
-
- - ); - return ( window.history.back()} - left={ -
- 点赞记录 -
- } - /> - } - footer={} - > -
- {/* 任务信息卡片 */} - {taskDetail && ( -
-
-

{taskDetail.name}

- - {Number(taskDetail.status) === 1 ? "进行中" : "已暂停"} - -
-
-
- - 今日点赞： - - {taskDetail.todayLikeCount || 0} - -
-
- - 总点赞数： - - {taskDetail.totalLikeCount || 0} - -
-
-
- )} - - {/* 搜索区域 */} -
-
-
- + <> + +
+
} placeholder="搜索好友昵称或内容" - className={style["search-input"]} + className={styles.headerSearchInput} value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} onPressEnter={handleSearch} + allowClear />
- + loading={recordsLoading} + type="default" + shape="circle" + />
-
- - {/* 记录列表 */} -
- {recordsLoading && currentPage === 1 ? ( -
- -
加载中...
+ + } + footer={ + <> +
+ + `第 ${range[0]}-${range[1]} 条，共 ${total} 条` + } + size="default" + className={styles.pagination} + /> +
+ + } + > +
+
+ {recordsLoading ? ( +
+ {Array.from({ length: 3 }).map((_, index) => ( +
+
+ +
+ + +
+
+ +
+ + +
+ + +
+
+
+ ))}
) : records.length === 0 ? ( -
- -
暂无点赞记录
+
+ +

暂无点赞记录

) : ( - + <> + {records.map((record) => ( +
+
+
+ } + size={40} + className={styles.avatarImg} + /> +
+
+ {record.friendName} +
+
内容发布者
+
+
+ +
+ +
+ {record.content && ( +

{record.content}

+ )} + {Array.isArray(record.resUrls) && + record.resUrls.length > 0 && ( +
+ {record.resUrls + .slice(0, 9) + .map((image: string, idx: number) => ( +
+ {`内容图片 +
+ ))} +
+ )} +
+
+ } + size={32} + className={styles.operatorAvatar} + /> +
+ + {record.operatorName} + + + + 已赞 + +
+
+
+ ))} + )}
); -}; - -export default AutoLikeDetail; +} diff --git a/nkebao/src/pages/workspace/auto-like/record/record.module.scss b/nkebao/src/pages/workspace/auto-like/record/record.module.scss index 9bc931b6..ae062d02 100644 --- a/nkebao/src/pages/workspace/auto-like/record/record.module.scss +++ b/nkebao/src/pages/workspace/auto-like/record/record.module.scss @@ -1,351 +1,266 @@ -.detail-page { - background: #f5f5f5; - 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 { +// 搜索栏 +.headerSearchBar { display: flex; align-items: center; gap: 8px; - background: white; - border-radius: 8px; - padding: 12px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + padding: 16px; } - -.search-input-wrapper { +.headerSearchInputWrap { position: relative; flex: 1; } - -.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 { +.headerSearchIcon { position: absolute; - left: 8px; - top: 50%; - transform: translateY(-50%); - color: #999; - font-size: 14px; + left: 12px; + top: 10px; + width: 16px; + height: 16px; + color: #a3a3a3; +} +.headerSearchInput { + padding-left: 32px !important; +} +.spin { + animation: spin 1s linear infinite; +} +@keyframes spin { + 100% { transform: rotate(360deg); } } -.search-btn { - height: 36px; - padding: 0 12px; - border-radius: 6px; - font-size: 14px; - white-space: nowrap; -} - -.refresh-btn { - height: 36px; - width: 36px; - padding: 0; - border-radius: 6px; +// 分页 +.footerPagination { display: flex; - align-items: center; justify-content: center; - border: 1px solid #d9d9d9; - background: white; - cursor: pointer; - transition: all 0.2s; - - &:hover { + align-items: center; + padding: 12px 0; + background: #fff; +} +.pagination { + :global(.ant-pagination-item) { + border-radius: 6px; + } + :global(.ant-pagination-item-active) { + background: #1890ff; border-color: #1890ff; - color: #1890ff; } - - &:disabled { - opacity: 0.5; - cursor: not-allowed; + :global(.ant-pagination-prev), + :global(.ant-pagination-next) { + border-radius: 6px; + } + :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; } - -.records-list { +.contentWrap { + 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; } - -.record-card { - background: white; +.skeletonAvatar { + width: 40px; + 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; } - -.user-info { +.recordCardHeaderLeft { display: flex; align-items: center; gap: 12px; max-width: 65%; } - -.user-avatar { +.avatarImg { width: 40px; height: 40px; border-radius: 50%; - flex-shrink: 0; } - -.user-details { +.friendInfo { min-width: 0; } - -.user-name { - font-size: 14px; - font-weight: 600; - color: #333; +.friendName { + font-weight: 500; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; } - -.user-role { - font-size: 12px; - color: #666; - margin-top: 2px; +.friendSub { + font-size: 13px; + color: #888; } - -.record-time { - font-size: 12px; - color: #666; - background: #f8f9fa; - padding: 4px 8px; - border-radius: 4px; +.timeBadge { + background: #e8f0fe; white-space: nowrap; flex-shrink: 0; } - -.record-content { +.cardSep { + margin: 12px 0; +} +.cardContent { margin-bottom: 12px; } - -.content-text { - font-size: 14px; - color: #333; - line-height: 1.5; +.contentText { + color: #444; margin-bottom: 12px; white-space: pre-line; } - -.content-images { +.imgGrid { display: grid; - gap: 4px; - - &.single { - grid-template-columns: 1fr; - } - - &.double { - grid-template-columns: 1fr 1fr; - } - - &.multiple { - grid-template-columns: repeat(3, 1fr); - } + gap: 8px; } - -.image-item { - aspect-ratio: 1; - border-radius: 6px; +.grid1 { + grid-template-columns: 1fr; +} +.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; } - -.content-image { +.img { width: 100%; height: 100%; object-fit: cover; } -.like-info { +// 操作人 +.operatorWrap { display: flex; align-items: center; - gap: 8px; - padding: 8px 12px; - background: #f8f9fa; - border-radius: 6px; + margin-top: 16px; + padding: 8px; + background: #f3f4f6; + border-radius: 8px; } - -.operator-avatar { - width: 32px; - height: 32px; - border-radius: 50%; +.operatorAvatar { + width: 32px !important; + height: 32px !important; + margin-right: 8px; flex-shrink: 0; } - -.like-text { +.operatorInfo { font-size: 14px; - color: #666; - min-width: 0; + position: relative; + flex: 1; + position: relative; } - -.operator-name { - font-weight: 600; - color: #333; +.operatorName { + font-weight: 500; + max-width: 100%; + display: inline-block; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; - display: inline-block; - max-width: 100%; } - -.like-action { - margin-left: 4px; +.operatorAction { + color: #888; + 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); - } - } -} \ No newline at end of file