样式优化

src/components/UserInfo/index.scss

@@ -1,4 +1,4 @@
-@use '../../scss/common.scss' as *;
+@use "../../scss/common.scss" as *;
 
 // 用户信息卡片样式
 .user_info_card {
@@ -38,7 +38,6 @@
     }
 
     .tag_icon {
-
       /* Auto layout */
       display: flex;
       flex-direction: row;
@@ -49,7 +48,6 @@
       width: 40px;
       height: 40px;
 
-
       /* Inside auto layout */
       flex: none;
       order: 2;
@@ -75,7 +73,7 @@
         align-items: center;
 
         .stat_number {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 600;
           font-size: 18px;
           line-height: 1.4em;
@@ -84,7 +82,7 @@
         }
 
         .stat_label {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 500;
           font-size: 12px;
           line-height: 1.4em;
@@ -139,7 +137,7 @@
         transition: all 0.3s ease;
 
         &.following {
-          background: #FFFFFF;
+          background: #ffffff;
           color: #000000;
 
           .button_text {
@@ -157,11 +155,11 @@
         }
 
         .button_text {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 600;
           font-size: 14px;
           line-height: 1.4em;
-          color: #FFFFFF;
+          color: #ffffff;
         }
       }
 
@@ -169,7 +167,7 @@
         width: 40px;
         height: 40px;
         padding: unset;
-        background: #FFFFFF;
+        background: #ffffff;
         border: 0.5px solid rgba(0, 0, 0, 0.12);
         border-radius: 50%;
         display: flex;
@@ -187,7 +185,7 @@
       .edit_button {
         min-width: 60px;
         height: 40px;
-        background: #FFFFFF;
+        background: #ffffff;
         border: 0.5px solid rgba(0, 0, 0, 0.12);
         border-radius: 999px;
         display: flex;
@@ -198,7 +196,7 @@
         padding: 0 12px;
 
         .button_text {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 500;
           font-size: 14px;
           line-height: 1.4em;
@@ -209,7 +207,7 @@
       .share_button {
         min-width: 60px;
         height: 40px;
-        background: #FFFFFF;
+        background: #ffffff;
         border: 0.5px solid rgba(0, 0, 0, 0.12);
         border-radius: 999px;
         display: flex;
@@ -221,7 +219,7 @@
         margin: 0px !important;
 
         .button_text {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 500;
           font-size: 14px;
           line-height: 1.4em;
@@ -249,7 +247,7 @@
         gap: 4px;
         padding: 6px 8px;
         height: 20px;
-        background: #FFFFFF;
+        background: #ffffff;
         border: 0.5px solid rgba(0, 0, 0, 0.16);
         border-radius: 999px;
         box-sizing: border-box;
@@ -261,7 +259,7 @@
         }
 
         .tag_text {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 500;
           font-size: 11px;
           line-height: 1.8em;
@@ -271,7 +269,7 @@
       }
 
       .button_edit {
-        font-family: 'PingFang SC';
+        font-family: "PingFang SC";
         font-weight: 500;
         font-size: 11px;
         line-height: 1.8em;
@@ -284,7 +282,7 @@
 
         &::before,
         &::after {
-          content: '';
+          content: "";
           width: 6px;
           height: 1px;
           display: inline-block;
@@ -316,14 +314,13 @@
       }
 
       .bio_text {
-        font-family: 'PingFang SC';
+        font-family: "PingFang SC";
         font-weight: 400;
         font-size: 14px;
         line-height: 1.571em;
         color: rgba(0, 0, 0, 0.65);
         white-space: pre-line;
       }
-
     }
   }
 }
@@ -343,7 +340,7 @@
       transition: all 0.3s ease;
 
       .tab_text {
-        font-family: 'PingFang SC';
+        font-family: "PingFang SC";
         font-weight: 600;
         font-size: 20px;
         line-height: 1.4em;
@@ -369,7 +366,7 @@
 
 // 球局卡片样式
 .game_card {
-  background: #FFFFFF;
+  background: #ffffff;
   border: 0.5px solid rgba(0, 0, 0, 0.08);
   border-radius: 20px;
   padding: 0 0 12px;
@@ -391,7 +388,7 @@
     padding: 12px 15px 0;
 
     .game_title {
-      font-family: 'PingFang SC';
+      font-family: "PingFang SC";
       font-weight: 600;
       font-size: 16px;
       line-height: 1.5em;
@@ -414,7 +411,7 @@
     padding: 6px 15px 0;
 
     .time_text {
-      font-family: 'PingFang SC';
+      font-family: "PingFang SC";
       font-weight: 400;
       font-size: 12px;
       line-height: 1.5em;
@@ -432,7 +429,7 @@
     .location_text,
     .type_text,
     .distance_text {
-      font-family: 'PingFang SC';
+      font-family: "PingFang SC";
       font-weight: 400;
       font-size: 12px;
       line-height: 1.5em;
@@ -440,7 +437,7 @@
     }
 
     .separator {
-      font-family: 'PingFang SC';
+      font-family: "PingFang SC";
       font-weight: 400;
       font-size: 14px;
       line-height: 1.3em;
@@ -462,7 +459,7 @@
       width: 56.44px;
       height: 56.44px;
       border-radius: 9px;
-      border: 1.5px solid #FFFFFF;
+      border: 1.5px solid #ffffff;
 
       &:nth-child(1) {
         top: 4.18px;
@@ -505,7 +502,7 @@
           width: 20px;
           height: 20px;
           border-radius: 50%;
-          border: 1px solid #FFFFFF;
+          border: 1px solid #ffffff;
           cursor: pointer;
           transition: transform 0.2s ease;
 
@@ -516,7 +513,7 @@
       }
 
       .participants_count {
-        background: #FFFFFF;
+        background: #ffffff;
         border: 0.5px solid rgba(0, 0, 0, 0.16);
         border-radius: 999px;
         padding: 6px;
@@ -526,7 +523,7 @@
         justify-content: center;
 
         .count_text {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 500;
           font-size: 11px;
           line-height: 1.8em;
@@ -541,7 +538,7 @@
       gap: 4px;
 
       .info_tag {
-        background: #FFFFFF;
+        background: #ffffff;
         border: 0.5px solid rgba(0, 0, 0, 0.16);
         border-radius: 999px;
         padding: 6px 8px;
@@ -551,7 +548,7 @@
         justify-content: center;
 
         .tag_text {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 500;
           font-size: 11px;
           line-height: 1.8em;
@@ -561,4 +558,4 @@
       }
     }
   }
-}
+}

src/components/UserInfo/index.tsx

@@ -41,7 +41,7 @@ import { useCities, useProfessions } from "@/store/pickerOptionsStore";
 
 // 用户信息卡片组件属性
 interface UserInfoCardProps {
-  editable: boolean,
+  editable: boolean;
   user_info: Partial<UserInfoType>;
   is_current_user: boolean;
   is_following?: boolean;
@@ -85,8 +85,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
   const [form_data, set_form_data] = useState<Partial<UserInfoType>>({});
 
   useDidShow(() => {
-    set_form_data({ ...user_info })
+    set_form_data({ ...user_info });
-  })
+  });
 
   // 职业数据
   const professions = useProfessions();
@@ -188,8 +188,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       ) {
         await updateUserInfo({ ...field });
         set_form_data((prev) => {
-          return { ...prev, ...field }
+          return { ...prev, ...field };
-        })
+        });
         // 更新本地状态
         // setFormData((prev) => ({ ...prev, ...field }));
         // setUserInfo((prev) => ({ ...prev, ...field }));
@@ -198,8 +198,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
         const update_data = { [field as string]: value };
         await updateUserInfo(update_data);
         set_form_data((prev) => {
-          return { ...prev, ...update_data }
+          return { ...prev, ...update_data };
-        })
+        });
         // 更新本地状态
         // setFormData((prev) => ({ ...prev, [field as string]: value }));
         // setUserInfo((prev) => ({ ...prev, [field as string]: value }));
@@ -287,7 +287,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
     }
 
     return defaultOptions;
-  }
+  };
 
   return (
     <View className="user_info_card">
@@ -308,6 +308,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
           <View className="tag_item" onClick={on_edit}>
             <Image
               className="tag_icon"
+              style="gap: 0;"
               src={require("../../static/userInfo/edit.svg")}
             />
           </View>
@@ -335,7 +336,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             </Text>
             <Text className="stat_label">粉丝</Text>
           </View>
-          <View className="stat_item clickable"
+          <View
+            className="stat_item clickable"
             onClick={() => onTab?.("hosted")}
           >
             <Text className="stat_number">
@@ -343,7 +345,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             </Text>
             <Text className="stat_label">主办</Text>
           </View>
-          <View className="stat_item clickable"
+          <View
+            className="stat_item clickable"
             onClick={() => onTab?.("participated")}
           >
             <Text className="stat_number">
@@ -430,7 +433,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
               className="tag_item"
               onClick={() => {
                 editable && handle_open_edit_modal("ntrp_level");
-              }}>
+              }}
+            >
               <Text className="tag_text">{`NTRP ${user_info.ntrp_level}`}</Text>
             </View>
           ) : is_current_user ? (
@@ -448,7 +452,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
               className="tag_item"
               onClick={() => {
                 editable && handle_open_edit_modal("occupation");
-              }}>
+              }}
+            >
               <Text className="tag_text">
                 {user_info.occupation.split(" ")[2]}
               </Text>
