dify-1.8.1/web/app/components/header/account-setting/language-page/index.tsx

'use client'

import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { useAppContext } from '@/context/app-context'
import { SimpleSelect } from '@/app/components/base/select'
import type { Item } from '@/app/components/base/select'
import { updateUserProfile } from '@/service/common'
import { ToastContext } from '@/app/components/base/toast'
import I18n from '@/context/i18n'
import { timezones } from '@/utils/timezone'
import { languages } from '@/i18n-config/language'

const titleClassName = `
  mb-2 system-sm-semibold text-text-secondary
`

export default function LanguagePage() {
  const { locale, setLocaleOnClient } = useContext(I18n)
  const { userProfile, mutateUserProfile } = useAppContext()
  const { notify } = useContext(ToastContext)
  const [editing, setEditing] = useState(false)
  const { t } = useTranslation()

  // 组件加载时打印当前配置
  console.log('═'.repeat(80))
  console.log('[TIMEZONE] 📋 语言设置页面已加载')
  console.log('[TIMEZONE] 📋 当前用户时区:', userProfile.timezone)
  console.log('[TIMEZONE] 📋 当前用户语言:', userProfile.interface_language)
  console.log('[TIMEZONE] 📋 是否正在编辑:', editing)
  console.log('[TIMEZONE] 💡 提示：如果要调试，请在控制台右键 → 勾选 "Preserve log（保留日志）"')
  console.log('═'.repeat(80))

  const handleSelectLanguage = async (item: Item) => {
    const url = '/account/interface-language'
    const bodyKey = 'interface_language'

    setEditing(true)
    try {
      await updateUserProfile({ url, body: { [bodyKey]: item.value } })
      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })

      setLocaleOnClient(item.value.toString())
    }
    catch (e) {
      notify({ type: 'error', message: (e as Error).message })
    }
    finally {
      setEditing(false)
    }
  }

  const handleSelectTimezone = async (item: Item) => {
    const url = '/account/timezone'
    const bodyKey = 'timezone'

    console.log('[TIMEZONE] 🚀 开始修改时区流程...')
    console.log('[TIMEZONE] 📝 当前时区:', userProfile.timezone)
    console.log('[TIMEZONE] 📝 目标时区:', item.value)
    console.log('[TIMEZONE] 📝 API 路径:', url)
    console.log('[TIMEZONE] 📝 请求体:', { [bodyKey]: item.value })

    setEditing(true)
    try {
      console.log('[TIMEZONE] ⏳ 正在调用 updateUserProfile API...')
      const startTime = Date.now()

      const response = await updateUserProfile({ url, body: { [bodyKey]: item.value } })

      const endTime = Date.now()
      console.log('[TIMEZONE] ✅ API 调用成功! 耗时:', (endTime - startTime), 'ms')
      console.log('[TIMEZONE] 📦 API 响应:', response)

      // 成功通知，并提示需要手动刷新（调试模式）
      notify({
        type: 'success',
        message: `${t('common.actionMsg.modifiedSuccessfully')} - 请查看控制台日志，然后手动刷新页面（F5）`
      })

      console.log('[TIMEZONE] 🔄 正在刷新用户信息...')
      await mutateUserProfile()

      console.log('[TIMEZONE] ✅ 用户信息已刷新')
      console.log('[TIMEZONE] 📝 刷新后的时区 (可能还是旧值，因为组件未重渲染):', userProfile.timezone)

      // 🚨 调试模式：暂时禁用自动刷新，方便查看日志
      console.log('[TIMEZONE] ⚠️  自动刷新已禁用（调试模式）')
      console.log('[TIMEZONE] 💡 请手动检查以下内容：')
      console.log('[TIMEZONE] 1️⃣  上面的 API 响应中，timezone 是否已更新？')
      console.log('[TIMEZONE] 2️⃣  Network 标签中，/account/timezone 请求是否成功？')
      console.log('[TIMEZONE] 3️⃣  准备好后，手动刷新页面（F5）查看时区是否生效')
      console.log('[TIMEZONE] 🏁 调试完成！')

      // Reload page to ensure all components use new timezone
      // 🚨 调试期间暂时注释掉自动刷新
      // setTimeout(() => {
      //   console.log('[TIMEZONE] 🔄 正在重新加载页面...')
      //   window.location.reload()
      // }, 500)
    }
    catch (e) {
      console.error('[TIMEZONE] ❌ 保存失败!')
      console.error('[TIMEZONE] 错误详情:', e)
      console.error('[TIMEZONE] 错误类型:', typeof e)
      console.error('[TIMEZONE] 错误内容:', JSON.stringify(e, null, 2))
      notify({ type: 'error', message: (e as Error).message })
    }
    finally {
      setEditing(false)
      console.log('[TIMEZONE] 🏁 handleSelectTimezone 函数执行完毕')
    }
  }

  return (
    <>
      <div className='mb-8'>
        <div className={titleClassName}>{t('common.language.displayLanguage')}</div>
        <SimpleSelect
          defaultValue={locale || userProfile.interface_language}
          items={languages.filter(item => item.supported)}
          onSelect={item => handleSelectLanguage(item)}
          disabled={editing}
          notClearable={true}
        />
      </div>
      <div className='mb-8'>
        <div className={titleClassName}>{t('common.language.timezone')}</div>
        <SimpleSelect
          defaultValue={userProfile.timezone}
          items={timezones}
          onSelect={(item) => {
            console.log('[TIMEZONE] 🎯 SimpleSelect onSelect 被触发!')
            console.log('[TIMEZONE] 🎯 选中的时区:', item)
            handleSelectTimezone(item)
          }}
          disabled={editing}
          notClearable={true}
        />
      </div>
    </>
  )
}