feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/foundation/account-ui-base/.stylelintrc.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});

frontend/packages/foundation/account-ui-base/README.md

@@ -0,0 +1,16 @@
+# @coze-foundation/account-ui-base
+
+> Project template for react component with storybook.
+
+## Features
+
+- [x] eslint & ts
+- [x] esm bundle
+- [x] umd bundle
+- [x] storybook
+
+## Commands
+
+- init: `rush update`
+- dev: `npm run dev`
+- build: `npm run build`

frontend/packages/foundation/account-ui-base/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["dist"]
+    }
+  ]
+}

frontend/packages/foundation/account-ui-base/eslint.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});

frontend/packages/foundation/account-ui-base/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@coze-foundation/account-ui-base",
+  "version": "0.0.1",
+  "description": "账号、登录通用UI package",
+  "license": "Apache-2.0",
+  "author": "sunzhiyuan.evan@bytedance.com",
+  "maintainers": [],
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-arch/bot-api": "workspace:*",
+    "@coze-arch/bot-http": "workspace:*",
+    "@coze-arch/bot-semi": "workspace:*",
+    "@coze-arch/bot-utils": "workspace:*",
+    "@coze-arch/coze-design": "0.0.6-alpha.346d77",
+    "@coze-arch/foundation-sdk": "workspace:*",
+    "@coze-arch/i18n": "workspace:*",
+    "@coze-arch/report-events": "workspace:*",
+    "@coze-common/assets": "workspace:*",
+    "@coze-common/biz-components": "workspace:*",
+    "@coze-foundation/account-adapter": "workspace:*",
+    "@coze-studio/user-store": "workspace:*",
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "react-router-dom": "^6.22.0"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "stylelint": "^15.11.0",
+    "vite-plugin-svgr": "~3.3.0",
+    "vitest": "~3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}
+

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} />
+    </>
+  );
+};

frontend/packages/foundation/account-ui-base/src/hooks/logout.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { Modal } from '@coze-arch/coze-design';
+import { logout } from '@coze-foundation/account-adapter';
+
+export interface UseLogoutReturnType {
+  open: () => void;
+  close: () => void;
+  node: JSX.Element;
+}
+
+export const useLogout = (): UseLogoutReturnType => {
+  const navigate = useNavigate();
+  const [visible, setVisible] = useState(false);
+  const node = (
+    <Modal
+      visible={visible}
+      title={I18n.t('log_out_desc')}
+      okText={I18n.t('basic_log_out')}
+      cancelText={I18n.t('Cancel')}
+      centered
+      onOk={async () => {
+        await logout();
+        setVisible(false);
+        // 跳转到根路径
+        navigate('/');
+      }}
+      onCancel={() => {
+        setVisible(false);
+      }}
+      okButtonColor="red"
+    />
+  );
+
+  return {
+    node,
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    },
+  };
+};

frontend/packages/foundation/account-ui-base/src/hooks/use-account-settings/index.module.less

@@ -0,0 +1,152 @@
+/* stylelint-disable declaration-no-important */
+@import '@coze-common/assets/style/common.less';
+
+.profile-modal {
+  .profile-left {
+    position: relative;
+    min-width: 200px;
+    padding: 0 8px;
+
+    :global {
+      .semi-tabs-tab-button.semi-tabs-tab {
+        @apply coz-fg-plus;
+
+        padding: 8px;
+
+        font-size: 14px;
+        font-weight: 500;
+        font-style: normal;
+        line-height: 20px;
+      }
+
+      .semi-tabs-tab-button.semi-tabs-tab-active,
+      .semi-tabs-tab-button:hover {
+        @apply coz-mg-primary;
+      }
+
+      .semi-tabs-tab:focus {
+        outline: none;
+      }
+
+      .semi-tabs-bar-left {
+        width: 184px;
+      }
+
+      .semi-tabs-tab-button.semi-tabs-tab-disabled {
+        cursor: default;
+        background-color: transparent;
+
+        @apply coz-fg-secondary;
+
+      }
+
+      .semi-tabs-bar-button.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) {
+        margin-bottom: 6px;
+      }
+
+      .semi-tabs-tab:last-child::before {
+        content: none;
+      }
+    }
+  }
+
+  .divider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 200px;
+
+    height: 600px;
+
+    border-right: 1px solid var(--coz-stroke-primary);
+  }
+
+  .text-20 {
+    @apply coz-fg-plus;
+
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+  }
+
+  .text-16 {
+    @apply coz-fg-plus;
+
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  .profile-right {
+    overflow-y: auto;
+    padding: 0 8px;
+
+    .title {
+      position: sticky;
+      z-index: 1;
+      top:0;
+
+      width: 100%;
+
+      font-size: 20px;
+      font-weight: 500 !important;
+      line-height: 40px;
+
+      @apply coz-fg-plus bg-background-2;
+    }
+
+  }
+
+  .container{
+    width: 100%;
+    height: calc(100% - 86px);
+  }
+
+  :global {
+    .semi-modal .semi-modal-content {
+      max-height: 600px;
+      padding-top:0;
+      padding-left: 0;
+
+      .semi-modal-body {
+        padding-top: 0;
+
+      }
+    }
+
+    .semi-modal-close {
+      position: absolute;
+      z-index: 2;
+      right:24px;
+      background-color: rgba(var(--coze-bg-2), 1);
+    }
+  }
+
+  /* 当浏览器窗口的高度大于等于760px时, 高度固定 */
+  @media screen and (min-height: 760px) {
+      :global {
+        .semi-modal {
+          height: 600px;
+        }
+      }
+
+      .profile-right {
+        height: 574px; // = 600px - 26px(margin-top + border)
+      }
+  }
+
+  /* 当浏览器窗口的高度小于760px时， 高度 100vh - 160px */
+  @media screen and (max-height: 759px) {
+      :global {
+        .semi-modal {
+          height: calc(100vh - 160px);
+        }
+      }
+
+      .profile-right {
+        height:  max(448px, calc(100vh - 160px - 26px));
+      }
+  }
+}
+
+