@@ -466,7 +471,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
           {user_info.country || user_info.province || user_info.city ? (
             <View
               className="tag_item"
-              onClick={() => editable && handle_open_edit_modal("location")}>
+              onClick={() => editable && handle_open_edit_modal("location")}
+            >
               <Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
             </View>
           ) : is_current_user ? (
@@ -534,7 +540,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
           options={cities}
           visible={location_picker_visible}
           setvisible={setLocationPickerVisible}
-          value={form_data.country ? [form_data.country, form_data.province, form_data.city] : getDefaultOption(cities)}
+          value={
+            form_data.country
+              ? [form_data.country, form_data.province, form_data.city]
+              : getDefaultOption(cities)
+          }
           onChange={handle_location_change}
         />
       )}
@@ -558,7 +568,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
           img={user_info.avatar_url || ""}
           visible={ntrp_picker_visible}
           setvisible={setNtrpPickerVisible}
-          value={form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]}
+          value={
+            form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]
+          }
           onChange={handle_ntrp_level_change}
         />
       )}
@@ -570,7 +582,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
           options={professions}
           visible={occupation_picker_visible}
           setvisible={setOccupationPickerVisible}
-          value={form_data.occupation ? [...form_data.occupation.split(" ")] : getDefaultOption(professions)}
+          value={
+            form_data.occupation
+              ? [...form_data.occupation.split(" ")]
+              : getDefaultOption(professions)
+          }
           onChange={handle_occupation_change}
         />
       )}
