bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

下拉隐藏简介等信息，优化超出文本长度交互

Browse Source
This commit is contained in:
Ultrame
2025-11-24 22:42:48 +08:00
parent 78ab8c9a42
commit 31194f67be
7 changed files with 222 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/components/UserInfo/index.tsx
View File

@@ -47,6 +47,8 @@ interface UserInfoCardProps {
user_info: Partial<UserInfoType>;
is_current_user: boolean;
is_following?: boolean;
collapseProfile?: boolean;
setMarginBottom?: boolean;
on_follow?: () => void;
on_message?: () => void;
on_share?: () => void;
@@ -66,12 +68,15 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
user_info,
is_current_user,
is_following = false,
collapseProfile,
setMarginBottom = true,
on_follow,
on_message,
on_share,
set_user_info,
onTab,
}) => {
const { setShowGuideBar } = useGlobalState();
const { updateUserInfo } = useUserActions();
@@ -170,11 +175,13 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
return;
}
if (field === "nickname") {
if (!is_current_user) return;
// 手动输入
setShowGuideBar(false);
setEditingField(field);
setEditModalVisible(true);
} else {
if (!is_current_user) return;
setShowGuideBar(false);
setEditingField(field);
setEditModalVisible(true);
@@ -376,7 +383,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
{/* 统计数据 */}
<View className="stats_section">
<View className="stats_container">
<View className="stats_container" style={{ marginBottom: `${collapseProfile && setMarginBottom ? "16px" : "unset"}` }}>
<View
className="stat_item clickable"
onClick={() => handle_stats_click("following")}
@@ -454,114 +461,121 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
</View>
{/* 标签和简介 */}
<View className="tags_bio_section">
<View className="tags_container">
{user_info.gender && user_info.gender !== "2" ? (
<View className="tag_item">
{user_info.gender === "0" && (
<Image
className="tag_icon"
src={require("../../static/userInfo/male.svg")}
{
!collapseProfile ?
<View className="tags_bio_section">
<View className="tags_container">
{user_info.gender && user_info.gender !== "2" ? (
<View className="tag_item">
{user_info.gender === "0" && (
<Image
className="tag_icon"
src={require("../../static/userInfo/male.svg")}
onClick={() => {
editable && handle_open_edit_modal("gender");
}}
/>
)}
{user_info.gender === "1" && (
<Image
className="tag_icon"
src={require("../../static/userInfo/female.svg")}
onClick={() => {
editable && handle_open_edit_modal("gender");
}}
/>
)}
</View>
) : is_current_user && user_info.gender !== "2" ? (
<View
className="button_edit"
onClick={() => {
editable && handle_open_edit_modal("gender");
handle_open_edit_modal("gender");
}}
/>
)}
{user_info.gender === "1" && (
<Image
className="tag_icon"
src={require("../../static/userInfo/female.svg")}
>
<Text>选择性别</Text>
</View>
) : null}
{user_info.ntrp_level !== "" ? (
<View
className="tag_item"
onClick={() => {
editable && handle_open_edit_modal("gender");
editable && handle_open_edit_modal("ntrp_level");
}}
/>
)}
>
<Text className="tag_text">{`NTRP ${formatNtrpDisplay(
user_info.ntrp_level
)}`}</Text>
</View>
) : is_current_user ? (
<View
className="button_edit"
onClick={() => {
handle_open_edit_modal("ntrp_level");
}}
>
<Text>测测你的NTRP水平</Text>
</View>
) : null}
{user_info.occupation ? (
<View
className="tag_item"
onClick={() => {
editable && handle_open_edit_modal("occupation");
}}
>
<Text className="tag_text">
{user_info.occupation.split(" ")[2]}
</Text>
</View>
) : is_current_user ? (
<View
className="button_edit"
onClick={() => {
handle_open_edit_modal("occupation");
}}
>
<Text>选择职业</Text>
</View>
) : null}
{user_info.country || user_info.province || user_info.city ? (
<View
className="tag_item"
onClick={() => editable && handle_open_edit_modal("location")}
>
<Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
</View>
) : is_current_user ? (
<View
className="button_edit"
onClick={() => handle_open_edit_modal("location")}
>
<Text>选择地区</Text>
</View>
) : null}
</View>
) : is_current_user && user_info.gender !== "2" ? (
<View
className="button_edit"
onClick={() => {
handle_open_edit_modal("gender");
}}
className="personal_profile"
onClick={() => handle_open_edit_modal("personal_profile")}
>
<Text>选择性别</Text>
{!collapseProfile ?
user_info.personal_profile ? (
<Text className="bio_text">{user_info.personal_profile}</Text>
) : is_current_user ? (
<View className="personal_profile_edit">
<Image
className="edit_icon"
src={require("../../static/userInfo/info_edit.svg")}
/>
<Text className="bio_text">点击添加简介，让更多人了解你</Text>
</View>
) :
null :
null}
</View>
) : null}
{user_info.ntrp_level !== "" ? (
<View
className="tag_item"
onClick={() => {
editable && handle_open_edit_modal("ntrp_level");
}}
>
<Text className="tag_text">{`NTRP ${formatNtrpDisplay(
user_info.ntrp_level
)}`}</Text>
</View>
) : is_current_user ? (
<View
className="button_edit"
onClick={() => {
handle_open_edit_modal("ntrp_level");
}}
>
<Text>测测你的NTRP水平</Text>
</View>
) : null}
{user_info.occupation ? (
<View
className="tag_item"
onClick={() => {
editable && handle_open_edit_modal("occupation");
}}
>
<Text className="tag_text">
{user_info.occupation.split(" ")[2]}
</Text>
</View>
) : is_current_user ? (
<View
className="button_edit"
onClick={() => {
handle_open_edit_modal("occupation");
}}
>
<Text>选择职业</Text>
</View>
) : null}
{user_info.country || user_info.province || user_info.city ? (
<View
className="tag_item"
onClick={() => editable && handle_open_edit_modal("location")}
>
<Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
</View>
) : is_current_user ? (
<View
className="button_edit"
onClick={() => handle_open_edit_modal("location")}
>
<Text>选择地区</Text>
</View>
) : null}
</View>
<View
className="personal_profile"
onClick={() => handle_open_edit_modal("personal_profile")}
>
{user_info.personal_profile ? (
<Text className="bio_text">{user_info.personal_profile}</Text>
) : is_current_user ? (
<View className="personal_profile_edit">
<Image
className="edit_icon"
src={require("../../static/userInfo/info_edit.svg")}
/>
<Text className="bio_text">点击添加简介，让更多人了解你</Text>
</View>
) : null}
</View>
</View>
</View> :
null
}
{/* 编辑个人简介弹窗 */}
<EditModal
@@ -687,7 +701,8 @@ const arePropsEqual = (
prevUserInfoStr === nextUserInfoStr &&
prevProps.editable === nextProps.editable &&
prevProps.is_current_user === nextProps.is_current_user &&
prevProps.is_following === nextProps.is_following
prevProps.is_following === nextProps.is_following &&
prevProps.collapseProfile === nextProps.collapseProfile
);
};
@@ -827,9 +842,8 @@ export const GameTabs: React.FC<GameTabsProps> = ({
<Text className="tab_text">{hosted_text}</Text>
</View>
<View
className={`tab_item ${
active_tab === "participated" ? "active" : ""
}`}
className={`tab_item ${active_tab === "participated" ? "active" : ""
}`}
onClick={() => on_tab_change("participated")}
>
<Text className="tab_text">{participated_text}</Text>