用户名称添加@<>/等字符的检查

2025-11-26 16:58:32 +08:00
parent 6751ec3c00
commit c471b90ecf
3 changed files with 318 additions and 273 deletions
--- a/src/components/EditModal/index.tsx
+++ b/src/components/EditModal/index.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import { View, Text, Textarea, Input, Picker } from '@tarojs/components';
-import Taro from '@tarojs/taro';
-import './EditModal.scss';
-import { useKeyboardHeight } from '@/store/keyboardStore'
+import React, { useState, useEffect } from "react";
+import { View, Text, Textarea, Input, Picker } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import "./EditModal.scss";
+import { useKeyboardHeight } from "@/store/keyboardStore";

 interface EditModalProps {
  visible: boolean;
@@ -11,6 +11,7 @@ interface EditModalProps {
  placeholder: string;
  initialValue: string;
  maxLength: number;
+  invalidCharacters: string;
  onSave: (value: string) => void;
  onCancel: () => void;
  validationMessage?: string;
@@ -23,46 +24,69 @@ const EditModal: React.FC<EditModalProps> = ({
  placeholder,
  initialValue,
  maxLength,
+  invalidCharacters = "",
  onSave,
  onCancel,
-  validationMessage
+  validationMessage,
 }) => {
  const [value, setValue] = useState(initialValue);
  const [isValid, setIsValid] = useState(true);
  const [isIllegal, setIsIllegal] = useState(false);

  // 使用全局键盘状态
-  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    addListener,
+    initializeKeyboardListener,
+  } = useKeyboardHeight();
  // 使用全局键盘状态监听
  useEffect(() => {
    // 初始化全局键盘监听器
-    initializeKeyboardListener()
+    initializeKeyboardListener();

    // 添加本地监听器
    const removeListener = addListener((height, visible) => {
-      console.log('AiImportPopup 收到键盘变化:', height, visible)
-    })
+      console.log("AiImportPopup 收到键盘变化:", height, visible);
+    });

    return () => {
-      removeListener()
-    }
-  }, [initializeKeyboardListener, addListener])
+      removeListener();
+    };
+  }, [initializeKeyboardListener, addListener]);
  useEffect(() => {
    if (visible) {
      setValue(initialValue);
-      const valid = initialValue.length >= 2 && initialValue.length <= maxLength;
+      const valid =
+        initialValue.length >= 2 && initialValue.length <= maxLength;
      setIsValid(valid);
    }
  }, [visible, initialValue]);

+  const createExcludeRegex = (chars: string) => {
+    // 转义正则表达式特殊字符
+    const escapedChars = chars.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+    // 构建负向字符类正则表达式
+    // ^[^...]*$ 匹配不包含任何指定字符的完整字符串
+    const pattern = `[${escapedChars}]`;
+
+    return new RegExp(pattern);
+  };
  const handle_input_change = (e: any) => {
    const new_value = e.detail.value;
    setValue(new_value);

-    const illegal = /\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER|CREATE|EXEC|DECLARE)\b|('|--|\/\*|\*\/|;|#)|(=|'|"|`|\\|\|\|&&)|\bOR\s+['"]?[\w]+['"]?\s*=\s*['"]?[\w]+['"]?|\bUNION\s+SELECT\b|\bDROP\s+TABLE\b|\bINSERT\s+INTO\b|\bUPDATE\s+[\w]+\s+SET\b|\bDELETE\s+FROM\b/i.test(new_value)
-    setIsIllegal(illegal)
+    const illegal =
+      /\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER|CREATE|EXEC|DECLARE)\b|('|--|\/\*|\*\/|;|#)|(=|'|"|`|\\|\|\|&&)|\bOR\s+['"]?[\w]+['"]?\s*=\s*['"]?[\w]+['"]?|\bUNION\s+SELECT\b|\bDROP\s+TABLE\b|\bINSERT\s+INTO\b|\bUPDATE\s+[\w]+\s+SET\b|\bDELETE\s+FROM\b/i.test(
+        new_value
+      );
+    setIsIllegal(illegal);
    // 验证输入
