refactor(i18n): use JSON with flattened key and namespace (#30114)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/account/(commonLayout)/account-page/index.tsx

@@ -61,7 +61,7 @@ export default function AccountPage() {
     try {
       setEditing(true)
       await updateUserProfile({ url: 'account/name', body: { name: editName } })
-      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
       mutateUserProfile()
       setEditNameModalVisible(false)
       setEditing(false)
@@ -80,15 +80,15 @@ export default function AccountPage() {
   }
   const valid = () => {
     if (!password.trim()) {
-      showErrorMessage(t('login.error.passwordEmpty'))
+      showErrorMessage(t('error.passwordEmpty', { ns: 'login' }))
       return false
     }
     if (!validPassword.test(password)) {
-      showErrorMessage(t('login.error.passwordInvalid'))
+      showErrorMessage(t('error.passwordInvalid', { ns: 'login' }))
       return false
     }
     if (password !== confirmPassword) {
-      showErrorMessage(t('common.account.notEqual'))
+      showErrorMessage(t('account.notEqual', { ns: 'common' }))
       return false
     }
 
@@ -112,7 +112,7 @@ export default function AccountPage() {
           repeat_new_password: confirmPassword,
         },
       })
-      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
       mutateUserProfile()
       setEditPasswordModalVisible(false)
       resetPasswordForm()
@@ -146,7 +146,7 @@ export default function AccountPage() {
   return (
     <>
       <div className="pb-3 pt-2">
-        <h4 className="title-2xl-semi-bold text-text-primary">{t('common.account.myAccount')}</h4>
+        <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
       </div>
       <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size={64} />
@@ -164,25 +164,25 @@ export default function AccountPage() {
         </div>
       </div>
       <div className="mb-8">
-        <div className={titleClassName}>{t('common.account.name')}</div>
+        <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
           <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
             <span className="pl-1">{userProfile.name}</span>
           </div>
           <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={handleEditName}>
-            {t('common.operation.edit')}
+            {t('operation.edit', { ns: 'common' })}
           </div>
         </div>
       </div>
       <div className="mb-8">
-        <div className={titleClassName}>{t('common.account.email')}</div>
+        <div className={titleClassName}>{t('account.email', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
           <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
             <span className="pl-1">{userProfile.email}</span>
           </div>
           {systemFeatures.enable_change_email && (
             <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={() => setShowUpdateEmail(true)}>
-              {t('common.operation.change')}
+              {t('operation.change', { ns: 'common' })}
             </div>
           )}
         </div>
@@ -191,26 +191,26 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className="mb-8 flex justify-between gap-2">
             <div>
-              <div className="system-sm-semibold mb-1 text-text-secondary">{t('common.account.password')}</div>
-              <div className="body-xs-regular mb-2 text-text-tertiary">{t('common.account.passwordTip')}</div>
+              <div className="system-sm-semibold mb-1 text-text-secondary">{t('account.password', { ns: 'common' })}</div>
+              <div className="body-xs-regular mb-2 text-text-tertiary">{t('account.passwordTip', { ns: 'common' })}</div>
             </div>
-            <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
+            <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</Button>
           </div>
         )
       }
       <div className="mb-6 border-[1px] border-divider-subtle" />
       <div className="mb-8">
-        <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
-        <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
+        <div className={titleClassName}>{t('account.langGeniusAccount', { ns: 'common' })}</div>
+        <div className={descriptionClassName}>{t('account.langGeniusAccountTip', { ns: 'common' })}</div>
         {!!apps.length && (
           <Collapse
-            title={`${t('common.account.showAppLength', { length: apps.length })}`}
+            title={`${t('account.showAppLength', { ns: 'common', length: apps.length })}`}
             items={apps.map((app: App) => ({ ...app, key: app.id, name: app.name }))}
             renderItem={renderAppItem}
             wrapperClassName="mt-2"
           />
         )}
-        {!IS_CE_EDITION && <Button className="mt-2 text-components-button-destructive-secondary-text" onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+        {!IS_CE_EDITION && <Button className="mt-2 text-components-button-destructive-secondary-text" onClick={() => setShowDeleteAccountModal(true)}>{t('account.delete', { ns: 'common' })}</Button>}
       </div>
       {
         editNameModalVisible && (
@@ -219,21 +219,21 @@ export default function AccountPage() {
             onClose={() => setEditNameModalVisible(false)}
             className="!w-[420px] !p-6"
           >
-            <div className="title-2xl-semi-bold mb-6 text-text-primary">{t('common.account.editName')}</div>
-            <div className={titleClassName}>{t('common.account.name')}</div>
+            <div className="title-2xl-semi-bold mb-6 text-text-primary">{t('account.editName', { ns: 'common' })}</div>
+            <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
             <Input
               className="mt-2"
               value={editName}
               onChange={e => setEditName(e.target.value)}
             />
             <div className="mt-10 flex justify-end">
-              <Button className="mr-2" onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+              <Button className="mr-2" onClick={() => setEditNameModalVisible(false)}>{t('operation.cancel', { ns: 'common' })}</Button>
               <Button
                 disabled={editing || !editName}
                 variant="primary"
                 onClick={handleSaveName}
               >
-                {t('common.operation.save')}
+                {t('operation.save', { ns: 'common' })}
               </Button>
             </div>
           </Modal>
@@ -249,10 +249,10 @@ export default function AccountPage() {
             }}
             className="!w-[420px] !p-6"
           >
-            <div className="title-2xl-semi-bold mb-6 text-text-primary">{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            <div className="title-2xl-semi-bold mb-6 text-text-primary">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
             {userProfile.is_password_set && (
               <>
-                <div className={titleClassName}>{t('common.account.currentPassword')}</div>
+                <div className={titleClassName}>{t('account.currentPassword', { ns: 'common' })}</div>
                 <div className="relative mt-2">
                   <Input
                     type={showCurrentPassword ? 'text' : 'password'}
@@ -273,7 +273,7 @@ export default function AccountPage() {
               </>
             )}
             <div className="system-sm-semibold mt-8 text-text-secondary">
-              {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
+              {userProfile.is_password_set ? t('account.newPassword', { ns: 'common' }) : t('account.password', { ns: 'common' })}
             </div>
             <div className="relative mt-2">
               <Input
@@ -291,7 +291,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className="system-sm-semibold mt-8 text-text-secondary">{t('common.account.confirmPassword')}</div>
+            <div className="system-sm-semibold mt-8 text-text-secondary">{t('account.confirmPassword', { ns: 'common' })}</div>
             <div className="relative mt-2">
               <Input
                 type={showConfirmPassword ? 'text' : 'password'}
@@ -316,14 +316,14 @@ export default function AccountPage() {
                   resetPasswordForm()
                 }}
               >
-                {t('common.operation.cancel')}
+                {t('operation.cancel', { ns: 'common' })}
               </Button>
               <Button
                 disabled={editing}
                 variant="primary"
                 onClick={handleSavePassword}
               >
-                {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
+                {userProfile.is_password_set ? t('operation.reset', { ns: 'common' }) : t('operation.save', { ns: 'common' })}
               </Button>
             </div>
           </Modal>