@@ -711,8 +727,9 @@ 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>

src/user_pages/edit/index.scss

@@ -5,8 +5,8 @@
     circle at 50% 0,
     /* 光晕圆心在顶部中间 */ rgba(191, 255, 239, 0.9) 0px,
     /* 中间更深的浅蓝 */ rgba(191, 255, 239, 0.5) 200px,
-    /* 100px 处开始淡化 */ #FAFAFA 300px,
+    /* 100px 处开始淡化 */ #fafafa 300px,
-    /* 到 200px 变成白色 */ #FAFAFA 100% /* 200px 以下全白 */
+    /* 到 200px 变成白色 */ #fafafa 100% /* 200px 以下全白 */
   );
   position: relative;
   // overflow: hidden;
@@ -306,15 +306,15 @@
           position: absolute;
           left: 36px;
           right: 12px;
-          height: 0.5px;
+          height: 0.5pt;
-          background: rgba(0, 0, 0, 0.08);
+          background: rgba(0, 0, 0, 0.06);
           border-radius: 99px;
         }
       }
 
       .divider {
-        height: 0.5px;
+        height: 0.5pt;
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: rgba(0, 0, 0, 0.06);
         margin-left: 35px;
         box-sizing: border-box;
       }

src/user_pages/edit/index.tsx

@@ -451,7 +451,10 @@ const EditProfilePage: React.FC = () => {
                     />
                   </View>
                 </View>
-                <View className="divider"></View>
+                <View
+                  className="divider"
+                  style="transform: translate(0, 0);"
+                ></View>
               </View>
 
               {/* 生日 */}
@@ -603,9 +606,9 @@ const EditProfilePage: React.FC = () => {
                     >
                       {form_data.phone
                         ? form_data.phone.replace(
-                          /(\d{3})(\d{4})(\d{4})/,
+                            /(\d{3})(\d{4})(\d{4})/,
-                          "$1 $2 $3"
+                            "$1 $2 $3"
-                        )
+                          )
                         : "未绑定"}
                     </Button>
                     <Image

src/user_pages/myself/index.scss

@@ -6,7 +6,7 @@
   position: relative;
   overflow-y: auto;
   box-sizing: border-box;
-  background-color: #FAFAFA;
+  background-color: #fafafa;
 
   &::-webkit-scrollbar {
     display: none;
@@ -19,7 +19,7 @@
 // 背景渐变过渡动画
 @keyframes backgroundGradient {
   0% {
-    background: #FFFFFF;
+    background: #ffffff;
   }
   100% {
     background: radial-gradient(
@@ -35,8 +35,8 @@
 // 主要内容区域
 .main_content {
   // position: relative;
-  background: #FFFFFF;
+  background: #ffffff;
-  animation: backgroundGradient 0.6s ease-in-out forwards;
+  animation: backgroundGradient 0s ease-in-out forwards;
   z-index: 5;
   flex: 1;
   margin-top: 0;
@@ -127,6 +127,7 @@
 
       .action_card {
         @include card-base;
+        border-radius: 12px;
         display: flex;
         align-items: center;
         overflow: hidden;
@@ -143,9 +144,9 @@
           cursor: pointer;
           transition: background-color 0.3s ease;
 
-          &:hover {
+          // &:hover {
-            background-color: rgba(0, 0, 0, 0.02);
+          //   background-color: rgba(0, 0, 0, 0.02);
-          }
+          // }
 
           .action_icon {
             width: 20px;
@@ -172,7 +173,7 @@
     .tab_container {
       display: flex;
       gap: 16px;
-      padding: 12px 15px;
+      padding: 12px 0;
 
       .tab_item {
         padding: 12px 0;