-    const valid = new_value.length >= 2 && new_value.length <= maxLength;
+    const valid =
+      new_value.length >= 2 &&
+      new_value.length <= maxLength &&
+      !createExcludeRegex(invalidCharacters).test(new_value);
    setIsValid(valid);
  };

@@ -70,16 +94,16 @@ const EditModal: React.FC<EditModalProps> = ({
    if (!isValid) {
      Taro.showToast({
        title: validationMessage || `请填写 2-${maxLength} 个字符`,
-        icon: 'none',
-        duration: 2000
+        icon: "none",
+        duration: 2000,
      });
      return;
    }
    if (isIllegal) {
      Taro.showToast({
        title: "输入的字符非法",
-        icon: 'none',
-        duration: 2000
+        icon: "none",
+        duration: 2000,
      });
      return;
    }
@@ -97,7 +121,16 @@ const EditModal: React.FC<EditModalProps> = ({

  return (
    <View className="edit_modal_overlay">
-      <View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight}px`) : undefined }}>
+      <View
+        className="edit_modal_container"
+        style={{
+          paddingBottom: isKeyboardVisible
+            ? type === "nickname"
+              ? `${keyboardHeight + 60}px`
+              : `${keyboardHeight}px`
+            : undefined,
+        }}
+      >
        {/* 标题栏 */}
        <View className="modal_header">
          <Text className="modal_title">{title}</Text>
@@ -113,8 +146,7 @@ const EditModal: React.FC<EditModalProps> = ({
        <View className="modal_content">
          {/* 文本输入区域 */}
          <View className="input_container">
-
-            {type === 'nickname' ? (
+            {type === "nickname" ? (
              <>
                <Input
                  className="text_input nickname_input"
@@ -128,7 +160,13 @@ const EditModal: React.FC<EditModalProps> = ({
                  autoFocus={true}
                />
                <View className="char_count">
-                  <Text className={`count_text ${value.length > maxLength && "un-valid"}`}>{value.length}/{maxLength}</Text>
+                  <Text
+                    className={`count_text ${
+                      value.length > maxLength && "un-valid"
+                    }`}
+                  >
+                    {value.length}/{maxLength}
+                  </Text>
                </View>
              </>
            ) : (
@@ -143,33 +181,40 @@ const EditModal: React.FC<EditModalProps> = ({
                  adjustPosition={false}
                />
                <View className="char_count">
-                  <Text className={`count_text ${value.length > maxLength && "un-valid"}`}>{value.length}/{maxLength}</Text>
+                  <Text
+                    className={`count_text ${
+                      value.length > maxLength && "un-valid"
+                    }`}
+                  >
+                    {value.length}/{maxLength}
+                  </Text>
                </View>
              </>
            )}
          </View>

          {/* 验证提示 */}
-          {
-            isIllegal ?
+          {isIllegal ? (
+            <View className="validation_message">
+              <Text className="validation_text illegal">输入的字符非法</Text>
+            </View>
+          ) : (
+            !isValid && (
              <View className="validation_message">
-                <Text className="validation_text illegal">
-                  输入的字符非法
+                <Text className="validation_text">
+                  {validationMessage || `请填写 2-${maxLength} 个字符`}
                </Text>
-              </View> :
-              !isValid && (
-                <View className="validation_message">
-                  <Text className="validation_text">
-                    {validationMessage || `请填写 2-${maxLength} 个字符`}
-                  </Text>
-                </View>
-              )
-          }
+              </View>
+            )
+          )}
        </View>

        {/* 底部按钮 */}
        <View className="modal_footer">
-          <View className={`save_button ${!isValid || isIllegal ? "disabled" : ""}`} onClick={handle_save}>
+          <View
+            className={`save_button ${!isValid || isIllegal ? "disabled" : ""}`}
+            onClick={handle_save}
+          >
            <Text className="save_text">保存</Text>
          </View>
        </View>
@@ -178,4 +223,4 @@ const EditModal: React.FC<EditModalProps> = ({
  );
 };

-export default EditModal;
+export default EditModal;
--- a/src/components/UserInfo/index.tsx
+++ b/src/components/UserInfo/index.tsx
@@ -76,7 +76,6 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
  set_user_info,
  onTab,
 }) => {
-
  const { setShowGuideBar } = useGlobalState();
  const { updateUserInfo } = useUserActions();

@@ -383,7 +382,14 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({

      {/* 统计数据 */}
      <View className="stats_section">
-        <View className="stats_container" style={{ marginBottom: `${collapseProfile && setMarginBottom ? "16px" : "unset"}` }}>
+        <View
+          className="stats_container"
+          style={{
+            marginBottom: `${
+              collapseProfile && setMarginBottom ? "16px" : "unset"
+            }`,
+          }}
+        >
          <View
            className="stat_item clickable"
            onClick={() => handle_stats_click("following")}
@@ -461,121 +467,118 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
      </View>

      {/* 标签和简介 */}
-      {
-        !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={() => {
-                    handle_open_edit_modal("gender");
-                  }}
-                >
-                  <Text>选择性别</Text>
-                </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>
+      {!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={() => {
+                  handle_open_edit_modal("gender");
+                }}
+              >
+                <Text>选择性别</Text>
+              </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")}
+          >
+            {!collapseProfile ? (
+              user_info.personal_profile ? (
+                <Text className="bio_text">{user_info.personal_profile}</Text>
              ) : is_current_user ? (
-                <View
-                  className="button_edit"
-                  onClick={() => {
-                    handle_open_edit_modal("ntrp_level");
-                  }}
-                >
-                  <Text>测测你的NTRP水平</Text>
+                <View className="personal_profile_edit">
+                  <Image
+                    className="edit_icon"
+                    src={require("../../static/userInfo/info_edit.svg")}
+                  />
+                  <Text className="bio_text">点击添加简介，让更多人了解你</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")}
-            >
-              {!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>
-          </View> :
-          null
-      }
+              ) : null
+            ) : null}
+          </View>
+        </View>
+      ) : null}

      {/* 编辑个人简介弹窗 */}
      <EditModal
@@ -589,11 +592,12 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
        }
        initialValue={form_data[editing_field as keyof typeof form_data] || ""}
        maxLength={editing_field === "nickname" ? 20 : 100}
+        invalidCharacters={editing_field === "nickname" ? "@<>/" : ""}
        onSave={handle_edit_modal_save}
        onCancel={handle_edit_modal_cancel}
        validationMessage={
          editing_field === "nickname"
-            ? "请填写 1-20 个字符"
+            ? "请填写 2-24 个字符，不包括 @<>/等无效字符"
            : "请填写 2-100 个字符"
        }
      />
@@ -663,7 +667,9 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
          visible={ntrp_picker_visible}
          setvisible={setNtrpPickerVisible}
          value={
-            !form_data.ntrp_level || form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]
+            !form_data.ntrp_level || form_data.ntrp_level === "0"
+              ? ["3.0"]
+              : [form_data.ntrp_level]
          }
          onChange={handle_ntrp_level_change}
        />
@@ -842,8 +848,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>
--- a/src/user_pages/edit/index.tsx
+++ b/src/user_pages/edit/index.tsx
@@ -416,8 +416,8 @@ const EditProfilePage: React.FC = () => {
  };

  const handleAddGroup = () => {
-    console.log("加入社群～")
-  }
+    console.log("加入社群～");
+  };

  const getDefaultOption = (options) => {
    if (!Array.isArray(options) || options.length === 0) {
@@ -693,9 +693,9 @@ const EditProfilePage: React.FC = () => {
                    >
                      {form_data.phone
                        ? form_data.phone.replace(
-                          /(\d{3})(\d{4})(\d{4})/,
-                          "$1 $2 $3"
-                        )
+                            /(\d{3})(\d{4})(\d{4})/,
+                            "$1 $2 $3"
+                          )
                        : "未绑定"}
                    </Button>
                    <Image
@@ -710,7 +710,9 @@ const EditProfilePage: React.FC = () => {

            <View className="logout_section group">
              <View className="logout_button" onClick={handleCustomerService}>
-                <Image src={require("@/static/wallet/custom-service.svg")}></Image>
+                <Image
+                  src={require("@/static/wallet/custom-service.svg")}
+                ></Image>
                <Text className="logout_text">客服聊天</Text>
              </View>
              <View className="logout_button" onClick={handleAddGroup}>
@@ -747,124 +749,115 @@ const EditProfilePage: React.FC = () => {
            : "介绍一下你的喜好，或者训练习惯"
        }
        initialValue={form_data[editing_field as keyof typeof form_data] || ""}
-        maxLength={editing_field === "nickname" ? 20 : 100}
+        maxLength={editing_field === "nickname" ? 24 : 100}
+        invalidCharacters={editing_field === "nickname" ? "@<>/" : ""}
        onSave={handle_edit_modal_save}
        onCancel={handle_edit_modal_cancel}
        validationMessage={
          editing_field === "nickname"
-            ? "请填写 1-20 个字符"
+            ? "请填写 2-24 个字符，不包括 @<>/等无效字符"
            : "请填写 2-100 个字符"
        }
      />
      {/* 性别选择弹窗 */}
-      {
-        gender_picker_visible && (
-          <PopupPicker
-            showHeader={true}
-            title="选择性别"
-            confirmText="保存"
-            options={[
-              [
-                { text: "男", value: "0" },
-                { text: "女", value: "1" },
-                { text: "保密", value: "2" },
-              ],
-            ]}
-            visible={gender_picker_visible}
-            setvisible={setGenderPickerVisible}
-            value={form_data.gender === "" ? ["0"] : [form_data.gender]}
-            onChange={handle_gender_change}
-          />
-        )
-      }
+      {gender_picker_visible && (
+        <PopupPicker
+          showHeader={true}
+          title="选择性别"
+          confirmText="保存"
+          options={[
+            [
+              { text: "男", value: "0" },
+              { text: "女", value: "1" },
+              { text: "保密", value: "2" },
+            ],
+          ]}
+          visible={gender_picker_visible}
+          setvisible={setGenderPickerVisible}
+          value={form_data.gender === "" ? ["0"] : [form_data.gender]}
+          onChange={handle_gender_change}
+        />
+      )}
      {/* 生日选择弹窗 */}
-      {
-        birthday_picker_visible && (
-          <PopupPicker
-            minYear={1970}
-            maxYear={new Date().getFullYear()}
-            showHeader={true}
-            title="选择生日"
-            confirmText="保存"
-            visible={birthday_picker_visible}
-            setvisible={setBirthdayPickerVisible}
-            value={[
-              new Date(form_data.birthday).getFullYear(),
-              new Date(form_data.birthday).getMonth() + 1,
-              new Date(form_data.birthday).getDate(),
-            ]}
-            type="day"
-            onChange={handle_birthday_change}
-          />
-        )
-      }
+      {birthday_picker_visible && (
+        <PopupPicker
+          minYear={1970}
+          maxYear={new Date().getFullYear()}
+          showHeader={true}
+          title="选择生日"
+          confirmText="保存"
+          visible={birthday_picker_visible}
+          setvisible={setBirthdayPickerVisible}
+          value={[
+            new Date(form_data.birthday).getFullYear(),
+            new Date(form_data.birthday).getMonth() + 1,
+            new Date(form_data.birthday).getDate(),
+          ]}
+          type="day"
+          onChange={handle_birthday_change}
+        />
+      )}
      {/* 地区选择弹窗 */}
-      {
-        location_picker_visible && (
-          <PopupPicker
-            showHeader={true}
-            title="选择地区"
-            confirmText="保存"
-            options={cities}
-            visible={location_picker_visible}
-            setvisible={setLocationPickerVisible}
-            value={
-              form_data.country
-                ? [form_data.country, form_data.province, form_data.city]
-                : getDefaultOption(cities)
-            }
-            onChange={handle_location_change}
-          />
-        )
-      }
+      {location_picker_visible && (
+        <PopupPicker
+          showHeader={true}
+          title="选择地区"
+          confirmText="保存"
+          options={cities}
+          visible={location_picker_visible}
+          setvisible={setLocationPickerVisible}
+          value={
+            form_data.country
+              ? [form_data.country, form_data.province, form_data.city]
+              : getDefaultOption(cities)
+          }
+          onChange={handle_location_change}
+        />
+      )}
      {/* NTRP水平选择弹窗 */}
-      {
-        ntrp_picker_visible && (
-          <PopupPicker
-            showHeader={true}
-            title="选择 NTRP 自评水平"
-            confirmText="保存"
-            options={[
-              [
-                { text: "1.5", value: "1.5" },
-                { text: "2.0", value: "2.0" },
-                { text: "2.5", value: "2.5" },
-                { text: "3.0", value: "3.0" },
-                { text: "3.5", value: "3.5" },
-                { text: "4.0", value: "4.0" },
-                { text: "4.5", value: "4.5" },
-              ],
-            ]}
-            type="ntrp"
-            // img={(user_info as UserInfoType)?.avatar_url}
-            visible={ntrp_picker_visible}
-            setvisible={setNtrpPickerVisible}
-            value={
-              form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]
-            }
-            onChange={handle_ntrp_level_change}
-          />
-        )
-      }
+      {ntrp_picker_visible && (
+        <PopupPicker
+          showHeader={true}
+          title="选择 NTRP 自评水平"
+          confirmText="保存"
+          options={[
+            [
+              { text: "1.5", value: "1.5" },
+              { text: "2.0", value: "2.0" },
+              { text: "2.5", value: "2.5" },
+              { text: "3.0", value: "3.0" },
+              { text: "3.5", value: "3.5" },
+              { text: "4.0", value: "4.0" },
+              { text: "4.5", value: "4.5" },
+            ],
+          ]}
+          type="ntrp"
+          // img={(user_info as UserInfoType)?.avatar_url}
+          visible={ntrp_picker_visible}
+          setvisible={setNtrpPickerVisible}
+          value={
+            form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]
+          }
+          onChange={handle_ntrp_level_change}
+        />
+      )}
      {/* 职业选择弹窗 */}
-      {
-        occupation_picker_visible && (
-          <PopupPicker
-            showHeader={true}
-            title="选择职业"
-            confirmText="保存"
-            options={professions}
-            visible={occupation_picker_visible}
-            setvisible={setOccupationPickerVisible}
-            value={
-              form_data.occupation
-                ? [...form_data.occupation.split(" ")]
-                : getDefaultOption(professions)
-            }
-            onChange={handle_occupation_change}
-          />
-        )
-      }
+      {occupation_picker_visible && (
+        <PopupPicker
+          showHeader={true}
+          title="选择职业"
+          confirmText="保存"
+          options={professions}
+          visible={occupation_picker_visible}
+          setvisible={setOccupationPickerVisible}
+          value={
+            form_data.occupation
+              ? [...form_data.occupation.split(" ")]
+              : getDefaultOption(professions)
+          }
+          onChange={handle_occupation_change}
+        />
+      )}
      {/* 取消关注确认弹窗 */}
      <CommonDialog
        visible={showLogoutDialog}
@@ -877,7 +870,7 @@ const EditProfilePage: React.FC = () => {
        contentTitle="确定要注销账号吗？"
        contentDesc="你的账号将会彻底删除，该操作不可恢复。"
      />
-    </View >
+    </View>
  );
 };