feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/foundation/account-ui-base/src/components/loading-container.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { type FC } from 'react';
+
+import { Spin } from '@coze-arch/bot-semi';
+
+export const LoadingContainer: FC = () => (
+  <div className="w-full h-full flex items-center justify-center">
+    <Spin spinning style={{ height: '100%', width: '100%' }} />
+  </div>
+);

frontend/packages/foundation/account-ui-base/src/components/require-auth-container/index.module.less

@@ -0,0 +1,18 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .mask {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: #F7F7FA;
+  }
+
+}

frontend/packages/foundation/account-ui-base/src/components/require-auth-container/index.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { type PropsWithChildren, type FC } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { UIButton } from '@coze-arch/bot-semi';
+import {
+  useHasError,
+  checkLogin,
+  useLoginStatus,
+} from '@coze-foundation/account-adapter';
+
+import { LoadingContainer } from '../loading-container';
+
+interface ErrorPageProps {
+  onRetry: () => void;
+}
+
+const ErrorContainer: FC<ErrorPageProps> = ({ onRetry }) => (
+  <div className="w-full h-full flex items-center justify-center flex-col">
+    {I18n.t('login_failed')}
+    <UIButton onClick={onRetry}>{I18n.t('Retry')}</UIButton>
+  </div>
+);
+
+const Mask: FC<PropsWithChildren> = ({ children }) => (
+  <div className="z-1 absolute bg-[#F7F7FA] w-full h-full left-0 top-0">
+    {children}
+  </div>
+);
+
+// 在需要时渲染错误状态 & loading
+const LoginCheckMask: FC<{ needLogin: boolean; loginOptional: boolean }> = ({
+  needLogin,
+  loginOptional,
+}) => {
+  const loginStatus = useLoginStatus();
+  const isLogined = loginStatus === 'logined';
+  const hasError = useHasError();
+  if (hasError && needLogin) {
+    return (
+      <Mask>
+        <ErrorContainer onRetry={checkLogin} />;
+      </Mask>
+    );
+  }
+
+  if (needLogin && !loginOptional && !isLogined) {
+    return (
+      <Mask>
+        <LoadingContainer />
+      </Mask>
+    );
+  }
+  return null;
+};
+
+export const RequireAuthContainer: FC<
+  PropsWithChildren<{ needLogin: boolean; loginOptional: boolean }>
+> = ({ children, needLogin, loginOptional }) => (
+  <>
+    <LoginCheckMask needLogin={needLogin} loginOptional={loginOptional} />
+    {children}
+  </>
+);

frontend/packages/foundation/account-ui-base/src/components/user-info-panel/index.module.less