frontend/packages/foundation/account-ui-base/src/hooks/use-account-settings/index.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 ReactElement, useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { Typography, Space } from '@coze-arch/coze-design';
+import { UITabBar, Divider } from '@coze-arch/bot-semi';
+
+import { useModal } from './use-modal';
+
+import s from './index.module.less';
+
+export interface TabItem {
+  id: string;
+  tabName: string;
+  /**
+   * @param close 关闭setting弹窗
+   * @returns ReactElement
+   */
+  content: (close?: () => void) => ReactElement;
+}
+
+export const useAccountSettings = ({
+  tabs,
+  onClose,
+}: {
+  tabs: Array<TabItem | 'divider'>;
+  onClose?: () => void;
+}) => {
+  const realTabs = tabs.filter(item => item !== 'divider');
+
+  const [currentTab, setCurrentTab] = useState(() => realTabs[0]?.id);
+
+  const { content, tabName } =
+    realTabs.find(item => String(item.id) === currentTab) || {};
+
+  const tabList = tabs.map(item => {
+    if (item === 'divider') {
+      return {
+        tab: <Divider className="disabled pt-[1px] pb-[1px]" />,
+        itemKey: 'general',
+        disabled: true,
+      };
+    }
+    return {
+      tab: item.tabName,
+      itemKey: String(item.id),
+    };
+  });
+
+  const { open, close, modal } = useModal({
+    title: null,
+    centered: true,
+    onCancel: () => {
+      onClose?.();
+      close();
+    },
+    className: s['profile-modal'],
+    height: 600,
+    width: 1120,
+    linearGradientMask: true,
+  });
+
+  const Content = (
+    <Space align="start" spacing={24} className="flex">
+      <Space vertical align="start" spacing={16} className={s['profile-left']}>
+        <Typography.Text className={`${s['text-20']} pl-[8px]`}>
+          {I18n.t('profile_settings')}
+        </Typography.Text>
+        <UITabBar
+          wrapperClass={s['profile-tab']}
+          tabList={tabList}
+          activeKey={currentTab}
+          onChange={setCurrentTab}
+          tabPosition="left"
+          type="button"
+        />
+      </Space>
+      <div className={s.divider}></div>
+      <Space vertical className={'w-full' + ` ${s['profile-right']}`}>
+        <Typography.Text className={`${s.title}`}>{tabName}</Typography.Text>
+        <div className={s.container}>{content?.(close)}</div>
+      </Space>
+    </Space>
+  );
+
+  return {
+    node: <>{modal(Content)}</>,
+    open: (tabId?: string) => {
+      if (tabId && realTabs.find(item => String(item.id) === tabId)) {
+        setCurrentTab(tabId);
+      }
+      open();
+    },
+    close: () => {
+      close();
+    },
+  };
+};

frontend/packages/foundation/account-ui-base/src/hooks/use-account-settings/use-modal.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { Modal, type ModalProps } from '@coze-arch/coze-design';
+
+export type UseModalParams = Omit<ModalProps, 'visible'>;
+
+export interface UseModalReturnValue {
+  modal: (inner: JSX.Element) => JSX.Element;
+  open: () => void;
+  close: () => void;
+}
+
+export const useModal = (params: UseModalParams): UseModalReturnValue => {
+  const [visible, setVisible] = useState(false);
+
+  return {
+    modal: inner => (
+      <Modal {...params} visible={visible}>
+        {inner}
+      </Modal>
+    ),
+    open: () => setVisible(true),
+    close: () => setVisible(false),
+  };
+};

frontend/packages/foundation/account-ui-base/src/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+ 
+export { useLogout } from './hooks/logout';
+export { RequireAuthContainer } from './components/require-auth-container';
+export { LoadingContainer } from './components/loading-container';
+export { UserInfoPanel } from './components/user-info-panel';
+export { useAccountSettings } from './hooks/use-account-settings';

frontend/packages/foundation/account-ui-base/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />

frontend/packages/foundation/account-ui-base/tsconfig.build.json

@@ -0,0 +1,66 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    {
+      "path": "../account-adapter/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-api/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-http/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/foundation-sdk/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/i18n/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/report-events/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/assets/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/biz-components/tsconfig.build.json"
+    },
+    {
+      "path": "../../components/bot-semi/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/vitest-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../studio/user-store/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/foundation/account-ui-base/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "exclude": ["**/*"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ]
+}

frontend/packages/foundation/account-ui-base/tsconfig.misc.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler"
+  },
+  "include": ["__tests__", "vitest.config.ts", "stories"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/foundation/account-ui-base/vitest.config.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+});