wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'laboratory' into anln

This commit is contained in:
al 2024-08-16 13:32:14 +08:00
parent 957abda50a d7dcb4554e
commit 9c1927833f
4 changed files with 346 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
app/profile/[mid]/page.js
View File

@ -26,6 +26,7 @@ import { getStreamerDetailInfo } from "@/api/space";
import { get } from "@/utils/storeInfo";
import { handleShowVideo } from "@/utils/tools/handleFuns";
import clipboard from "copy-to-clipboard";
import ImagesMask from "@/components/ImagesMask";
// import * as Clipboard from "expo-clipboard";
export default function PersonSpace() {
const { mid } = useParams();
@ -37,6 +38,7 @@ export default function PersonSpace() {
const [isFollow, setIsFollow] = useState(false);
const [topPhotos, setTopPhotos] = useState([]);
const currentIndex = useRef();
const imagesMaskRef = useRef(null);
// 获取屏幕高度
// const scrollHeight = 600;
useEffect(() => {
@ -46,40 +48,20 @@ export default function PersonSpace() {
}, []);
const showPhotos = (photos, index) => {
currentIndex.current = index;
const interval = setInterval(() => {
console.log("bbbbbb");
if (typeof window == "undefined") return;
document.addEventListener("touchstart", function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
var lastTouchEnd = 0;
document.addEventListener(
"touchend",
function (event) {
var now = new Date().getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
},
false
);
document.addEventListener("gesturestart", function (event) {
event.preventDefault();
});
const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
if (bodyBox) {
bodyBox.firstChild.lastChild.style.transform = `translateX(-${
currentIndex.current * (window.innerWidth + 16)
}px)`;
// console.log(bodyBox.firstChild.lastChild.style.transform);
}
}, 400);
handleShowImages(index, photos, interval);
// const interval = setInterval(() => {
// console.log("bbbbbb")
// const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
// if (bodyBox) {
// bodyBox.firstChild.lastChild.style.transform = `translateX(-${
// currentIndex.current * (window.innerWidth + 16)
// }px)`;
// // console.log(bodyBox.firstChild.lastChild.style.transform);
// }
// }, 400);
// handleShowImages(index, photos, interval);
// console.log(imagesMaskRef.current, photos);
imagesMaskRef.current.show(photos, index, streamerInfo);
// setVisible(true)
// console.log(imagesMaskRef.current);
// imagesMaskRef.current.show(
@ -87,55 +69,49 @@ export default function PersonSpace() {
// index
// );
};
const handleShowImages = (index, photos, interval) => {
if (typeof window == "undefined") return;
const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom);
mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`;
ImageViewer.clear();
ImageViewer.Multi.show({
images: photos.map((item) => item.url),
defaultIndex: index,
// renderFooter: (image, index) => {
// return renderFooter(photos[index]?.type == "hid", mediaDom);
// },
// const handleShowImages = (index, photos, interval) => {
// const mediaDom = document.createElement("div");
// mediaDom.style.width = "100vw";
// document.body.appendChild(mediaDom);
// mediaDom.className = `${
// photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
// }`;
// ImageViewer.clear();
// ImageViewer.Multi.show({
// images: photos.map((item) => item.url),
// defaultIndex: index,
// // renderFooter: (image, index) => {
// // return renderFooter(photos[index]?.type == "hid", mediaDom);
// // },
getContainer: mediaDom,
onIndexChange: (index) => {
if (typeof window == "undefined") return;
currentIndex.current = index;
mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`;
const leftBtn = document.getElementsByClassName(
"imagesBtnsControllerLeft"
)[0];
const rightBtn = document.getElementsByClassName(
"imagesBtnsControllerRight"
)[0];
if (leftBtn && rightBtn) {
if (!index) {
leftBtn.style.opacity = 0.5;
rightBtn.style.opacity = 1;
} else if (index == photos.length - 1) {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 0.5;
} else {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 1;
}
}
},
afterClose: () => {
mediaDom.remove();
clearInterval(interval);
},
classNames: { body: "photos-bodyBox" },
});
};
// getContainer: mediaDom,
// onIndexChange: (index) => {
// currentIndex.current = index;
// mediaDom.className = `${
// photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
// }`;
// const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
// const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
// if(leftBtn && rightBtn){
// if(!index){
// leftBtn.style.opacity=0.5
// rightBtn.style.opacity=1
// }else if(index==photos.length-1){
// leftBtn.style.opacity=1
// rightBtn.style.opacity=0.5
// }else{
// leftBtn.style.opacity=1
// rightBtn.style.opacity=1
// }
// }
// },
// afterClose: () => {
// mediaDom.remove();
// clearInterval(interval);
// },
// classNames: { body: "photos-bodyBox" },
// });
// };
const handleGetStreamerInfo = async () => {
try {
setLoading(true);
@ -646,6 +622,7 @@ export default function PersonSpace() {
avatar={streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0]}
streamerData={streamerInfo}
/>
<ImagesMask ref={imagesMaskRef} />
</div>
);
}

134
app/space/person_space_introduce/[mid]/page.js
View File

@ -15,6 +15,7 @@ import { getStreamerInfo } from "@/api/space";
import baseRequest from "@/utils/baseRequest";
import requireAPI from "@/utils/requireAPI";
import { handleShowVideo } from "@/utils/tools/handleFuns";
import ImagesMask from "@/components/ImagesMask";
export default function PersonSpaceIntroduce() {
const base = baseRequest();
const router = useRouter();
@ -25,6 +26,7 @@ export default function PersonSpaceIntroduce() {
const [data, setData] = useState(null);
const [isLoading, setIsloading] = useState(true);
const currentIndex = useRef();
const imagesMaskRef = useRef(null);
const { mid } = useParams();
useEffect(() => {
if (contentBox.current) {
@ -42,75 +44,74 @@ export default function PersonSpaceIntroduce() {
}, []);
const showPhotos = (photos, index) => {
currentIndex.current = index;
const interval = setInterval(() => {
if (typeof window == "undefined") return;
const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
if (bodyBox) {
bodyBox.firstChild.lastChild.style.transform = `translateX(-${
currentIndex.current * (window.innerWidth + 16)
}px)`;
// console.log(bodyBox.firstChild.lastChild.style.transform);
}
}, 400);
// const interval = setInterval(() => {
// console.log("bbbbbb")
// const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
// if (bodyBox) {
// bodyBox.firstChild.lastChild.style.transform = `translateX(-${
// currentIndex.current * (window.innerWidth + 16)
// }px)`;
// // console.log(bodyBox.firstChild.lastChild.style.transform);
// }
// }, 400);
handleShowImages(index, photos, interval);
// setVisible(true)
// console.log(imagesMaskRef.current);
// imagesMaskRef.current.show(
// photos.map((item) => item?.url),
// index
// );
};
const handleShowImages = (index, photos, interval) => {
if (typeof window == "undefined") return;
const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom);
mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`;
ImageViewer.clear();
ImageViewer.Multi.show({
images: photos.map((item) => item?.urls[0]),
defaultIndex: index,
// renderFooter: (image, index) => {
// return renderFooter(photos[index]?.type == "hid", mediaDom);
// },
getContainer: mediaDom,
onIndexChange: (index) => {
if (typeof window == "undefined") return;
currentIndex.current = index;
mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`;
const leftBtn = document.getElementsByClassName(
"imagesBtnsControllerLeft"
)[0];
const rightBtn = document.getElementsByClassName(
"imagesBtnsControllerRight"
)[0];
if (leftBtn && rightBtn) {
if (!index) {
leftBtn.style.opacity = 0.5;
rightBtn.style.opacity = 1;
} else if (index == photos.length - 1) {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 0.5;
} else {
leftBtn.style.opacity = 1;
rightBtn.style.opacity = 1;
}
}
},
afterClose: () => {
mediaDom.remove();
clearInterval(interval);
},
classNames: { body: "photos-bodyBox" },
// handleShowImages(index, photos, interval);
// console.log(imagesMaskRef.current, photos);
let newPhotos = photos.map((item) => {
return {
...item,
url: item.urls[0],
};
});
imagesMaskRef.current.show(newPhotos, index, data);
};
// const handleShowImages = (index, photos, interval) => {
// const mediaDom = document.createElement("div");
// mediaDom.style.width = "100vw";
// document.body.appendChild(mediaDom);
// mediaDom.className = `${
// photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
// }`;
// ImageViewer.clear();
// ImageViewer.Multi.show({
// images: photos.map((item) => item?.urls[0]),
// defaultIndex: index,
// // renderFooter: (image, index) => {
// // return renderFooter(photos[index]?.type == "hid", mediaDom);
// // },
// getContainer: mediaDom,
// onIndexChange: (index) => {
// currentIndex.current = index;
// mediaDom.className = `${
// photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
// }`;
// const leftBtn = document.getElementsByClassName(
// "imagesBtnsControllerLeft"
// )[0];
// const rightBtn = document.getElementsByClassName(
// "imagesBtnsControllerRight"
// )[0];
// if (leftBtn && rightBtn) {
// if (!index) {
// leftBtn.style.opacity = 0.5;
// rightBtn.style.opacity = 1;
// } else if (index == photos.length - 1) {
// leftBtn.style.opacity = 1;
// rightBtn.style.opacity = 0.5;
// } else {
// leftBtn.style.opacity = 1;
// rightBtn.style.opacity = 1;
// }
// }
// },
// afterClose: () => {
// mediaDom.remove();
// clearInterval(interval);
// },
// classNames: { body: "photos-bodyBox" },
// });
// };
//当空间价格为0时，直接加入空间
const handleJoinFreeSpace = async () => {
try {
@ -348,6 +349,7 @@ export default function PersonSpaceIntroduce() {
</div>
)}
</div>
<ImagesMask ref={imagesMaskRef} />
</div>
);
}

256
components/ImagesMask/index.jsx
View File

@ -13,14 +13,12 @@ import {
faAngleLeft,
faAngleRight,
faDownload,
faMinus,
faAdd,
} from "@fortawesome/free-solid-svg-icons";
import { createRoot } from "react-dom/client";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
const root =
typeof window !== "undefined"
? createRoot(document?.getElementById("maskDomBox"))
: null;
function ImagesMask({}, ref) {
const [visible, setVisible] = useState(false);
const [images, setImages] = useState([]);
@ -29,20 +27,25 @@ function ImagesMask({}, ref) {
const defaultIndex = useRef(null);
const router = useRouter();
useEffect(() => {
root.render(
<div>
<ImagesMaskContaint
images={images}
visible={visible}
ref={scrollRef}
setVisible={setVisible}
setImages={setImages}
router={router}
data={data}
defaultIndex={defaultIndex.current}
/>
</div>
);
if (visible) {
const root = createRoot(document?.getElementById("maskDomBox"));
root.render(
<div>
<ImagesMaskContaint
images={images}
visible={visible}
ref={scrollRef}
setVisible={setVisible}
setImages={setImages}
router={router}
data={data}
defaultIndex={defaultIndex.current}
root={root}
/>
</div>
);
}
// root.render(<div>xxxx</div>);
}, [visible]);
@ -67,16 +70,32 @@ function ImagesMask({}, ref) {
const ImagesMaskContaint = forwardRef(
(
{ visible, images, setVisible, setImages, router, data, defaultIndex = 0 },
{
visible,
images,
setVisible,
setImages,
router,
data,
defaultIndex = 0,
root,
},
ref
) => {
const [currentIndex, setCurrentIndex] = useState(0);
const [direction, setDirection] = useState("left");
const [initialX, setInitialX] = useState(0);
const [xOffset, setXOffset] = useState(0);
const [initialMoveX, setInitialMoveX] = useState(0);
const [initialMoveY, setInitialMoveY] = useState(0);
const [xOffsetMove, setXOffsetMove] = useState(0);
const [yOffsetMove, setYOffsetMove] = useState(0);
const [active, setActive] = useState(false);
const [zoomed, setZoomed] = useState(false);
const base = baseRequest();
const directionX = useRef(0);
// const imgDom = useRef(null);
const currentDistance = useRef(0);
// const getDistance = (e) => {
// e.stopPropagation();
// const distance = ref.current.scrollLeft;
@ -86,7 +105,8 @@ const ImagesMaskContaint = forwardRef(
// setCurrentIndex(defaultIndex);
// test3(defaultIndex - 1, "left");
if (defaultIndex) {
test3(defaultIndex - 1, "left");
// console.log("defaultIndex.current", defaultIndex);
test3(defaultIndex - 1, "left", true);
}
}, [defaultIndex]);
useEffect(() => {
@ -97,43 +117,106 @@ const ImagesMaskContaint = forwardRef(
}
}, [currentIndex]);
const test1 = (e) => {
setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset));
if (e.touches.length === 1) {
var touches = e.touches;
// console.log(currentIndex, e.target.children[0].offsetLeft);
setInitialMoveX(touches[0].clientX - e.target.children[0].offsetLeft);
setInitialMoveY(touches[0].clientY - e.target.children[0].offsetTop);
// console.log(touches[0].pageX- ref.current.getBoundingClientRect().left);
if (touches.length === 2) {
var touch1 = touches[0];
var touch2 = touches[1];
currentDistance.current = Math.hypot(
touch2.pageX - touch1.pageX,
touch2.pageY - touch1.pageY
);
}
if (touches.length === 1 && !zoomed) {
setInitialX(touches[0].clientX - (!currentIndex ? 0 : xOffset));
// 单点触摸
setActive(true);
}
};
const test2 = (e) => {
if (active) {
let X = e.touches[0].clientX - initialX;
setDirection(
directionX.current > e.touches[0].clientX ? "left" : "right"
);
ref.current.style.transform = "translateX(" + X + "px)";
directionX.current = e.touches[0].clientX;
}
};
const test3 = (index, currentDirection) => {
setActive(false);
let cxOffset = window.innerWidth;
if (currentDirection == "left") {
if (index < images.length - 1) {
setCurrentIndex(index + 1);
} else {
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
}
var touches = e.touches;
// if (touches.length == 2) {
// var touch1 = touches[0];
// var touch2 = touches[1];
// currentDistance.current = Math.hypot(
// touch2.pageX - touch1.pageX,
// touch2.pageY - touch1.pageY
// );
// let scale = currentDistance.current / ref.current.startDistance;
// let matrix = new WebKitCSSMatrix(
// window.getComputedStyle(ref.current.children[0]).transform
// );
// let currentScale = matrix.m11;
// // alert(currentDistance.current + "-" + ref.current.startDistance);
// let size =
// currentScale * scale < 0.5
// ? 0.5
// : currentScale * scale > 3
// ? 3
// : currentScale * scale;
// ref.current.children[0].style.transform =
// "matrix(" + size + ", 0, 0, " + size + ", 0, 0)";
// }
if (zoomed) {
let currentX = touches[0].clientX - initialMoveX;
let currentY = touches[0].clientY - initialMoveY;
// console.log(currentX + xOffsetMove);
ref.current.children[currentIndex].style.left = `${
currentX + xOffsetMove
}px`;
ref.current.children[currentIndex].style.top = `${
currentY + yOffsetMove - 54
}px`;
} else {
if (index > 0) {
setCurrentIndex(index - 1);
} else {
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
if (active) {
let X = touches[0].clientX - initialX;
setDirection(
directionX.current > touches[0].clientX ? "left" : "right"
);
ref.current.style.transform = "translateX(" + X + "px)";
directionX.current = touches[0].clientX;
}
}
// setInitialX(currentX);
setInitialX(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
if (currentDirection == "left" && index > images.length - 2) return;
setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
};
const test3 = (index, currentDirection, isActive) => {
// const rect = ref.current.getBoundingClientRect();
// console.log(ref.current.children[currentIndex].offsetTop);
setXOffsetMove(
ref.current.children[currentIndex].offsetLeft -
window.innerWidth * currentIndex
);
setYOffsetMove(ref.current.children[currentIndex].offsetTop + 54);
if (active || isActive) {
let cxOffset = window.innerWidth;
if (currentDirection == "left") {
if (index < images.length - 1) {
setCurrentIndex(index + 1);
} else {
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
}
} else {
if (index > 0) {
setCurrentIndex(index - 1);
} else {
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
}
}
// setInitialX(currentX);
setInitialX(
-cxOffset * (index + (currentDirection == "left" ? 1 : -1))
);
if (currentDirection == "left" && index > images.length - 2) return;
setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
}
};
// };
// };
// };
function downloadImage(url) {
let randomNum = "";
for (let i = 0; i < 10; i++) {
@ -149,6 +232,7 @@ const ImagesMaskContaint = forwardRef(
a.click();
});
}
return (
<div>
<Mask
@ -156,17 +240,46 @@ const ImagesMaskContaint = forwardRef(
className="z-[1002] h-screen flex justify-center items-center"
onMaskClick={() => {
setVisible(false), setImages([]), setCurrentIndex(null);
// root.unmount();
root.unmount();
}}
color="#000000d9"
>
<div className="relative">
{images[currentIndex]?.type != "hid" && (
<div
onClick={() => downloadImage(images[currentIndex]?.url)}
className="z-50 flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full absolute top-[12px] left-[12px]"
className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]"
style={{ width: "calc(100% - 24px)" }}
>
<FontAwesomeIcon icon={faDownload} size="xl" />
<div>
{/* <div
onClick={() => downloadImage(images[currentIndex]?.url)}
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
>
<FontAwesomeIcon icon={faDownload} size="xl" />
</div> */}
</div>
<div>
<div
onClick={() => {
setZoomed(!zoomed);
setActive(false);
ref.current.children[currentIndex].style.transform =
"matrix(" +
(zoomed ? 1 : 3) +
", 0, 0, " +
(zoomed ? 1 : 3) +
", 0, 0)";
ref.current.children[currentIndex].style.left = `0px`;
ref.current.children[currentIndex].style.top = `0px`;
}}
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
>
<FontAwesomeIcon
icon={zoomed ? faMinus : faAdd}
size="xl"
/>
</div>
</div>
</div>
)}
<div className="text-center mb-2 leading-[54px]">
@ -177,13 +290,13 @@ const ImagesMaskContaint = forwardRef(
style={{ height: "calc(100vh - 174px)" }}
onClick={() => {
setVisible(false), setImages([]), setCurrentIndex(null);
// root.unmount();
root.unmount();
}}
>
<div
ref={ref}
id="imagesScrollBox"
className="flex justify-center items-center transition-transform duration-300 h-full"
className="flex justify-center items-center transition-transform duration-300 h-full relative"
draggable={true}
onTouchStart={test1}
onTouchMove={test2}
@ -194,6 +307,17 @@ const ImagesMaskContaint = forwardRef(
<div
key={index}
className="flex-none w-screen relative h-full"
// onDoubleClick={() => {
// setZoomed(!zoomed);
// ref.current.children[0].style.transform =
// "matrix(" + zoomed
// ? 1
// : 3 + ", 0, 0, " + zoomed
// ? 1
// : 3 + ", 0, 0)";
// ref.current.style.left = `0px`;
// ref.current.style.top = `0px`;
// }}
>
{/* <img
src={item.url}
@ -208,6 +332,7 @@ const ImagesMaskContaint = forwardRef(
style={{
filter: item.type == "hid" ? "blur(10px)" : "none",
}}
// draggable={true}
height={"100%"}
fit="contain"
placeholder={
@ -255,7 +380,17 @@ const ImagesMaskContaint = forwardRef(
<div
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
onClick={() => {
test3(currentIndex, "right");
setActive(true);
setZoomed(false);
setInitialMoveX(0);
setInitialMoveY(0);
setXOffsetMove(0);
setYOffsetMove(0);
ref.current.children[currentIndex].style.transform =
"matrix(1, 0, 0, 1, 0, 0)";
ref.current.children[currentIndex].style.left = `0px`;
ref.current.children[currentIndex].style.top = `0px`;
test3(currentIndex, "right", true);
}}
>
<FontAwesomeIcon icon={faAngleLeft} size="xl" />
@ -263,7 +398,16 @@ const ImagesMaskContaint = forwardRef(
<div
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
onClick={() => {
test3(currentIndex, "left");
setZoomed(false);
setInitialMoveX(0);
setInitialMoveY(0);
setXOffsetMove(0);
setYOffsetMove(0);
ref.current.children[currentIndex].style.transform =
"matrix(1, 0, 0, 1, 0, 0)";
ref.current.children[currentIndex].style.left = `0px`;
ref.current.children[currentIndex].style.top = `0px`;
test3(currentIndex, "left", true);
}}
>
<FontAwesomeIcon icon={faAngleRight} size="xl" />

34
components/PostItem/index.js
View File

@ -81,24 +81,30 @@ export default function PostItem({
/>
)}
<div className="flex">
<Image
className="flex-none w-8 h-8 rounded-full mr-2"
fit="cover"
width={"2rem"}
height={"2rem"}
src={data.streamer_ext?.avatar.images[0].urls[0]}
alt=""
onClick={() => router.push("/profile/" + data.mid)}
/>
<div
className="h-max"
onClick={() => {
router.push("/profile/" + data.mid);
}}
>
<Image
className="flex-none w-8 h-8 rounded-full mr-2"
fit="cover"
width={"2rem"}
height={"2rem"}
src={data.streamer_ext?.avatar.images[0].urls[0]}
alt=""
/>
</div>
<div className="flex-1">
<div
className="flex justify-between items-center"
onClick={() => handleFollow(isFollow, data?.mid, setIsFollow)}
>
<div className="flex justify-between items-center ">
<span className="text-md">{data.streamer_ext?.name}</span>
{type == "post" && (
<span className="rounded-full bg-[#FFFFFF1A] px-2 py-1 text-xs text-white font-medium">
<span
onClick={() => handleFollow(isFollow, data?.mid, setIsFollow)}
className="rounded-full bg-[#FFFFFF1A] px-2 py-1 text-xs text-white font-medium"
>
{isFollow ? "已关注" : "关注"}
</span>
)}