@@ -0,0 +1,92 @@
+.update-avatar {
+  margin-bottom: 24px;
+}
+
+.edit-profile {
+  :global {
+    .coz-icon-button-mini {
+      line-height: 1;
+    }
+
+    .coz-typography {
+      @apply coz-fg-primary;
+    }
+  }
+}
+
+.label-wrap {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  align-self: flex-start;
+  justify-content: flex-start;
+
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.label {
+  width: 76px;
+  margin-bottom: 0;
+
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.submit {
+  width: 100%;
+  margin-top: 48px;
+}
+
+.count {
+  margin: 0 12px 0 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #737577;
+}
+
+.upload-button {
+  font-size: 12px;
+  line-height: 16px;
+
+  a {
+    font-weight: 400;
+    color: var(--light-usage-primary-color-primary, #0077fa);
+  }
+}
+
+.filed-readonly {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .text {
+    line-height: 20px;
+  }
+
+  > button {
+    > button:last-child,
+    > span:last-child {
+      margin-left: 4px;
+    }
+  }
+}
+
+.field-edit {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+
+  .field-edit-children {
+    flex: 1;
+  }
+
+  .field-btn {
+    align-self: end;
+  }
+
+  .btn {
+    margin-left: 16px;
+  }
+}

frontend/packages/foundation/account-ui-base/src/components/user-info-panel/index.tsx

@@ -0,0 +1,437 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import {
+  type PropsWithChildren,
+  type ReactNode,
+  useRef,
+  useState,
+  useEffect,
+} from 'react';
+
+import classNames from 'classnames';
+import { useRequest } from 'ahooks';
+import { userStoreService } from '@coze-studio/user-store';
+import {
+  passportApi,
+  usernameRegExpValidate,
+} from '@coze-foundation/account-adapter';
+import { UpdateUserAvatar } from '@coze-common/biz-components';
+import { REPORT_EVENTS, createReportEvent } from '@coze-arch/report-events';
+import { I18n } from '@coze-arch/i18n';
+import { refreshUserInfo } from '@coze-arch/foundation-sdk';
+import { IconCozWarningCircleFillPalette } from '@coze-arch/coze-design/icons';
+import { Input, Toast, Select } from '@coze-arch/coze-design';
+import { Form, type Upload } from '@coze-arch/bot-semi';
+import { isApiError } from '@coze-arch/bot-http';
+import { DeveloperApi } from '@coze-arch/bot-api';
+
+import { UsernameInput } from './username-input';
+import { UserInfoField, type UserInfoFieldProps } from './user-info-field';
+
+import styles from './index.module.less';
+
+// 用户输入 username 自动检查的时间
+export const CHECK_USER_NAME_DEBOUNCE_TIME = 1000;
+
+const WrappedInputWithCount: React.FC<
+  Pick<UserInfoFieldProps, 'value' | 'onChange' | 'onEnterPress'>
+> = ({ value, onChange, onEnterPress }) => (
+  <Input
+    value={value}
+    onChange={onChange}
+    maxLength={20}
+    autoFocus
+    onEnterPress={onEnterPress}
+    placeholder={I18n.t('setting_name_placeholder')}
+  />
+);
+
+const WrappedUsernameInput: React.FC<
+  Pick<
+    UserInfoFieldProps,
+    'value' | 'onChange' | 'onEnterPress' | 'errorMessage'
+  >
+> = ({ value, onChange, onEnterPress, errorMessage }) => (
+  <UsernameInput
+    style={{ marginBottom: 0 }}
+    value={value}
+    errorMessage={errorMessage}
+    onChange={onChange}
+    autoFocus
+    onEnterPress={onEnterPress}
+  />
+);
+
+const WrappedPasswordInput: React.FC<
+  Pick<UserInfoFieldProps, 'value' | 'onChange' | 'onEnterPress'>
+> = ({ value, onChange, onEnterPress }) => (
+  <Input
+    mode="password"
+    value={value}
+    onChange={onChange}
+    autoFocus
+    onEnterPress={onEnterPress}
+  />
+);
+
+const getLanguageOptions = () => [
+  {
+    label: I18n.t('settings_language_zh'),
+    value: 'zh-CN',
+  },
+  {
+    label: I18n.t('settings_language_en'),
+    value: 'en-US',
+  },
+];
+
+const WrappedSelectInput: React.FC<
+  Pick<
+    UserInfoFieldProps,
+    'value' | 'onChange' | 'onEnterPress' | 'errorMessage'
+  >
+> = ({ value, onChange, onEnterPress, errorMessage }) => (
+  <Select
+    optionList={getLanguageOptions()}
+    value={value}
+    onChange={val => {
+      onChange?.(val as string);
+    }}
+    className="w-[120px]"
+  />
+);
+
+const UserInfoFieldWrap: React.FC<PropsWithChildren<{ label?: ReactNode }>> = ({
+  children,
+  label,
+}) => (
+  <div className={styles['label-wrap']}>
+    <Form.Label text={label} className={styles.label} />
+    {children}
+  </div>
+);
+
+const updateProfileEvent = createReportEvent({
+  eventName: REPORT_EVENTS.editUserProfile,
+});
+
+const updateProfileCheckEvent = createReportEvent({
+  eventName: REPORT_EVENTS.updateUserProfileCheck,
+});
+
+const getUserName = (userInfo?: DataItem.UserInfo | null): string =>
+  userInfo?.bui_audit_info?.audit_status === 1
+    ? (userInfo?.bui_audit_info?.audit_info.user_unique_name ??
+      userInfo?.app_user_info.user_unique_name ??
+      '')
+    : (userInfo?.app_user_info.user_unique_name ?? '');
+
+// eslint-disable-next-line @coze-arch/max-line-per-function
+export const UserInfoPanel = () => {
+  const userInfo = userStoreService.useUserInfo();
+
+  const [nickname, setNickname] = useState(userInfo?.name);
+
+  const [username, setUsername] = useState(getUserName(userInfo));
+
+  const [userNameErrorInfo, setUsernameErrorInfo] = useState('');
+
+  const [lang, setLang] = useState(
+    userInfo?.locale ?? navigator.language ?? 'en-US',
+  );
+
+  const [password, setPassword] = useState('');
+
+  const [loading, setLoading] = useState(false);
+  const [avatar, setAvatar] = useState(userInfo?.avatar_url ?? '');
+  const uploadRef = useRef<Upload>(null);
+
+  const onNicknameChange = async (name?: string) => {
+    if (!name) {
+      return;
+    }
+    try {
+      updateProfileEvent.start();
+
+      setLoading(true);
+      await passportApi.updateUserProfile({
+        name,
+      });
+      updateProfileEvent.success();
+    } catch (error) {
+      updateProfileEvent.error({
+        error: error as Error,
+        reason: 'update nickname failed',
+      });
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onPasswordChange = async (newPassword?: string) => {
+    try {
+      updateProfileEvent.start();
+      await passportApi.updatePassword({
+        password: newPassword ?? '',
+        email: userInfo?.email ?? '',
+      });
+      updateProfileEvent.success();
+    } catch (error) {
+      updateProfileEvent.error({
+        error: error as Error,
+        reason: 'update password failed',
+      });
+      throw error;
+    }
+  };
+
+  const onLanguageChange = async (newLang?: string) => {
+    if (!newLang) {
+      return;
+    }
+
+    try {
+      updateProfileEvent.start();
+
+      await passportApi.updateUserProfile({
+        locale: newLang,
+      });
+      localStorage.setItem('i18next', newLang === 'en-US' ? 'en' : newLang);
+      updateProfileEvent.success();
+      // 更新语言设置需要刷新页面才能生效
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
+    } catch (error) {
+      updateProfileEvent.error({
+        error: error as Error,
+        reason: 'update language failed',
+      });
+      throw error;
+    }
+  };
+
+  const handleUsernameRegexpError = (value?: string) => {
+    if (!value) {
+      setUsernameErrorInfo('');
+      return '';
+    }
+    const message = usernameRegExpValidate(value) || '';
+    setUsernameErrorInfo(message);
+    return message;
+  };
+
+  const { run: validateUsername, cancel: cancelValidateUsername } = useRequest(
+    async (innerUsername: string) => {
+      await DeveloperApi.UpdateUserProfileCheck(
+        {
+          user_unique_name: innerUsername,
+        },
+        { __disableErrorToast: true },
+      );
+    },
+    {
+      manual: true,
+      debounceWait: CHECK_USER_NAME_DEBOUNCE_TIME,
+      debounceLeading: false,
+      debounceTrailing: true,
+      onBefore: () => {
+        updateProfileCheckEvent.start();
+        setLoading(true);
+      },
+      onError: error => {
+        updateProfileCheckEvent.error({ error, reason: error.message });
+        if (isApiError(error)) {
+          setUsernameErrorInfo(error.msg ?? '');
+        }
+      },
+      onSuccess: () => {
+        updateProfileCheckEvent.success();
+        setUsernameErrorInfo('');
+      },
+      onFinally: () => {
+        setLoading(false);
+      },
+    },
+  );
+
+  const onUsernameChange = async (innerUsername?: string) => {
+    if (!innerUsername) {
+      return;
+    }
+    try {
+      updateProfileEvent.start();
+
+      setLoading(true);
+
+      await passportApi.updateUserProfile({
+        user_unique_name: innerUsername,
+      });
+      updateProfileEvent.success();
+    } catch (error) {
+      updateProfileEvent.error({
+        error: error as Error,
+        reason: 'update username failed',
+      });
+
+      if (isApiError(error)) {
+        setUsernameErrorInfo(error.msg ?? '');
+      }
+
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onUserInfoFieldCancel = () => {
+    refreshUserInfo();
+    setUsernameErrorInfo('');
+  };
+
+  useEffect(() => {
+    setNickname(userInfo?.name);
+    setUsername(getUserName(userInfo));
+    setAvatar(userInfo?.avatar_url ?? '');
+  }, [userInfo]);
+
+  // 在进入和离开时均刷新一次用户信息
+  useEffect(() => {
+    refreshUserInfo();
+    return () => {
+      refreshUserInfo();
+    };
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        styles['edit-profile'],
+        'flex flex-col w-full h-full',
+      )}
+    >
+      <UpdateUserAvatar
+        className={styles['update-avatar']}
+        value={avatar}
+        onSuccess={url => {
+          setAvatar(url);
+          Toast.success({
+            content: I18n.t('upload_avatar_success'),
+            showClose: false,
+          });
+        }}
+        onError={() =>
+          Toast.error({
+            content: 'upload_avatar_failed',
+          })
+        }
+        ref={uploadRef}
+      />
+      <UserInfoFieldWrap label={I18n.t('user_info_username')}>
+        <div className="flex">
+          <UserInfoField
+            loading={loading}
+            className={styles['info-field']}
+            value={username}
+            onChange={v => {
+              setUsername(v ?? '');
+              const message = handleUsernameRegexpError(v);
+              if (message) {
+                cancelValidateUsername();
+                setLoading(false);
+              } else {
+                v && validateUsername(v);
+              }
+            }}
+            customContent={
+              !username ? (
+                <div
+                  className={classNames(
+                    'inline-flex items-center gap-[2px] shrink-0',
+                    'text-[12px] font-[500] coz-fg-hglt-red',
+                  )}
+                >
+                  <IconCozWarningCircleFillPalette />
+                  {I18n.t('setting_username_empty')}
+                </div>
+              ) : undefined
+            }
+            errorMessage={userNameErrorInfo}
+            customComponent={WrappedUsernameInput}
+            onSave={onUsernameChange}
+            onCancel={() => {
+              setUsername(getUserName(userInfo));
+              onUserInfoFieldCancel();
+            }}
+          />
+        </div>
+      </UserInfoFieldWrap>
+      <UserInfoFieldWrap label={I18n.t('user_info_custom_name')}>
+        <div className="flex">
+          <UserInfoField
+            loading={loading}
+            className={styles['info-field']}
+            value={nickname}
+            onChange={setNickname}
+            customComponent={WrappedInputWithCount}
+            onSave={onNicknameChange}
+            onCancel={onUserInfoFieldCancel}
+          />
+        </div>
+      </UserInfoFieldWrap>
+      <UserInfoFieldWrap label={I18n.t('user_info_email')}>
+        <div className="flex">
+          <UserInfoField
+            readonly
+            className={styles['info-field']}
+            value={userInfo?.email || '-'}
+          />
+        </div>
+      </UserInfoFieldWrap>
+      <UserInfoFieldWrap label={I18n.t('user_info_password')}>
+        <div className="flex">
+          <UserInfoField
+            className={styles['info-field']}
+            value={password}
+            customContent={'******' /*<PasswordDesc value={password} />*/}
+            customComponent={WrappedPasswordInput}
+            onChange={val => setPassword(val ?? '')}
+            onSave={onPasswordChange}
+            onCancel={onUserInfoFieldCancel}
+          />
+        </div>
+      </UserInfoFieldWrap>
+      <UserInfoFieldWrap label={I18n.t('language')}>
+        <div className="flex">
+          <UserInfoField
+            className={styles['info-field']}
+            value={lang}
+            customContent={
+              getLanguageOptions().find(item => item.value === lang)?.label
+            }
+            customComponent={WrappedSelectInput}
+            onChange={langValue =>
+              setLang((langValue as 'zh-CN' | 'en-US') ?? 'zh-CN')
+            }
+            onSave={onLanguageChange}
+          />
+        </div>
+      </UserInfoFieldWrap>
+    </div>
+  );
+};

frontend/packages/foundation/account-ui-base/src/components/user-info-panel/password-field.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState } from 'react';
+
+import { IconCozEyeClose, IconCozEye } from '@coze-arch/coze-design/icons';
+
+export const PasswordDesc = ({ value }: { value: string }) => {
+  const [show] = useState(false);
+
+  const displayValue = show ? value : '******';
+
+  return (
+    <div className="flex">
+      <div>{displayValue}</div>
+      {show ? <IconCozEye /> : <IconCozEyeClose />}
+    </div>
+  );
+};

frontend/packages/foundation/account-ui-base/src/components/user-info-panel/user-info-field.tsx

@@ -0,0 +1,200 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import {
+  type CSSProperties,
+  type ComponentType,
+  type PropsWithChildren,
+  type ReactNode,
+  useState,
+} from 'react';
+
+import classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozEdit } from '@coze-arch/coze-design/icons';
+import {
+  IconButton,
+  Input,
+  Button,
+  Tooltip,
+  Typography,
+} from '@coze-arch/coze-design';
+
+import s from './index.module.less';
+
+interface BaseValueProps {
+  value?: string;
+  onChange?: (v?: string) => void;
+  onEnterPress?: () => void;
+  errorMessage?: string;
+}
+
+export interface UserInfoFieldProps extends BaseValueProps {
+  onSave?: (v?: string) => Promise<void>;
+  onCancel?: () => void;
+  loading?: boolean;
+  customComponent?: ComponentType<BaseValueProps>;
+  className?: string;
+  style?: CSSProperties;
+  readonly?: boolean;
+  disabled?: boolean;
+  disabledTip?: ReactNode;
+  customContent?: ReactNode;
+}
+
+const EditWrap: React.FC<
+  PropsWithChildren<
+    Pick<
+      UserInfoFieldProps,
+      | 'onSave'
+      | 'onCancel'
+      | 'loading'
+      | 'className'
+      | 'style'
+      | 'errorMessage'
+      | 'value'
+    >
+  >
+> = ({
+  onSave,
+  onCancel,
+  loading,
+  children,
+  className,
+  style,
+  errorMessage,
+  value,
+}) => (
+  <div className={classNames(s['field-edit'], className)} style={style}>
+    <div className={s['field-edit-children']}>{children}</div>
+    <Button
+      className={s.btn}
+      color="primary"
+      loading={loading}
+      onClick={() => {
+        onCancel?.();
+      }}
+      data-testid="bot-edit-field-cancel-button"
+    >
+      {I18n.t('Cancel')}
+    </Button>
+    <Button
+      disabled={Boolean(errorMessage) || !value}
+      className={s.btn}
+      loading={loading}
+      onClick={() => {
+        onSave?.();
+      }}
+      data-testid="bot-edit-field-save-button"
+    >
+      {I18n.t('setting_name_save')}
+    </Button>
+  </div>
+);
+
+export const UserInfoField: React.FC<UserInfoFieldProps> = ({
+  value,
+  onChange,
+  onCancel,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  customComponent: CustomComponent,
+  onSave,
+  loading,
+  className,
+  style,
+  readonly,
+  disabled,
+  disabledTip,
+  errorMessage,
+  customContent,
+}) => {
+  const [isEdit, setEdit] = useState(false);
+  const handleSave = async () => {
+    await onSave?.(value);
+    setEdit(false);
+  };
+  const EditButton = (
+    <IconButton
+      disabled={disabled}
+      icon={<IconCozEdit />}
+      size="mini"
+      color="secondary"
+      className="ml-[8px]"
+      onClick={() => {
+        setEdit(true);
+      }}
+    />
+  );
+
+  if (!isEdit) {
+    return (
+      <div className={classNames(s['filed-readonly'], className)} style={style}>
+        {customContent ? (
+          customContent
+        ) : (
+          <Typography.Text
+            fontSize="14px"
+            className="!font-medium coz-fg-primary"
+            ellipsis
+          >
+            {value}
+          </Typography.Text>
+        )}
+        {!readonly &&
+          (disabled && disabledTip ? (
+            <Tooltip content={disabledTip}>{EditButton}</Tooltip>
+          ) : (
+            EditButton
+          ))}
+      </div>
+    );
+  }
+  if (CustomComponent) {
+    return (
+      <EditWrap
+        value={value}
+        errorMessage={errorMessage}
+        onSave={handleSave}
+        loading={loading}
+        onCancel={() => {
+          setEdit(false);
+          onCancel?.();
+        }}
+      >
+        <CustomComponent
+          errorMessage={errorMessage}
+          onEnterPress={handleSave}
+          value={value}
+          onChange={onChange}
+        />
+      </EditWrap>
+    );
+  }
+  return (
+    <EditWrap
+      value={value}
+      errorMessage={errorMessage}
+      onSave={handleSave}
+      loading={loading}
+      onCancel={() => {
+        setEdit(false);
+        onCancel?.();
+      }}
+    >
+      <Input onEnterPress={handleSave} value={value} onChange={onChange} />
+    </EditWrap>
+  );
+};

frontend/packages/foundation/account-ui-base/src/components/user-info-panel/username-input/index.module.less

@@ -0,0 +1,94 @@
+.input {
+  input {
+    /* stylelint-disable-next-line declaration-no-important */
+    padding: 6px 0 6px 16px !important;
+  }
+
+  :global(.semi-input-prefix) {
+    width: 42px;
+    height: 100%;
+    margin: 0;
+    padding: 0 16px;
+
+    border-radius: 8px 0 0 8px;
+  }
+
+  :global(.semi-input-suffix) {
+    >span {
+      padding-right: 16px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+
+      >span:first-child {
+        margin-right: 4px;
+      }
+
+      >span:last-child {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  &.page {
+    border-color: rgba(29, 28, 35, 16%);
+  }
+
+  &.modal {
+    border-color: rgba(29, 28, 35, 8%);
+  }
+
+  &:hover {
+    border-color: var(--semi-color-focus-border);
+  }
+
+  &:focus-within {
+    border-color: var(--semi-color-focus-border);
+  }
+
+  &.error {
+    border-color: var(--semi-color-danger-light-hover);
+
+    :global(.semi-input-prefix) {
+      background: #ffe0d2;
+    }
+
+    &:hover {
+      // border-color: var(--semi-color-danger-light-hover) !important;
+    }
+
+    &:focus-within {
+      /* stylelint-disable-next-line declaration-no-important */
+      border-color: var(--semi-color-danger) !important;
+    }
+  }
+}
+
+.page {
+  margin-bottom: 12px;
+
+  :global(.semi-input-prefix) {
+    border-right: 1px solid rgba(29, 28, 35, 16%);
+  }
+
+  &.error {
+    :global(.semi-input-prefix) {
+      border-right-color: transparent;
+    }
+  }
+}
+
+.modal {
+  margin-bottom: 8px;
+
+  :global(.semi-input-prefix) {
+    border-right: 1px solid rgba(29, 28, 35, 8%);
+  }
+
+  &.error {
+    :global(.semi-input-prefix) {
+      border-right-color: transparent;
+    }
+  }
+}
+

frontend/packages/foundation/account-ui-base/src/components/user-info-panel/username-input/index.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { Form, Input, type InputProps } from '@coze-arch/coze-design';
+
+import s from './index.module.less';
+
+export const USER_NAME_MAX_LEN = 20;
+
+interface InputWithCountProps extends InputProps {
+  // 设置字数限制并显示字数统计
+  getValueLength?: (value?: InputProps['value'] | string) => number;
+}
+
+export interface UsernameInputProps
+  extends Omit<
+    InputWithCountProps,
+    'prefix' | 'placeholder' | 'maxLength' | 'validateStatus'
+  > {
+  scene?: 'modal' | 'page';
+  errorMessage?: string;
+}
+
+export const UsernameInput: React.FC<UsernameInputProps> = ({
+  className,
+  scene = 'page',
+  errorMessage,
+  ...props
+}) => {
+  const isError = Boolean(errorMessage);
+  return (
+    <>
+      <Input
+        className={classNames(
+          s.input,
+          isError && s.error,
+          scene === 'modal' ? s.modal : s.page,
+          className,
+        )}
+        validateStatus={isError ? 'error' : 'default'}
+        prefix="@"
+        placeholder={I18n.t('username_placeholder')}
+        maxLength={USER_NAME_MAX_LEN}
+        {...props}
+      />
+      <Form.ErrorMessage error={errorMessage} />
+    </>
+  );
+};