Fix third-party binding states and unify Telegram button styling in Account Management

[RedwindA]

PR 类型

• Bug 修复
• 新功能
• 文档更新
• 其他

PR 是否包含破坏性更新？

• 是
• 否

PR 描述

close #1902
本 PR 主要修复账户设置页第三方绑定的三处问题，并统一 Telegram 按钮的交互
样式：

• 修复微信在未启用状态下仍显示“已绑定”的错误展示：当 status.wechat_login
  为 false 时显示“未启用”，并禁用操作按钮。
• 修复“老账号在管理员启用第三方登录后，前端绑定按钮不可点击”的问题：进入
  个人设置页时强制拉取最新 /api/status 并通过 setStatusData 刷新本地缓存，
  避免使用过期的启用标志，确保“绑定”按钮可点击。
• 统一 Telegram 按钮样式与其它第三方一致：列表内使用 outline 风格的小号
  按钮；点击“绑定”后弹出 Modal，在弹窗中渲染官方 TelegramLoginButton 完成授
  权；“未启用/已绑定”状态的禁用样式也与其它按钮一致。

实现细节：

• 在 AccountManagement.jsx 中新增 isBound 辅助函数，统一判断绑定状态，修
  正 email/GitHub/OIDC/LinuxDO/WeChat 等 provider 的禁用条件与文案。
• 在 PersonalSetting.jsx 中初始化时调用 /api/status 刷新状态并写入本地存
  储与上下文，防止因缓存导致的启用状态不一致。
• Telegram 改为“按钮 + 弹窗内小部件”的交互方案，保证设定页按钮风格一致。

效果

• Before

- After

Summary by CodeRabbit

• New Features

  • Settings now auto-refresh status from the server on load, ensuring up-to-date flags.
  • Turnstile configuration updates automatically based on server settings.
  • Telegram binding moved to a dedicated modal for a clearer flow.

• Bug Fixes

  • Binding buttons and labels (Email, WeChat, GitHub, OIDC, Telegram, LinuxDO) now accurately reflect actual bound state and availability.
  • Avoids stale local status by prioritizing server-provided data.

[coderabbitai]

Walkthrough

Fetches server /api/status on PersonalSetting mount to replace or refresh local storage status, uses imported setStatusData, and configures Turnstile accordingly; refactors AccountManagement to use an isBound helper and moves Telegram binding into a modal with a TelegramLoginButton.

Changes

Cohort / File(s)	Summary
Status initialization & Turnstile web/src/components/settings/PersonalSetting.jsx	Import setStatusData; read local saved status, parse it, set initial state, then fetch /api/status on mount to update status via setStatus and setStatusData; enable/disable Turnstile and set/clear site key based on server data; still calls getUserData() after refresh.
Binding UI, isBound helper & Telegram modal web/src/components/settings/personal/cards/AccountManagement.jsx	Add isBound to treat non-empty IDs as bound; normalize label/disabled logic for Email/WeChat/GitHub/OIDC/Telegram/LinuxDO; replace inline TelegramLoginButton with a modal flow controlled by showTelegramBindModal that contains TelegramLoginButton for binding.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant PersonalSetting
  participant LocalStorage as localStorage
  participant API as /api/status
  participant Helpers as helpers.setStatusData
  participant Turnstile

  User->>PersonalSetting: mount
  PersonalSetting->>LocalStorage: read saved
  LocalStorage-->>PersonalSetting: parsed (optional)
  alt local parsed exists
    PersonalSetting->>PersonalSetting: setStatus(parsed)
    alt parsed.turnstile_check
      PersonalSetting->>Turnstile: enable(siteKey=parsed.turnstile_site_key)
    else
      PersonalSetting->>Turnstile: disable / clear siteKey
    end
  end
  Note over PersonalSetting,API: server refresh to avoid stale flags
  PersonalSetting->>API: GET /api/status
  API-->>PersonalSetting: data
  PersonalSetting->>PersonalSetting: setStatus(data)
  PersonalSetting->>Helpers: setStatusData(data)
  alt data.turnstile_check
    PersonalSetting->>Turnstile: enable(siteKey=data.turnstile_site_key)
  else
    PersonalSetting->>Turnstile: disable / clear siteKey
  end
  PersonalSetting->>PersonalSetting: getUserData()

Loading

sequenceDiagram
  autonumber
  actor User
  participant AccountManagement
  participant Modal as TelegramBindModal
  participant Telegram as TelegramLoginButton

  User->>AccountManagement: view account bindings
  AccountManagement->>AccountManagement: isBound(telegram_id)?
  alt bound
    AccountManagement-->>User: show "已绑定" (disabled)
  else not bound
    User->>AccountManagement: click "绑定"
    AccountManagement->>Modal: open modal
    Modal-->>User: displays TelegramLoginButton
    User->>Telegram: authenticate
    Telegram-->>AccountManagement: binding result/callback
    AccountManagement->>AccountManagement: update bound state
    AccountManagement->>Modal: close
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix：Account Management Status #1769 — Overlaps changes to AccountManagement.jsx for bound-state checks and Telegram/WeChat binding UI.

Poem

Hop hop, I fetched the flag today,
Cleared the keys and showed the way.
A modal opens, Telegram near,
Bind with a hop, then cheer, cheer, cheer! 🥕🐇

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title accurately summarizes the core updates by specifying the fix for third-party binding states and the unification of Telegram button styling within the Account Management component, which directly aligns with the pull request’s objectives. It is concise, clearly reflects the main change, and omits extraneous details, making it easy for reviewers to understand the primary intent at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 045ba23 and b08f188.

📒 Files selected for processing (2)

• web/src/components/settings/PersonalSetting.jsx (2 hunks)
• web/src/components/settings/personal/cards/AccountManagement.jsx (9 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

web/src/components/settings/personal/cards/AccountManagement.jsx (1)

web/src/components/settings/PersonalSetting.jsx (2)

• userState (44-44)
• status (57-57)

web/src/components/settings/PersonalSetting.jsx (1)

web/src/helpers/data.js (1)

• setStatusData (20-55)

[tbphp]

不确定跟这个pr是否有关系。
现在TG绑定成后，仍然显示未绑定状态。

db能查询到绑定的tg，并且能通过tg登录该账号。

[RedwindA]

@tbphp 修复了 #1916

可否测试一下，镜像名是austinleo/new-api:fix

[tbphp]

@tbphp 修复了 #1916

可否测试一下，镜像名是austinleo/new-api:fix

状态已经正常显示。

#1914 发布时刚才提的bug也可以一起关闭