🚀 feat: launch v1.0 — next-generation frontend built from the ground up (#4265)

* feat: add parameter coverage for the operations: copy, trim_prefix, trim_suffix, ensure_prefix, ensure_suffix, trim_space, to_lower, to_upper, replace, and regex_replace

* fix: CrossGroupRetry default false

移除gorm:"default:false"，避免每次 AutoMigrate时都执行ALTER TABLE `tokens` MODIFY COLUMN `cross_group_retry` boolean DEFAULT false
且bool默认false不影响原有功能

* feat: check-in feature integrates Turnstile security check

* feat: add support for Doubao /v1/responses (#2567)

* feat: add support for Doubao /v1/responses

* fix: fix model deployment style issues, lint problems, and i18n gaps. (#2556)

* fix: fix model deployment style issues, lint problems, and i18n gaps.

* fix: adjust the key not to be displayed on the frontend, tested via the backend.

* fix: adjust the sidebar configuration logic to use the default configuration items if they are not defined.

* feat: add plans directory to .gitignore

* fix: 修复 gemini 文件类型不支持 image/jpg

* fix: fix the proxyURL is empty, not using the default HTTP client configuration && the AWS calling side did not apply the relay timeout.

* fix: batch add key backend deduplication

* Merge pull request #2582 from seefs001/fix/tips

fix: add tips for model management and channel testing

* fix(gin): update request body size check to allow zero limit

* feat: add regex pattern to mask API keys in sensitive information

* fix(task): 修复使用 auto 分组时 Task Relay 不记录日志和不扣费的问题

问题描述：
- 使用 auto 分组的令牌调用 /v1/videos 等 Task 接口时，虽然任务能成功创建，
  但使用日志不显示记录，且不会扣费

根本原因：
- Distribute 中间件在选择渠道后，会将实际选中的分组存储在 ContextKeyAutoGroup 中
- 但 RelayTaskSubmit 函数没有从 context 中读取这个值来更新 info.UsingGroup
- 导致 info.UsingGroup 始终是 "auto" 而不是实际选中的分组（如 "sora2逆"）
- 当 auto 分组的倍率配置为 0 时，quota 计算结果为 0
- 日志记录条件 "if quota != 0" 不满足，导致日志不记录、不扣费

修复方案：
- 在 RelayTaskSubmit 函数中计算分组倍率之前，添加从 ContextKeyAutoGroup
  获取实际分组的逻辑
- 使用安全的类型断言，避免潜在的 panic 风险

影响范围：
- 仅影响 Task Relay 流程（/v1/videos, /suno, /kling 等接口）
- 不影响使用具体分组令牌的调用
- 不影响其他 Relay 类型（chat/completions 等已有类似处理逻辑）

* 🚀 feat(web): port legacy v2 frontend changes into new UI (deployments, check-in, ollama) + align APIs

Bring over the key frontend functionality introduced in merge `efa3301` and integrate it cleanly into the new `web/src` architecture and design system.

- **Model deployments (io.net)**
  - Align frontend endpoints and payloads with backend deployment routes (`/api/deployments/*`)
  - Add missing deployment operations: details, logs (container-aware), update config, rename, extend duration
  - Improve create-deployment flow (proper request shape, name availability check, price estimation parity)

- **System settings**
  - Enhance io.net deployment settings: allow testing connection with an unsaved API key and add “how to get API key” guidance

- **Channels / Ollama**
  - Improve Ollama model management: live fetch via base_url with fallback to channel fetch, selection + apply flows, delete confirmation
  - Refactor for feature-layer consistency: extract Ollama parsing/normalization utilities into `features/channels/lib`

- **Quality**
  - Ensure TypeScript typecheck passes after refactor and new dialogs/components integration

* Merge pull request #2590 from xyfacai/fix/max-body-limit

fix: 设置默认max req body 为128MB

* docs: update readme

* i18n: add missing translations

* fix(gemini): fetch model list via native v1beta/models endpoint

Use the native Gemini Models API (/v1beta/models) instead of the OpenAI-compatible
path when listing models for Gemini channels, improving compatibility with
third-party Gemini-format providers that don't implement OpenAI routes.

- Add paginated model listing with timeout and optional proxy support
- Select an enabled key for multi-key Gemini channels

* refactor(gemini): 更新 GeminiModelsResponse 以使用 dto.GeminiModel 类型

* fix: remove Minimax from FETCHABLE channels

* fix(minimax): 添加 MiniMax-M2 系列模型到 ModelList

* feat: add doubao video 1.5

* 🤢 chore: remove useless file

* feat: /v1/chat/completion -> /v1/response (#2629)

* feat: /v1/chat/completion -> /v1/response

* fix: clean propertyNames for gemini function

* fix: support snake_case fields in GeminiChatGenerationConfig

* chore: update dependencies and lockfile for improved compatibility

- Updated @clerk/clerk-react to version 5.59.3
- Updated @hookform/resolvers to version 5.2.2
- Updated @lobehub/icons to version 2.48.0
- Updated various Radix UI components to their latest versions
- Updated @tanstack/react-query and related packages for better performance
- Updated axios, i18next, and other libraries for security and feature enhancements
- Updated lockfile to include configVersion and ensure consistency across environments

* Merge pull request #2647 from seefs001/feature/status-code-auto-disable

feat: status code auto-disable configuration

* fix: chat2response setting ui (#2643)

* fix: setting ui

* fix: rm global.chat_completions_to_responses_policy

* fix: rm global.chat_completions_to_responses_policy

* Merge pull request #2627 from seefs001/feature/channel-test-param-override

feat: channel testing supports parameter overriding

* chore: update dependencies and lockfile for improved compatibility

- Updated @lobehub/icons to version 4.0.3
- Updated ai to version 6.0.27
- Updated various libraries including axios, react-day-picker, and streamdown for security and feature enhancements
- Updated devDependencies for eslint, prettier, and typescript for better performance and compatibility
- Updated lockfile to ensure consistency across environments

* chore: update lockfile and Vite configuration for improved build process

- Updated lockfile to version 1 for better compatibility and consistency
- Enhanced Vite configuration to support production optimizations, including code minification and chunking for dependencies
- Added environment-specific console and debugger removal for production builds

* chore: migrate from Vite to Rsbuild for build process

- Added Rsbuild configuration for development and production builds
- Updated package.json scripts to use Rsbuild instead of Vite
- Replaced @tailwindcss/vite with @tailwindcss/postcss in dependencies
- Introduced postcss.config.mjs for Tailwind CSS integration
- Updated TypeScript configuration to include Rsbuild config
- Removed Vite configuration file to streamline the build process

* refactor: optimize user data handling and API calls

- Replaced direct API calls to get user data with cached user information from auth-store in ModelsFilter and SummaryCards components.
- Improved session management in RootComponent and Authenticated route to utilize localStorage for user authentication status, reducing unnecessary API requests.
- Added caching for setup status checks to enhance performance during navigation.

* feat: enhance session validation in authenticated route

- Implemented session verification to check user authentication status via API call only once per session.
- Updated beforeLoad logic to redirect users to the login page if session validation fails or if no user information is available in localStorage.
- Improved user data handling by updating the auth store with fresh user information upon successful session verification.

* refactor: improve useMediaQuery hook for better SSR handling

- Enhanced the useMediaQuery hook to check for window availability before accessing matchMedia, preventing errors during server-side rendering.
- Simplified state initialization and change handling by using a dedicated function to determine initial matches.
- Updated event listener management for improved performance and clarity.

* feat(hooks): export useMediaQuery from hooks index

* refactor: update useMediaQuery imports to use unified hooks index

* fix(rsbuild): fix loadEnv API usage and removeConsole type

* feat: customizable automatic retry status codes

* refactor(hooks): use useSyncExternalStore for better SSR handling in useMediaQuery

* refactor: simplify embedded file structure in main.go

- Updated the embedded file directive to include the entire web/dist directory instead of individual assets, streamlining the build process.

* refactor: replace DropdownMenu with Sheet component in ProfileDropdown

- Updated the ProfileDropdown component to use a Sheet for user interactions instead of a DropdownMenu.
- Enhanced user info display with improved layout and styling.
- Added navigation links and sign-out functionality within the Sheet.

* refactor: streamline ProfileDropdown layout and improve user info display

- Removed unused Badge component and secondary text from user display.
- Enhanced styling for user info section and navigation links.
- Updated sign-out functionality to use a button for better accessibility.

* feat: add System Settings link for super admin in ProfileDropdown

- Introduced a new link to System Settings in the ProfileDropdown, visible only to users with the SUPER_ADMIN role.
- Updated imports to include the Settings icon and adjusted the component logic accordingly.
- Removed the Settings entry from the sidebar data to streamline navigation.

* feat: codex channel (#2652)

* feat: codex channel

* feat: codex channel

* feat: codex oauth flow

* feat: codex refresh cred

* feat: codex usage

* fix: codex err message detail

* fix: codex setting ui

* feat: codex refresh cred task

* fix: import err

* fix: codex store must be false

* fix: chat -> responses tool call

* fix: chat -> responses tool call

* feat(i18n): add missing translations

* fix(i18n): restore missing translations for "360" and add "User Menu" in multiple locales

- Reintroduced the translation for "360" in English, French, Japanese, Russian, Vietnamese, and Chinese locales.
- Added the "User Menu" translation in the same languages to enhance user interface consistency.

* fix: openAI function to gemini function field adjusted to whitelist mode

* feat: TLS_INSECURE_SKIP_VERIFY env

* fix: for chat-based calls to the Claude model, tagging is required. Using Claude's rendering logs, the two approaches handle input rendering differently.

* refactor(system-settings): restructure settings sections and navigation

- Replaced SettingsAccordion with a unified SettingsSection component across various settings sections for consistency.
- Introduced a section registry to manage general settings sections dynamically.
- Updated navigation items in the system settings sidebar to utilize the new section registry.
- Enhanced the GeneralSettings component to support section-based content rendering based on user selection.

* fix(system-settings): remove type assertion for quotaDisplayType in GeneralSettings

- Eliminated the type assertion for quotaDisplayType in the GeneralSettings component to improve type inference and maintain cleaner code.

* refactor(system-settings): update zod import syntax in general settings

- Changed the import statement for zod from a default import to a namespace import for better clarity and consistency in the codebase.

* fix: the login method cannot be displayed under the aff link.

* feat(system-settings): implement generic settings page and enhance navigation

- Added a new generic SettingsPage component to handle loading states, data fetching, and section rendering.
- Integrated section registry for general and authentication settings to streamline navigation and content management.
- Updated URL utility functions to improve query parameter handling for active navigation states.
- Enhanced the system settings sidebar to include authentication section items dynamically.

* refactor(system-settings): replace SettingsAccordion with SettingsSection across authentication settings

- Updated BasicAuthSection, BotProtectionSection, OAuthSection, and PasskeySection to use the new SettingsSection component for consistency.
- Introduced a section registry to manage authentication settings dynamically, enhancing navigation and content rendering.

* feat(system-settings): enhance request limits settings with new section and unified component

- Added a new Request Limits section to the system settings sidebar, integrating it with the section registry for improved navigation.
- Replaced SettingsAccordion with SettingsSection in RateLimitSection, SensitiveWordsSection, and SSRFSection for consistency.
- Updated RequestLimitsSettings to utilize the new SettingsPage component for better data handling and rendering.
- Implemented a search schema for request limits to streamline navigation and section management.

* feat(system-settings): integrate content settings sections with unified component and registry

- Added a new Content section to the system settings sidebar, incorporating it into the section registry for improved navigation.
- Replaced SettingsAccordion with SettingsSection in multiple content-related components for consistency.
- Created a section registry to manage content settings dynamically, enhancing the rendering and navigation experience.
- Updated the ContentSettings component to utilize the new section registry and streamline content display.

* feat(system-settings): enhance integrations settings with unified section registry and components

- Introduced a new section registry for integrations settings, consolidating various settings components for better organization and navigation.
- Replaced SettingsAccordion with SettingsSection in multiple integration-related components for consistency.
- Updated IntegrationSettings to utilize the new SettingsPage component, improving data handling and rendering.
- Added a new integrations section to the system settings sidebar, enhancing user experience and accessibility.

* feat(system-settings): unify model settings with new section registry and components

- Introduced a section registry for model settings, consolidating various model-related components for improved organization and navigation.
- Replaced SettingsAccordion with SettingsSection in multiple model settings components for consistency.
- Updated ModelSettings to utilize the new SettingsPage component, enhancing data handling and rendering.
- Added a new Models section to the system settings sidebar, improving user experience and accessibility.

* feat(system-settings): enhance maintenance settings with unified section registry and components

- Introduced a new section registry for maintenance settings, consolidating various maintenance-related components for improved organization and navigation.
- Replaced SettingsAccordion with SettingsSection in multiple maintenance components for consistency.
- Updated MaintenanceSettings to utilize the new section registry, enhancing data handling and rendering.
- Added a new Maintenance section to the system settings sidebar, improving user experience and accessibility.

* feat(system-settings): update section titles for improved clarity and consistency

- Renamed various section titles across content, integrations, maintenance, models, and request limits to enhance clarity and better reflect their functionalities.
- Adjusted titles such as 'Dashboard' to 'Data Dashboard', 'API Info' to 'API Addresses', and 'Update Checker' to 'System maintenance' for improved user understanding.
- Ensured consistency in naming conventions across all settings sections to streamline user experience and navigation.

* feat(nav-group): enhance collapsible menu behavior and URL matching logic

- Added controlled state management for collapsible menu items to automatically expand based on active sub-item paths.
- Updated the URL matching logic in checkIsActive to improve handling of query parameters and ensure accurate navigation state detection.
- Refactored the collapsible component to utilize the new state management, enhancing user experience in the sidebar navigation.

* feat(system-settings): update system settings navigation and redirect logic

- Changed the link in the profile dropdown to point directly to the general section of system settings with a search parameter for section identification.
- Implemented a redirect in the general settings route to ensure users are directed to the default section if no section parameter is provided, enhancing navigation consistency.

* feat(system-settings): unify route configuration for settings sections

- Refactored route configuration for various system settings sections (auth, content, general, integrations, maintenance, models, request limits) to utilize a new `createSettingsRouteConfig` function.
- This change consolidates the repetitive logic of creating search schemas and handling redirects, improving code maintainability and readability.
- Enhanced navigation by ensuring default sections are loaded when no section parameter is provided.

* feat(url-utils): enhance URL handling and matching logic

- Introduced a new utility function `urlToString` to convert various URL formats (string and object) into a standardized string format.
- Updated the `checkIsActive` function to utilize `urlToString`, improving the accuracy of URL matching and handling of query parameters.
- Refactored URL comparison logic to ensure consistent behavior across different URL types, enhancing navigation state detection.

* feat(system-settings): validate DataExportDefaultTime for improved data handling

- Introduced a new function `validateDataExportDefaultTime` to ensure the `DataExportDefaultTime` value is either 'week', 'hour', or 'day', defaulting to 'hour' for unexpected values.
- Updated the `DataExportDefaultTime` assignment in the settings section to utilize this validation function, enhancing data integrity and user experience.

* perf(system-settings): Improve the i18n of system settings content

- Changed button labels in various sections to use consistent capitalization and translation functions, enhancing user experience.
- Updated validation messages in schemas to utilize translation functions for improved internationalization support.
- Ensured all user-facing strings are properly translated, improving accessibility for non-English users.

* fix(system-settings): update ApiInfoFormValues type inference for improved schema validation

- Changed the type inference for ApiInfoFormValues to utilize ReturnType of createApiInfoSchema, ensuring accurate type representation and enhancing type safety in the API info section.

* fix(chat-settings): improve validation logic for chat settings schema

- Updated the validation logic to ensure that null values are correctly handled and that only objects are accepted as valid items in the chat settings schema.
- Simplified error handling by removing the error message from the catch block, providing a consistent user-facing message for invalid JSON strings.

* fix(system-settings): enhance validation error handling in uptime-kuma schema

- Updated the validation logic for category name, URL, and slug fields to use an object format for error messages, improving clarity and consistency in user feedback.
- Ensured that all validation messages are properly structured to enhance internationalization support.

* fix(i18n): add translations for Uptime Kuma group management

- Added English, French, Japanese, Russian, Vietnamese, and Chinese translations for "Add Uptime Kuma Group" and "Edit Uptime Kuma Group" to enhance internationalization support.
- Included validation messages for category name and slug fields across multiple languages to improve user feedback and accessibility.

* fix(system-settings): improve validation error message structure for SystemName

- Updated the validation logic for the SystemName field to use an object format for error messages, enhancing clarity and consistency in user feedback.
- This change aligns with recent improvements in internationalization support across the system settings schemas.

* perf(i18n): add new validation error message translations

- Added translations for the new validation error message "Invalid JSON format or values out of allowed range" in English, French, Japanese, Russian, Vietnamese, and Chinese.
- This update enhances internationalization support by ensuring users receive clear feedback across multiple languages.

* fix(i18n): update Japanese translation for payment method configuration message

- Corrected the Japanese translation for the message regarding payment methods configuration to use the term "メソッド" instead of "方法" for improved accuracy and consistency in user feedback.
- This change enhances the clarity of the message for Japanese-speaking users.

* fix(i18n): remove unnecessary loading messages from French translations

- Removed the French translations for "Loading settings...", "Loading maintenance settings...", and "Loading content settings..." to streamline the localization file.
- This change improves the clarity and relevance of the translations provided to users.

* fix(i18n): add translations for Uptime Kuma group management in multiple languages

- Added French, Japanese, Russian, Vietnamese, and Chinese translations for "Add Uptime Kuma Group" and "Edit Uptime Kuma Group" to enhance internationalization support.
- This update improves user experience by providing clear and consistent messaging across different languages.

* fix(validation): enhance pricing schema error messages and add translations

- Updated the pricing schema to include localized error messages for validation, ensuring users receive clear feedback when input values are invalid.
- Added new translations for "Exchange rate is required" and "Exchange rate must be greater than 0" in English, French, Japanese, and Chinese to improve internationalization support.
- This change enhances user experience by providing accurate and contextually relevant messages across multiple languages.

* fix: codex Unsupported parameter: max_output_tokens

* fix(model-mapping-editor): simplify JSON parsing logic in useEffect

* fix: jimeng i2v support multi image by metadata

* refactor(models): restructure models section handling and improve UI components

- Replaced tab-based navigation with section-based navigation for better clarity and organization.
- Introduced a new section registry to manage model sections, including 'metadata' and 'deployments'.
- Updated the ModelsContent component to reflect the new section structure and added a Create Deployment button.
- Removed the ModelsTabs component as it was no longer needed.
- Enhanced internationalization support by adding new translations for section descriptions and management tasks.
- Adjusted sidebar configuration to accommodate the new section structure.

* fix: update warning threshold label from '5$' to '2$'

* fix: video content api Priority use url field

* fix: update abortWithOpenAiMessage function to use types.ErrorCode

* feat(deployment): introduce CreateDeploymentDrawer component and update dialog references

- Replaced the CreateDeploymentDialog with a new CreateDeploymentDrawer component for improved user experience.
- Added comprehensive form handling for deployment creation, including validation and price estimation features.
- Updated internationalization files to include new translations for UI elements and descriptions related to deployment configuration.
- Enhanced the ModelsContent component to integrate the new drawer for creating deployments.

* perf(i18n): enhance internationalization for models table and columns

- Updated labels and titles in the ModelsTable and useModelsColumns components to utilize translation functions for improved localization.
- Changed static text for vendor and sync status to dynamic translations, enhancing user experience for non-English speakers.
- Updated empty state messages in the ModelsTable to support internationalization, ensuring clarity for all users.

* fix: fix email send

* fix: issue where consecutive calls to multiple tools in gemini all returned an index of 0

* fix: replace Alibaba's Claude-compatible interface with the new interface

* fix: Only models with the "qwen" designation can use the Claude-compatible interface; others require conversion.

* feat: log shows request conversion

* feat: optimized display

* feat: optimized display

* feat: optimized display

* fix: codex rm Temperature

* Revert "fix: video content api Priority use url field"

* feat: requestId time string use UTC

* feat(qwen): support qwen image sync image model config

* feat: sync old ui

* feat: more ui sync

* feat: replace theme

* fix build

* refactor(web): revert theme colors and variables in CSS

Updated color variables for light and dark themes to improve consistency and visual appeal.

* feat(deployment): enhance deployment access guard and model deployment settings

- Introduced loading phase management in the DeploymentAccessGuard component to provide better user feedback during connection checks.
- Updated the ModelsContent component to prefetch the deployments list while checking connection status, improving data readiness.
- Implemented a caching mechanism for connection status in useModelDeploymentSettings to optimize performance and reduce unnecessary API calls.
- Enhanced loading states and error handling for improved user experience during deployment settings retrieval and connection testing.

* feat(i18n): add new translations for connection and loading states across multiple languages

- Introduced translations for "Checking connection" and "Loading configuration" in English, French, Japanese, Russian, Vietnamese, and Chinese.
- This update enhances the internationalization support, providing clearer user feedback during connection checks and loading phases.

* refactor(pagination): adjust layout and styling for pagination component

- Updated the pagination component to improve layout by removing unnecessary width constraints and enhancing responsiveness.
- Increased minimum width for pagination text to ensure better visibility and alignment across different screen sizes.

* feat(i18n): implement translations for various UI elements across multiple components

- Updated several components to utilize the translation function for titles and placeholders, enhancing internationalization support.
- Added new translation entries for "Filter by name or key..." and "Log Type" in English, French, Japanese, Russian, Vietnamese, and Chinese.
- This update improves user experience by providing localized text in the ChannelsTable, SummaryCards, ApiKeysTable, RedemptionsTable, UsageLogsTable, and UsersTable components.

* feat(i18n): integrate translation support in SummaryCards component

- Added the useTranslation hook to the SummaryCards component to enhance internationalization.
- This update allows for localized text rendering, improving user experience for diverse language speakers.

* feat(dashboard): refactor dashboard structure and introduce section-based navigation

- Removed the tab navigation in favor of a section-based approach, enhancing user experience by providing clearer context for the dashboard content.
- Introduced a new section registry to manage dashboard sections, allowing for easier expansion and maintenance.
- Updated sidebar configuration to reflect the new section structure, ensuring proper navigation links are displayed.
- Added translations for new section titles and descriptions to support internationalization.

* feat(i18n): update time range labels and enhance translation support

- Changed time range labels from shorthand (e.g., '1D') to full text (e.g., '1 Day') for better clarity.
- Updated various components to utilize the translation function for time range labels, improving internationalization.
- Added new translation entries for time ranges in English, French, Japanese, Russian, Vietnamese, and Chinese, enhancing user experience across languages.

* feat(dashboard): enhance type safety and improve component structure

- Updated the Dashboard component to use specific types for model data and filters, enhancing type safety.
- Introduced new types for announcements and FAQs, improving clarity and maintainability.
- Refactored LogStatCards and UptimePanel components to utilize AbortController for better data fetching management.
- Optimized the rendering of announcements and FAQs by using unique keys based on item IDs.
- Improved theme management in ModelCharts by caching the ThemeManager import to reduce dynamic imports.

* feat(agents): add comprehensive guidelines for React and Next.js development

- Introduced a new set of best practices and optimization techniques for React and Next.js applications, aimed at enhancing performance and maintainability.
- Included detailed rules covering various aspects such as event handling, API routes, rendering strategies, and state management.
- Added extensive documentation in AGENTS.md and SKILL.md to support developers in adhering to these practices.
- This update serves as a foundational resource for improving code quality and efficiency in React-based projects.

* chore(web): update package.json dependencies

- Removed outdated dependencies including @base-ui/react, @clerk/clerk-react, and others to streamline the project.
- Updated remaining dependencies to their latest versions for improved performance and security.
- This cleanup enhances the overall maintainability of the project.

* feat(usage-logs): implement section-based navigation and enhance log management

- Introduced a section registry for usage logs, allowing for better organization and navigation between different log categories (common, drawing, task).
- Updated the UsageLogsContent component to dynamically render titles and descriptions based on the selected section.
- Refactored UsageLogsTable and UsageLogsPrimaryButtons components to accept the active log category as a prop, improving modularity.
- Enhanced sidebar configuration to support new section navigation, ensuring users can easily access different log types.
- Updated routing to redirect to the default section if none is specified, improving user experience.

* feat(i18n): enhance internationalization across usage logs components

- Integrated the useTranslation hook in various components related to usage logs, including CommonLogsStats, UsageLogsTable, and column helpers.
- Updated labels, titles, and messages to utilize translation functions, improving localization support.
- Added new translation entries for log-related terms in English, French, Japanese, Russian, Vietnamese, and Chinese, enhancing user experience for diverse language speakers.

* feat(datetime-picker): integrate dayjs for date formatting

- Added dayjs as a dependency to the project for improved date handling.
- Updated the DateTimePicker component to use dayjs for formatting dates, enhancing consistency and readability of date displays.

* feat(date-handling): replace date-fns with dayjs for improved date management

- Updated the project to use dayjs instead of date-fns for date formatting and manipulation, enhancing consistency across components.
- Refactored DatePicker, DateTimePicker, and other components to utilize dayjs for date-related functionalities.
- Added a new dayjs configuration file to extend its capabilities with relative time support.
- Updated AGENTS.md to reflect the new technology stack, emphasizing the use of dayjs for date handling.

* refactor(agents): streamline front-end development guidelines and update technology stack

- Revised AGENTS.md to condense front-end development standards and best practices, making it more accessible for developers and AI assistants.
- Updated the technology stack section to reflect current dependencies, emphasizing the use of Bun, React 19, TypeScript, and other key libraries.
- Enhanced the document structure with a new table format for better readability and navigation, including a comprehensive table of contents for quick access to sections.

* feat(i18n): enhance date picker and datetime picker localization support

- Integrated internationalization support in DatePicker and DateTimePicker components by adding locale handling for multiple languages (English, French, Japanese, Russian, Vietnamese, Chinese).
- Updated the calendar component to accept a locale prop, ensuring proper localization of month and weekday labels.
- Improved user experience by allowing date selection to adapt based on the user's language preference.

* feat(layout): add SectionPageLayout component for structured page layouts

- Introduced a new SectionPageLayout component to facilitate structured layouts for pages with sections, enhancing the organization of content.
- Added subcomponents for Title, Description, Actions, and Content to improve clarity and maintainability of page structures.
- Updated AGENTS.md to include guidelines on avoiding unnecessary destructuring of props for better code readability.

* feat(layout): refactor components to use SectionPageLayout for improved structure

- Replaced AppHeader and Main components with SectionPageLayout across multiple features including Channels, Dashboard, ApiKeys, Models, Redemption Codes, Usage Logs, Users, and Wallet.
- Enhanced page organization by utilizing SectionPageLayout's Title, Description, Actions, and Content subcomponents, improving clarity and maintainability.
- This update standardizes the layout structure across the application, facilitating a more cohesive user experience.

* feat(usage-logs): enhance URL state management and redirection logic

- Added useEffect to synchronize column filters with URL search changes, preventing infinite loops caused by inline references.
- Improved redirection logic in usage logs to clear 'type' from the URL when the section is not 'common', enhancing user experience and URL cleanliness.

* fix(usage-logs): disable global filter and update DataTableToolbar props

- Disabled the global filter in the UsageLogsTable component to streamline the user interface.
- Updated the DataTableToolbar component to accept a null customSearch prop, enhancing flexibility in toolbar configuration.

* feat(routes): implement section-based routing for system settings and dashboard

- Introduced section-based routing for system settings and dashboard features, enhancing navigation and organization.
- Updated route definitions to include dynamic sections, allowing for more granular access to settings and dashboard components.
- Refactored existing routes to redirect to default sections when no specific section is provided, improving user experience.
- Added new section routes for models, usage logs, and system settings, ensuring consistency across the application.
- Removed deprecated routes to streamline the routing structure and improve maintainability.

* refactor(usage-logs): update column helper functions to require config parameter

- Modified createFailReasonColumn and createProgressColumn functions to require a config parameter instead of allowing it to be optional.
- Simplified destructuring of config to enhance clarity and ensure necessary properties are always provided, improving code reliability.

* refactor(usage-logs): improve section ID validation and routing logic

- Introduced a type guard function, isUsageLogsSectionId, to validate section IDs, enhancing type safety and reducing the need for casting.
- Updated UsageLogsContent to utilize the new validation function for determining the active category, improving clarity and reliability.
- Refactored routing logic to use isUsageLogsSectionId for section validation, ensuring proper redirection to the default section when necessary.

* refactor(calendar): update locale documentation for i18n support

- Revised the locale prop documentation in the Calendar component to specify the use of react-day-picker for internationalization, clarifying the expected locale setup for users.

* chore(i18n): remove redundant user information description from locale files

- Removed the user information description from English, French, Japanese, Russian, Vietnamese, and Chinese locale files to streamline translations and improve clarity.

* chore(i18n): streamline locale files by removing redundant entries

- Removed unnecessary entries from English, French, Japanese, Russian, Vietnamese, and Chinese locale files to enhance clarity and reduce clutter.
- Adjusted translations for consistency and improved user experience across multiple languages.

* chore(sidebar): remove deprecated usage logs route from sidebar config

- Eliminated the '/usage-logs' entry from the sidebar configuration to streamline navigation and improve clarity in the sidebar structure.

* refactor(redemption-codes): enhance internationalization support and improve UI consistency

- Updated various components to utilize translation functions for user-facing strings, ensuring a consistent experience across different languages.
- Added meta labels for table columns to improve accessibility and clarity.
- Revised confirmation and action texts in dialogs and tooltips to leverage translation, enhancing user experience.
- Updated locale files to include new translations for improved clarity and consistency.

* feat(masked-value-display): add MaskedValueDisplay component for sensitive data handling

- Introduced a new MaskedValueDisplay component to display masked values with a popover for full value visibility and a copy button for easy access.
- Updated api-keys-columns and redemptions-columns to utilize the new component, enhancing code reusability and UI consistency.
- Revised translation keys in locale files to remove colons for improved clarity.

* refactor(url-utils): simplify query parameter matching logic in checkIsActive function

- Updated the checkIsActive function to streamline the logic for matching URLs with and without query parameters.
- Removed unnecessary checks for query parameters when matching base paths, improving clarity and maintainability of the code.

* fix(channels-table): update group filter label to use translation function

- Replaced hardcoded 'All Groups' label with a translation function call to enhance internationalization support in the ChannelsTable component.

* chore(api-keys): remove deprecated API key action messages and related exports

- Deleted the api-key-actions.ts file, which contained action messages for enabling, disabling, and deleting API keys.
- Updated index.ts to remove the export of getApiKeyActionMessage, streamlining the codebase by eliminating unused functionality.

* refactor(i18n): enhance internationalization support across various components

- Updated multiple components to utilize translation functions for user-facing strings, ensuring a consistent experience across different languages.
- Revised constants and labels in the channels and redemption codes features to use i18n keys, improving maintainability and clarity.
- Ensured that success and error messages leverage translation functions, enhancing user experience and accessibility.
- Streamlined the handling of i18n keys in the constants files for better organization and clarity.

* refactor(i18n): enhance translation support across various components

- Updated multiple components to utilize translation functions for user-facing strings, ensuring a consistent experience across different languages.
- Revised pagination and status labels to use i18n keys, improving maintainability and clarity.
- Enhanced response time formatting to support internationalization, allowing for localized display of time values.
- Updated locale files to include new translations for improved clarity and consistency.

* docs(AGENTS): add type checking requirement for TypeScript changes

- Included a new guideline stating that type checks must be executed after modifying TypeScript or TSX code, ensuring no type errors are left unresolved.
- Updated the document to reflect this addition in the relevant section for better clarity on coding standards.

* feat(combobox-input): add ComboboxInput component for enhanced token selection

- Introduced a new ComboboxInput component to facilitate token name selection with search and filtering capabilities.
- Integrated the ComboboxInput into the UsageLogsFilterDialog for improved user experience when filtering by token name.
- Updated locale files to include new translations for user-facing strings related to token filtering.

* feat(combobox): integrate translation support for custom value prompt

- Added translation functionality to the Combobox component, replacing hardcoded text with a translatable string for the custom value prompt.
- Utilized the useTranslation hook from react-i18next to enhance internationalization support, ensuring a consistent user experience across different languages.

* refactor(i18n): improve Chinese translations for consistency and clarity

- Adjusted spacing in various Chinese translations to enhance readability and maintain consistency across the locale file.
- Updated multiple user-facing strings to ensure proper formatting and alignment with localization standards.

* feat(calendar): add CalendarDropdown component for enhanced dropdown functionality

- Introduced a new CalendarDropdown component to improve user interaction with dropdown selections in the calendar.
- Implemented state management for dropdown visibility and selection handling, enhancing the overall user experience.
- Updated styling for dropdown elements to ensure consistency and better alignment with the UI design.

* fix(balance-query-dialog): handle null currentRow and improve usage query logic

- Updated the BalanceQueryDialog component to safely access currentRow properties using optional chaining.
- Added a check to ensure currentRow is not null before proceeding with usage queries, preventing potential runtime errors.
- Refactored the handleQueryCodexUsage function to use a local variable for currentRow, enhancing code clarity.

* feat(i18n): add new translations for batch creation and channel updates

- Added new translation strings for batch creation instructions across multiple languages, enhancing user guidance.
- Included translations for the "Update Channel" prompt to improve clarity in channel configuration settings.
- Ensured consistency in terminology across locale files for better user experience.

* feat(channel-mutate-drawer): improve API key input handling and update translations

- Refactored the API key input logic in the ChannelMutateDrawer component to enhance readability and maintainability.
- Added new placeholder translations for batch creation and existing key prompts in multiple languages, improving user guidance.
- Ensured consistency in translation strings across locale files for better user experience.

* feat(fetch-models-dialog): implement sorting for model categories

- Added a new function to sort model categories alphabetically, placing 'Other' at the end for easier navigation.
- Updated the rendering logic in the FetchModelsDialog component to utilize the new sorting function for both new and existing models, enhancing user experience.

* refactor(wallet-stats-card): standardize props usage and improve layout consistency

Standardizes props usage and improves layout consistency in wallet stats card

Refactors the wallet stats card component to:
- Use props directly instead of destructuring for consistency
- Add min-w-0 to prevent content overflow
- Adjust text sizing with break-all for proper wrapping
- Implement responsive font sizes (3xl on mobile, 4xl on larger screens)
- Improve leading and tracking for better readability

Refactor wallet stats card for consistency and layout

Standardizes props usage and improves layout consistency in wallet stats card

- Uses props directly instead of destructuring for consistency
- Adds min-w-0 to prevent content overflow
- Adjusts text sizing with break-all for proper wrapping
- Implements responsive font sizes (3xl on mobile, 4xl on larger screens)
- Improves leading and tracking for better readability

* feat(web): add subscription management and admin settings UI

* feat(web): add subscription management and admin settings UI

- Add subscription management module (plans, pricing, toggle status, and related dialogs/tables with Stripe/Creem integration notes)
- Add channel affinity (rules and cache stats), Waffo integration, performance, and Grok model sections to system settings, with extended types and section registry
- Add status code mapping validation/risk warnings, upstream update hooks, and utilities for channels; add available models and sidebar module cards to user profile
- Add chat2link route and useMinimumLoadingTime, useTableCompactMode shared hooks

Made-with: Cursor

* fix: remove duplicate GenerateOAuthCode and add missing TaskBulkUpdate

- remove duplicate GenerateOAuthCode from github.go since oauth.go already has the generic version.
- add model.TaskBulkUpdate for bulk update by upstream task_id strings, fixing task_video.go build failure.

* feat(router): add chat2link and subscriptions routes

- register /chat2link page route under authenticated layout.
- register /subscriptions/ page route under authenticated layout.
- update auto-generated routeTree type definitions and route mappings.

* feat(docker): add development environment setup with Docker Compose

- Introduced docker-compose.dev.yml for local development, including services for new-api, Redis, and PostgreSQL.
- Created Dockerfile.dev for backend-only builds, optimizing the development workflow.
- Updated makefile to include new commands for starting backend services and frontend development.

* feat(web): complete i18n coverage for setup wizard and add language switcher

- wrap all hardcoded English strings in setup-wizard, database-step, usage-mode-step, and complete-step with t() calls, covering step titles, descriptions, form validation messages, and fallback strings.
- add LanguageSwitcher component to the top-right corner of the setup page so users can switch language during initial setup.
- register 25 dynamic i18n keys in static-keys.ts and provide full translations for zh/en/ja/fr/ru/vi.

* feat(i18n): internationalize default version text in workspace-switcher

- remove hardcoded 'Unknown version' default, use t('Unknown version') for i18n fallback
- add "Unknown version" translation entries across all 6 locale files (zh/en/fr/ru/ja/vi)

* feat(i18n): add full i18n coverage for channel-affinity settings page

- replace Chinese t() keys with English keys across three channel-affinity components to align with new frontend i18n conventions.
- add 51 translation entries to all 6 locale files (en/zh/ja/fr/ru/vi) covering main page, rule editor, and cache stats dialog.
- register section-registry dynamic keys in static-keys.ts.

* feat(i18n): add full i18n coverage for Waffo payment settings page

- replace Chinese i18n keys with English keys in waffo-settings-section.tsx for consistency.
- wrap previously hardcoded labels (Pay Method Type / Pay Method Name) with t().
- add 26 Waffo-related translation entries across all 6 locale files (en/zh/fr/ru/ja/vi).

* feat(i18n): add missing translations for global model settings page

- add all 6 locale translations for 3 missing t() keys in global-settings-card.
- register dynamically used 'Grok' key in static-keys.ts for i18n scanner coverage.

* feat(i18n): add full i18n coverage for Grok model settings page

- add translations in all 6 locales (en/zh/fr/ja/ru/vi) for grok-settings-card t() calls.
- cover violation fee toggle, amount input, and official docs link labels.
- include section-registry descriptionKey translation entries.

* feat(i18n): add full i18n coverage for performance settings page

- migrate all t() keys from Chinese to English to align with project conventions.
- add translations for all 6 locales (en/zh/ja/fr/ru/vi) covering disk cache,
  system monitoring, log management, and stats dashboard sections.
- remove 71 obsolete Chinese-keyed entries from every locale file.

* fix(i18n): add 116 missing English translation keys across all locales

- scan all t() calls to identify English keys used in code but absent from locale files.
- add translations for zh/en/fr/ja/ru/vi, keeping key sets and sort order consistent.
- covers system-settings, channels, models, auth, wallet and other modules.

* fix(i18n): add missing translations for log cleanup quick-select and confirm dialog

- wrap quick-select button labels (24 hours ago / 7 days ago / 30 days ago) with t().
- replace hardcoded English strings in purge confirm dialog with t() calls and date interpolation.
- add 5 new translation keys across all 6 locale files (zh/en/fr/ja/ru/vi).

* refactor(web): unify all time display with dayjs formatting

- replace all toLocaleString/toLocaleDateString/toLocaleTimeString and manual padStart concatenation with dayjs.format().
- standardize output: datetime as YYYY-MM-DD HH:mm:ss, date as YYYY-MM-DD, time as HH:mm:ss.
- add formatDateTimeStr, formatDateStr, formatTimeStr dayjs-based helpers in lib/format.ts.
- update 12 files across core utils and feature components.

* refactor(web): replace native datetime-local input with DateTimePicker in announcements

- swap browser-native datetime-local for the project's DateTimePicker component to match the UI used in log cleanup and other pages.
- convert between Date objects and ISO strings to bridge the form's string-based schema.

* refactor(web): replace native HTML elements with design system components

- replace ~35 native <button> with <Button> across pricing, profile, channels modules
- replace native <input>/<textarea>/<label> with <Input>/<Textarea>/<Label> for consistent form styling
- replace native <table> with <Table> components, <details>/<summary> with <Collapsible>
- replace decorative <hr> with <Separator> to ensure global UI consistency

* refactor(web): enhance profile components with design system consistency

- update ProfileSecurityCard to use buttons for security actions, improving accessibility and styling.
- modify AccountBindingsTab layout to a grid for better responsiveness and visual alignment.
- refactor NotificationTab to utilize icons for notification methods, enhancing user experience and clarity.

* fix(i18n): complete i18n coverage for profile page components

- wrap passkey card status badges (enabled/disabled, backup state) and last-used text with t()
- fix hardcoded button labels in security dialogs (change password, access token, delete account)
- internationalize all 2FA dialog strings (setup, disable, backup codes)
- fix email bind dialog description and button state text missing i18n
- wrap remaining hardcoded strings in notification tab and checkin calendar
- add all missing translation entries to zh.json and en.json

* fix(i18n): enhance error messages with translations for deployment access and settings

- wrap connection error messages in DeploymentAccessGuard and IoNetDeploymentSettingsSection with t() for internationalization.
- add missing translation key for "io.net model deployment is not enabled or api key missing" in all locale files (en, fr, ja, ru, vi, zh).

* 🧹 chore(web): resolve all ESLint errors and warnings

Align the Vite/React frontend with the current ESLint flat config and
React Compiler–related rules by fixing violations instead of broad
suppression where practical.

- Replace `any` with concrete types (`unknown`, `Record<string, unknown>`,
  domain types) where upstream/API shapes allow
- Fix duplicate imports, unused bindings, `no-console`, and empty blocks
- Address react-hooks issues: reorder declarations, memoize unstable
  callbacks (`useCallback`), extend dependency arrays, and use targeted
  disables only where sync-from-props in `useEffect` is intentional
- Refactor `motion.create` usage in ai-elements shimmer to avoid creating
  components during render (static-components)
- Stabilize TanStack Query/Mutation hook usage (query keys, `mutate` in
  deps) and add narrowly scoped rule disables where the linter conflicts
  with library patterns
- Disable `react-hooks/incompatible-library` in ESLint config for
  TanStack Table / RHF false positives
- Add file-level `react-refresh/only-export-components` disables for
  registry/provider/column modules that intentionally mix exports

`bun lint` completes with 0 errors and 0 warnings.

* ✨ feat(web): add subscription management to sidebar and align drawer with project conventions

- Register "Subscription Management" nav item in the admin sidebar group
  with CreditCard icon pointing to /subscriptions
- Add subscription module to sidebar config defaults and URL mapping so it
  integrates with the admin sidebar modules toggle in system settings
- Add subscription entry to sidebar-modules-section moduleMeta for the
  maintenance settings UI
- Refactor SubscriptionsMutateDrawer to follow the same patterns used by
  users, redemption-codes, and other mutate drawers:
  - Use shadcn Form/FormField/FormItem/FormControl/FormLabel/FormMessage
    instead of raw register() + Label + manual error display
  - Move SheetFooter outside the form with form attribute association
  - Use SheetClose for the cancel button
  - Reset form state on drawer close
  - Align SheetContent width (sm:max-w-[600px]) and spacing conventions

* ✨ feat(web): overhaul UI/UX with Vercel Geist design alignment

Refactor the entire frontend UI/UX to align with Vercel/OpenAI design
principles, covering layout, animations, skeleton loading, and overall
visual polish.

Motion & Page Transitions:
- Add centralized motion system (lib/motion.ts) with Vercel-style
  transition presets, stagger variants for tables, cards, and sidebars
- Implement AnimatedOutlet for route-level page enter animations
  using TanStack Router pathname keying
- Add PageTransition, StaggerContainer, StaggerItem, CardStagger,
  and TableStagger wrapper components for progressive reveal effects

Skeleton Loading — Vercel Geist Style:
- Replace shadcn default `animate-pulse` with Geist-style shimmer
  sweep animation (linear-gradient + background-position keyframes)
- Add `--skeleton-base` / `--skeleton-highlight` CSS variables tuned
  for both light and dark themes with neutral oklch tones
- Override auto-skeleton-react inline styles via CSS to unify all
  skeleton elements under the same shimmer effect
- Update TableSkeleton with varied column widths for a natural feel
- Add ContentSkeleton and QuerySkeleton wrappers for auto-skeleton
  integration with React Query error/loading states
- Respect prefers-reduced-motion: disable shimmer for accessibility

Layout & Sidebar:
- Upgrade sidebar expand/collapse transitions to cubic-bezier easing
- Add hover micro-interactions (background-color, color, transform)
  to sidebar menu buttons with smooth 150ms transitions
- Fix oklch color compatibility in sidebar outline variant
- Integrate AnimatedOutlet into AuthenticatedLayout for unified
  route-level animations

Theme & CSS:
- Streamline theme.css with cleaner oklch color definitions
- Add CSS table row stagger-in animations with nth-child delays
- Fix hover-scrollbar color bug (hsl → color-mix for oklch compat)
- Add content-auto utility for long list rendering optimization

Cleanup:
- Remove deprecated skeleton-wrapper.tsx
- Remove unused imports and dead code across components
- Add empty-state, error-state, and loading-state utility components

* 🐛 fix(docker): track bun.lock to fix Docker build failure

Remove `web/bun.lock` from `.gitignore` so the lock file is committed
to version control. The Dockerfile `COPY web/bun.lock .` instruction
requires this file to be present in the build context, and ignoring it
caused the build to fail with a "not found" error.

* ⬆️ chore(web): upgrade dependencies and fix all type/lint errors

Upgrade all frontend dependencies to latest stable versions:
- lucide-react 0.562 → 1.7 (major: brand icons removed)
- shiki 3.x → 4.x, eslint 9.x → 10.x, knip 5.x → 6.x
- @rsbuild/core 1.3 → 1.7, @types/node 24 → 25
- tailwindcss/postcss 4.1 → 4.2, motion 12.25 → 12.38
- @tanstack/react-query 5.90 → 5.95, zod 4.3.5 → 4.3.6
- react 19.2.3 → 19.2.4, axios 1.13.2 → 1.13.6
- prettier 3.7 → 3.8, typescript-eslint 8.52 → 8.57
- Add missing optional deps: @xyflow/react, embla-carousel-react

Resolve all TypeScript compilation errors introduced by upgrades:
- Replace lucide-react brand icons (Github) with react-icons/si
- Fix react-hook-form Control/Resolver generics for zod v4
- Fix Record<string, unknown> type constraints across API utils
- Fix axios interceptor return types in lib/api.ts
- Add type assertions for useSettings/useStatus hook returns
- Resolve Badge variant, spread type, and route path mismatches

Resolve all ESLint 10 errors:
- preserve-caught-error: attach cause to re-thrown errors
- no-useless-assignment: refactor redundant variable assignments
- prefer-as-const: use `as const` over literal type assertions
- no-unused-vars: prefix type-only schemas with underscore

Update tsconfig lib from ES2020 to ES2022 for Error.cause support.

* 🐛 fix(web): stop pricing model row from centering its content

Wrapping the row in shadcn <Button variant='ghost'> inherits
`justify-center`, and the inner flex container had no width, so
`justify-between` collapsed and the row appeared centered.

* feat: add Waffo payment integration and related UI components

- Introduced Waffo payment method with support for custom icons and settings.
- Updated payment settings section to include Waffo settings.
- Added Waffo payment request handling in the wallet API.
- Enhanced wallet recharge form to support Waffo payment methods.
- Implemented hooks for Waffo payment processing.
- Updated localization files for new Waffo-related strings.
- Added new payment type and icon for Waffo in constants and UI components.
- Refactored topup info handling to include Waffo payment methods and configurations.

* feat(profile): add admin-only upstream model update notification setting

* fix(web): make sidebar module user settings actually take effect

Previously, saving sidebar module preferences in profile had no effect
because the client ignored user-level sidebar_modules entirely. This
fix wires user config into useSidebarConfig so the sidebar updates
immediately without a page refresh.

Changes:
- Add UserPermissions type with sidebar_settings/sidebar_modules fields
- Refactor useSidebarConfig to merge admin × user config with AND logic
- Sync sidebar_modules to auth store on save for immediate UI updates
- Conditionally render SidebarModulesCard based on user permissions
- Treat null/empty user config as "do not narrow" for legacy users

* feat(web): add custom OAuth provider CRUD and login button support

Migrate custom OAuth from v1 to v2:
- Admin CRUD UI with provider table, form dialog, preset templates, and OIDC discovery
- Login page renders dynamic buttons for custom OAuth providers
- Fix account bindings display showing "Not bound" text when already bound

* feat(web): add ServerAddress, SMTPForceAuthLogin, CreateCacheRatio and group special usable settings

Migrate missing v1 system settings to v2:
- ServerAddress input in General > System Information
- SMTPForceAuthLogin toggle in Integrations > Email
- CreateCacheRatio JSON editor in Models > Ratio
- Group special usable group rules editor in Models > Ratio

* feat(web): wire user subscriptions dialog to users table row actions

The UserSubscriptionsDialog component already existed but had no entry point
in the users table dropdown menu. Add "Manage Subscriptions" menu item.

* chore(web): update i18n translations for new settings and custom OAuth

* 💎 refactor(web): redesign pricing page with flat, typography-driven layout

* 🌐 chore(i18n): complete missing translations and normalize project config

- Add 425+ missing translations across fr, ja, ru, zh, vi locales
  for subscription management, sidebar navigation, Grok settings,
  upstream model updates, pricing page, and other UI components
- Add 37 missing i18n keys used in t() calls but absent from locale
  files (pricing filters, display options, audio/cache labels, etc.)
- Fix stale tech stack info in CLAUDE.md, AGENTS.md, and project.mdc:
  React 18 → 19, Vite → Rsbuild, Semi Design → Radix UI + Tailwind
- Fix i18n key format description: "Chinese source strings" → English
- Deduplicate .cursor/rules/project.mdc to avoid triple-loading the
  same rules already present in root CLAUDE.md and AGENTS.md
- Add i18n-translate Cursor skill for repeatable translation workflow

* 🎨 refactor(web): redesign dashboard with flat, typography-driven layout

Replace Card-based dashboard components with a flat, border-driven design
system consistent with the pricing page, following the ui-style.mdc conventions.

Overview section:
- StatCard: replace Card wrapper with flat flex layout, monospace tabular
  values, uppercase tracking-wider labels, layered opacity hierarchy
- PanelWrapper: replace Card/CardHeader/CardContent with rounded-lg border
  container and border-b header
- SummaryCards: merge three stat cards into a single bordered container
  with divide-x separators; decouple border from stagger animation to
  prevent border deformation during entrance transitions
- ApiInfoPanel/Item: full-width list rows with border-b separators,
  monospace route names, layered opacity for URLs and descriptions
- AnnouncementsPanel: native button rows with hover:bg-muted/40, i18n for
  "Click for details" hint
- FAQPanel: lighter border-border/60 accordion dividers, muted answer text
- UptimePanel: uppercase tracking-wider group headers with bg-muted/30
  background, monospace uptime percentages, fine-grained border opacity

Models section:
- LogStatCards: replace Card with rounded-lg border + divide-x grid,
  fix react-hooks/exhaustive-deps by destructuring props before useEffect
- ModelCharts: replace Card+Tabs with bordered container + custom
  segmented control matching ui-style spec
- Suspense fallbacks: match new flat skeleton layout with accurate
  column structure

Animation:
- Wrap models section in FadeIn with staggered delay
- Keep CardStagger for overview panel grid (each panel has own border)

Other:
- Add ui-style.mdc cursor rule documenting the design language
- Disable react-refresh/only-export-components for src/routes/** in
  eslint config (TanStack Router route files always export Route objects)
- Fix zh.json: "Token-based" translation "基于令牌的" → "按量计费"

* ✨ refactor(web): adopt flat dot-and-text design for all status badges

Replace the bordered/colored-background StatusBadge and Badge components
across the entire frontend with a minimal flat design: a small colored
dot followed by colored text, eliminating visual noise from heavy
borders, backgrounds, and rounded pill shapes.

Key changes:

- Redesign StatusBadge to use dot + text instead of bordered pill style,
  removing cva-based background/border variants in favor of exported
  dotColorMap and textColorMap lookup tables
- Add children prop support to StatusBadge for flexible content rendering
  alongside the existing label prop
- Migrate all Badge usages (except pricing page) to StatusBadge with
  appropriate variant mappings (default→info, secondary→neutral,
  outline→neutral, destructive→danger)
- Consolidate adjacent multi-badge groups into single-dot layouts with
  dot separators (·) to reduce visual clutter in:
  - Channel balance columns (used + remaining)
  - Channel type column (type + IO.NET indicator)
  - User invite info column (invited + revenue + inviter)
  - Usage log stats bar (usage + RPM + TPM)
  - Usage log time/FRT column (time + FRT + stream status)
  - Subscription plan counts (active + expired)
  - Channel affinity scope/regex/key-source columns
  - Prefill group card headers (type + ID)
- Export dotColorMap and textColorMap for direct use in custom inline
  layouts that need consistent status colors without the full component

* ✨ refactor(web): redesign public layout and landing page with modern UI

Overhaul the public-facing layout, header, and homepage to deliver a
polished, animation-rich landing experience inspired by contemporary
SaaS design patterns.

Header:
- Replace sticky header with fixed floating navbar that compacts into
  a pill-shaped glass-morphism bar on scroll (backdrop-blur + ring)
- Add smooth 700ms cubic-bezier transitions for scroll-based shrinking
- Build full-screen mobile menu overlay with staggered entry animations
- Remove background color from logo container, show logo image directly

Homepage sections:
- Hero: gradient text title, radial gradient + grid pattern background,
  interactive terminal demo showcasing API request/response
- Terminal demo: auto-cycles through gpt-4o, claude-sonnet-4-20250514,
  gemini-2.5-pro, deepseek-chat with smooth cross-fade transitions,
  clickable model badges, dual theme support (light/dark), fixed height
- Stats: animated counters driven by IntersectionObserver with
  cubic-bezier easing, supports integer and decimal modes
- Features: Bento grid layout with gap-px border technique, each card
  includes contextual visuals (model list, security badge, workflow)
- How It Works: new three-step process section (Configure → Connect →
  Monitor) with connecting gradient line and numbered badges
- CTA: gradient mesh background with scale-in scroll animation
- Footer: streamlined brand column + link columns layout

New components:
- AnimateInView: IntersectionObserver-based scroll animation component
  supporting fade-up, fade-in, scale-in, fade-left, fade-right
- HeroTerminalDemo: themed terminal with model carousel and live
  request/response preview

CSS:
- Add landing page scroll-triggered keyframe animations
- Add terminal demo animations (blink cursor, spinner, pulse indicator)
- Respect prefers-reduced-motion throughout

i18n:
- Add 17 new translation keys across all 6 locales (en/zh/fr/ja/ru/vi)

* ✨ feat(web): align usage logs and channels with legacy UI

Usage logs
- Show Refund (type 6) in detail dialog and hide conversion chain for refunds
- Sync filter dialog state from URL for model, token, group, username, and requestId

Channels
- Support optional stream flag in channel test API, actions, and test dialog
- Show upstream model update badges (+added / -removed) on fetchable channel types
- Add form fields and drawer toggles for upstream model update check and auto-sync
- Persist upstream model update flags in channel settings JSON for fetchable types

i18n
- Add locale strings for upstream model update UI (en, zh, fr, ja, ru, vi)

* 🐛 fix(web): prevent transient vertical scrollbar on tables during animations

Add overflow-y-clip to the shared Table container (data-slot=table-container)
alongside overflow-x-auto. Setting overflow-x to auto implicitly pairs with
overflow-y: auto in browsers, which made the table shell briefly show a
vertical scrollbar during route enter motion (y/blur) and table row stagger.

Remove the redundant descendant selector workaround from the model pricing
GroupPricingSection; behavior is now covered globally by the Table component.

* 🏗️ refactor(web): redesign console layout with fixed header, scrollable content, and pinned footer

Overhaul the authenticated console layout to match the OpenAI dashboard
pattern: header and page title bar stay fixed at the top, only the
content area scrolls, and table pagination is pinned to the bottom.

Layout architecture:
- Lock SidebarInset to full viewport height (h-svh) so all inner
  regions are controlled by flexbox instead of document scroll
- Convert Main from a generic div to a semantic <main> flex container
  with overflow-hidden, removing the legacy `fixed` prop and
  `data-layout` attribute
- Strip scroll-shadow logic and `fixed` prop from Header/AppHeader;
  the header is now naturally fixed as a shrink-0 flex child
- Restructure SectionPageLayout into three flex regions: a shrink-0
  title bar, a flex-1 overflow-auto content area, and a shrink-0
  footer portal target with empty:hidden
- Add min-h-0 to AnimatedOutlet wrappers to prevent flex overflow

Footer portal system:
- Introduce PageFooterProvider / PageFooterPortal (React Context +
  createPortal) so deeply nested table components can render their
  DataTablePagination into the fixed footer without prop drilling
- Migrate all 8 data tables (api-keys, channels, users, models,
  deployments, usage-logs, subscriptions, redemption-codes) to use
  PageFooterPortal for pagination

Page-level fixes:
- Profile: wrap content in a scrollable flex child with proper padding
- SystemSettings: remove overflow-auto from wrapper to avoid nested
  scrollbars (sub-pages manage their own scroll)
- Playground / Error pages: remove obsolete `fixed` props

API keys UX improvement:
- Replace inline key show/hide toggle with a Popover-based reveal,
  removing toggleKeyVisibility and keyVisibility state from the
  provider context

Cleanup:
- Remove dead CSS rule for body:has([data-layout='fixed'])
- Remove unused `fixed` prop from Header, AppHeader, and Main types
- Export PageFooterPortal from layout barrel file

* 💅 refactor(web): polish table UI consistency and add pagination transitions

- Standardize primary action buttons (Create, Add, Search) to size="sm"
  across all pages for visual consistency with channels and models
- Redesign NumericSpinnerInput with minimal inline style: plain text by
  default, hover-revealed +/- buttons, click-to-edit — replacing the
  clunky bordered input with stacked chevron arrows
- Fix vertical scrollbar in channels group column by replacing
  overflow-x-auto with overflow-hidden (redundant with +N collapse)
- Simplify API keys group column: replace colorful StatusBadge pairs
  with clean typography using opacity hierarchy and dot separators
- Move API key copy loading indicator from key text to the copy button
  itself, eliminating layout shift during key resolution
- Reduce page title from text-2xl to text-lg and subtitle to text-sm
  in SectionPageLayout for a more compact header
- Add smooth opacity transition (duration-150) on all 7 server-paginated
  tables during background data fetches (isFetching && !isLoading),
  with pointer-events-none to prevent interaction during loading
- Constrain usage logs Details column width (size: 200, maxSize: 220)

* 🐛 fix(web): restore missing padding on system settings content

The console layout refactor in d2150469 moved padding ownership from
Main onto each route, but SystemSettings was missed — its Outlet
wrapper had no padding, so the content area sat flush against the
sidebar and top nav. Add `px-4 pt-6 pb-4` to match the vertical
rhythm used by SectionPageLayout and the Profile page.

* 📱 refactor(web): standardize mobile responsive layout across all table pages

Unify mobile experience for all data table pages (channels, keys, models,
deployments, usage-logs, users, redemption-codes, subscriptions) with a
consistent layout pattern and cleaner header area.

DataTableToolbar:
- Redesign mobile layout: full-width search input + collapsible filter
  toggle button with active filter count badge
- Filters, additional search, and reset button collapse into an
  expandable section on mobile, keeping the default view compact
- Desktop layout remains unchanged

SectionPageLayout:
- Tighten mobile spacing (padding, gaps) for higher content density
- Scale down title (text-base) and description (text-xs) on mobile
- Shrink action button gaps on small screens

ChannelsPrimaryButtons:
- Move Tag Mode and Sort by ID toggles into the "More" dropdown on
  mobile (via DropdownMenuCheckboxItem), freeing header space
- Desktop toggle switches remain visible outside the dropdown

MobileCardList (shared component):
- Compact list-item layout with title + badge header row and
  side-by-side key fields, replacing individual card components
- Structured (CompactRow) and fallback (FallbackRow) rendering modes
  driven by column meta (mobileTitle, mobileBadge, mobileHidden)

New MobileCardList integration:
- Users table: username as title, status as badge; hide id,
  display_name, invite_info on mobile
- Redemptions table: name as title, status as badge; hide id,
  created_time, expired_time, used_user_id on mobile
- Subscriptions table: plan title as title, enabled as badge; hide id,
  sort_order, reset, payment, total_amount, upgrade_group on mobile

Column meta updates:
- Add mobileTitle/mobileBadge/mobileHidden meta across all 8 table
  column definitions for consistent mobile field prioritization

Minor fixes:
- Hide Subscriptions Stripe/Creem alert on mobile
- Disable card hover animations on mobile via CSS media query

* 🐛 fix(web): sync favicon with custom system logo

Favicon stayed at the hardcoded /logo.png while document.title already
followed system_name, leaving tab icon and site branding out of sync.
Apply the logo as favicon from localStorage cache on startup, refresh
from getStatus(), and re-apply when useSystemConfig finishes preloading.
Extract applyFaviconToDom helper into lib/dom-utils with idempotent guard
to avoid redundant DOM writes.

* ✨ feat(web): add channel affinity rule templates and CreateCacheRatio visual editing

Port missing features from legacy frontend (b8650b9 merge) to the new
React frontend:

- Add Codex CLI and Claude CLI channel affinity rule templates with
  header passthrough presets (pass_headers operations for Originator,
  Session_id, X-Codex-*, X-Stainless-*, Anthropic-*, etc.)
- Introduce "Add Rule" dropdown menu with blank, Codex CLI, and Claude
  CLI template options in the channel affinity settings page
- Add "Fill Templates" button to batch-append both CLI templates with
  duplicate name resolution and confirmation dialog
- Support templateKey prop in RuleEditorDialog to pre-fill form fields
  from selected template, auto-expanding advanced settings when a
  param_override_template is present
- Add CreateCacheRatio support to the model ratio visual editor, edit
  dialog, and form — previously only editable in JSON mode, now fully
  integrated into the visual table column, add/edit dialog fields, and
  save/delete handlers

* 🐛 fix(web): fix content-type detection bugs in About and Home pages

- Fix About page URL detection: replace naive `startsWith('https://')`
  with proper `new URL()` validation to support both http and https, and
  handle untrimmed input that previously caused silent misdetection
- Fix About page HTML detection: remove overly broad `startsWith('<')`
  and `endsWith('>')` checks that could misclassify Markdown or XML
  content; align with LegalDocument's regex-only `isLikelyHtml` approach
- Fix Home page URL detection: same `startsWith('https://')` bug,
  replaced with `new URL()` protocol validation
- Refactor About page to use early-return pattern instead of deeply
  nested ternary expressions for better readability
- Replace About loading spinner with Skeleton placeholder consistent
  with LegalDocument
- Add `prose prose-neutral dark:prose-invert` typography classes to
  About HTML/Markdown rendering for proper dark mode support
- Remove unused `Code` icon import from About page

* ✨ feat(web): port missing features from legacy frontend and complete i18n

Backport and enhance several features from the old frontend (web/old)
that were missing or incomplete in the new React frontend:

- Playground & channel test: parse structured JSON error responses from
  SSE streams and non-streaming API calls, extract error codes, and
  display actionable UI for `model_price_error` (admin settings link)
- User management: replace local quota manipulation with atomic
  server-side quota adjustments (add/subtract/override) via dedicated
  API endpoint, making the quota field read-only in the edit drawer
- Subscriptions: display next quota reset time for active subscriptions
- Dashboard: limit model ranking chart to top 20 models with an "Other"
  bucket, add dimension tooltips with sorted values and totals to model
  call trend and user consumption trend charts
- i18n: add 24 new translation keys across all 6 locales (en, zh, fr,
  ja, ru, vi) for the newly introduced UI elements and messages

* 🎨 feat: add backend-configurable frontend theme switching (default/classic)

Introduce runtime frontend theme switching so administrators can switch
between the new frontend (Radix UI + Tailwind) and the classic frontend
(Semi Design) from the settings page without restarting the server.

Directory restructuring:
- Move new frontend from web/ to web/default/
- Move classic frontend from web/old/ to web/classic/
- One-frontend-per-folder layout for extensibility

Backend (injection pattern):
- Add setting/system_setting/theme.go with GlobalConfig.Register("theme")
  so the DB key "theme.frontend" is handled automatically by
  handleConfigUpdate — no switch-case in updateOptionMap needed
- Use atomic.Value in common.GetTheme()/SetTheme() for lock-free
  concurrent reads on the hot path (static file middleware)
- Add themeAwareFileSystem that delegates to the correct embedded FS
  based on the current theme at request time
- Embed both frontends into the binary via go:embed
- Add controller validation for theme.frontend values
- Expose theme in GET /api/status response

Frontend settings UI:
- New frontend: add "Frontend Theme" select in System Information section
  using Radix UI Select + react-hook-form + Zod validation
- Classic frontend: add "前端主题" select in Personalization section
  using Semi Design Form.Select

Build system:
- Update Dockerfile with multi-stage builds for both frontends
- Update Makefile with separate build targets for each frontend
- Update GitHub Actions release workflow for dual frontend builds

i18n:
- New frontend: add translations for all 6 locales (en/zh/fr/ja/ru/vi)
- Classic frontend: add translations for all 7 locales (en/zh-TW/ja/fr/ru/vi)
- Fix zh "AI Proxy Library" → "AI 代理库"

Documentation:
- Update CLAUDE.md, AGENTS.md, .cursor/rules/project.mdc to reflect
  the new web/default/ and web/classic/ directory structure

* ✨ feat(web): add allow_speed passthrough for Claude channels, fix multi-key index and inference_geo scope

- Add `allow_speed` toggle for Anthropic (type 14) channels to control
  Claude inference speed mode passthrough, with full form schema,
  settings persistence, and UI switch
- Fix `allow_inference_geo` to also apply to Anthropic (type 14) channels,
  not just OpenAI (type 1), matching the backend behavior for Claude data
  residency region control
- Fix multi-key management dialog to display 1-based key indices instead
  of 0-based (#{key.index + 1})
- Fix TypeScript type error in section-registry by adding type assertion
  for theme.frontend enum
- Add i18n translations for all new keys across 6 locales (en, zh, fr,
  ja, ru, vi)

* 🧹 chore: clean up editor configs, consolidate agent skills, and set classic as default theme

- Add .cursor/ to .gitignore and remove tracked editor config files
  (.cursor/rules/, .cursor/skills/) from version control
- Consolidate .agents/skills/vercel-react-best-practices by keeping only
  the compiled AGENTS.md and removing redundant SKILL.md and 57 individual
  rule files under rules/
- Change default frontend theme from "default" to "classic" in both
  common/constants.go init and setting/system_setting/theme.go

* feat: Frontend Tiered Pricing, Waffo Payments, and Rsbuild 2 Upgrade (#24)

* feat(ui): add codex extra limits, key last used, and admin audit surfaces

- codex usage dialog: render `additional_rate_limits` with `RateLimitGroupSection` and typed base/secondary window data.
- api keys table: add "Last Used" column from `accessed_time`.
- usage log details: show top-up audit and manage operator for admins; extend `LogOtherData` audit fields; broaden IP display; warn when legacy records lack audit data.
- billing history: show user id badge for admins; add zh i18n for new strings.

* feat(web): add dynamic pricing breakdown and Waffo Pancake payments

- add billing-expr parsing and DynamicPricingBreakdown; surface tiered_expr in model list/details.
- extend PricingModel with billing_mode, billing_expr, and pricing_version for backend parity.
- add Waffo Pancake integration settings, amount/pay APIs, hook, and recharge flow wiring.
- update payment confirm/recharge UI and Chinese locale strings.

* feat(pricing): add tiered billing editor and tool price settings

- introduce tier-expr and extend billing-expr (time/param conditions, combine/split helpers, editor utilities) for visual tiers and request rules.
- support tiered_expr in model ratio dialog, form, and visual editor with billing_setting fields and default JSON placeholders.
- add TieredPricingEditor and tool price settings UI plus i18n updates.

* chore(web): bump rsbuild to v2 and align build config

- upgrade @rsbuild/core, @rsbuild/plugin-react, and Rspack 2 transitives; bump TanStack Router packages and refresh bun.lock.
- replace deprecated performance.chunkSplit with top-level splitChunks cache groups for react, radix, and tanstack vendors.
- factor dev server proxy into devProxy; set legalComments to none in prod; enable performance.buildCache keyed by VITE_REACT_APP_VERSION.
- TanStack Router plugin: enable autoCodeSplitting only in production for faster dev navigation and HMR.

* fix(i18n): update translations for API keys and Waffo Pancake settings

- Corrected translations for "API Private Key" and "Merchant ID is required" across multiple languages.
- Added new translation for "Configure Waffo Pancake hosted checkout integration for USD-priced top-ups."
- Updated various existing translations to ensure consistency and clarity in user interface text.

* refactor(code-block): simplify code highlighting and improve theme handling

- Updated the highlightCode function to support dual themes in a single call, reducing complexity.
- Removed unnecessary state management for dark theme HTML, streamlining the component.
- Enhanced CSS for Shiki themes to ensure proper token color application in dark mode.

* refactor(wallet): use isWaffoPancakePayment for pancake payment dispatch

- replace the waffo_pancake string literal with the shared helper for consistency with use-payment and PAYMENT_TYPES.
- centralize the value so a constant change does not require hunting for typos in multiple call sites.

* fix(wallet): validate waffo pancake checkout url and safe open

- allow only parseable http/https redirect targets from the backend, rejecting dangerous schemes.
- pass noopener and noreferrer in window.open to reduce reverse tabnabbing.
- show a toast and abort on invalid URLs; add i18n entries across locales.

* fix(wallet): harden payment icon image URLs

- add normalizeHttpIconUrl to allow only http(s) after resolution and reject userinfo in URLs.
- set referrerPolicy, lazy loading, and async decode on the icon <img> to cut referrer leakage.
- fall back to built-in icons on invalid URLs, same as when iconUrl is missing.

* fix(pricing): label param() conditions as body param in dynamic pricing

- non-header request rules map to `param()`, not query strings.
- align with tiered pricing editor by using the existing `Body param` string.

* fix(rsbuild): update legalComments handling in build config

- Rely on Rsbuild's default legalComments setting in all modes to ensure compliance with open-source licensing requirements.
- Clarified comments to explain the implications of omitting legalComments in production.

* fix(i18n): correct billing and codex UI strings in locale files

- restore ~83 en.json values to English (tool pricing, audit text, alipay label, etc.).
- add proper fr/ru/vi/ja strings so those locales no longer copy zh.
- change five locale files only; zh.json unchanged.

* fix(i18n): update locale files for improved translations and sync report

- Added missing translations and corrected existing strings in English, French, Japanese, Russian, Vietnamese, and Chinese locale files.
- Updated the sync report to reflect zero missing translations across multiple locales.
- Enhanced the untranslated count for Japanese locale to ensure completeness.
- Changed the base locale from zh.json to en.json for better alignment.

* chore(agents): add i18n-translate agent skill

- add `.agents/skills/i18n-translate/SKILL.md` documenting locale layout under `web/default` and
  `bun run i18n:sync` usage.
- capture a repeatable maintainer workflow with embedded script examples to find missing keys
  and untranslated values.
- give agents a clear path to complete and verify translations across en, zh, fr, ja, ru, and vi.

* feat(settings): hide frontend theme setting (#25)

* feat(settings): hide frontend theme setting

- add a local hidden feature flag with window.newapiUnlock support.
- hide the frontend theme option by default and reveal it immediately after unlock.

* feat(settings): support click unlock for frontend theme setting

- add a shared hidden click unlock hook for repeated-click gated UI.
- reveal the frontend theme option after triple-clicking the system information title.
- preserve the Doubao API address ten-click unlock behavior and remove global unlock functions.

* feat(sync 59337e9): Sync classic tiered billing, upstream price synchronization, and model management features to web/default (#26)

* feat(skill): add classic-to-default-sync skill for auditing and syncing web/classic changes to web/default

- Introduced a new skill to inspect a given commit's changes in web/classic and synchronize features and fixes to web/default.
- Documented workflow steps for extracting diffs, mapping changes, triaging, implementing, and reporting on the synchronization process.
- Emphasized quality standards and internationalization considerations for new user-visible strings.

* feat(web/default): sync billing and model management features from classic

- add `len` condition variable (total input context length); introduce
  BILLING_PRICING_VARS / BILLING_CONDITION_VARS to separate pricing vars
  from condition-only vars; fix tier condition regex to accept `len`.
- rewrite upstream ratio sync components to support per-model grouped
  rows and new ratio types (create_cache, image, audio, billing_expr).
- add LlmPromptHelper component; update tiered presets to use `len` for
  conditions; add GLM-4.5 Air, Doubao Seed 1.8, Qwen3 Omni Flash, and
  weekend-discount presets.
- add created_at / last_login_at columns to users table; add "Removed
  Models" tab to FetchModelsDialog for mapping source keys not in the
  models list.
- add extractMappingSourceModels helper; update dynamic-pricing-breakdown
  to use system currency settings; add 19 i18n keys across all locales.

* ✨ feat(default): surface tiered billing in usage logs and gate Passkey ops behind 2FA

Continues the classic-to-default sync (commit 1be6cdb) by porting the
remaining audit-log, pricing-hint, and Passkey lifecycle features from
web/classic to web/default using the default frontend's component
patterns (Radix UI, Tailwind, shadcn-style dialogs).

* feat(usage-logs): show tiered_expr breakdown and matched tier in details

  - Extend `LogOtherData` with `billing_mode`, `expr_b64`, and
    `matched_tier` fields populated by the backend for tiered logs.
  - Add `decodeBillingExprB64`, `resolveMatchedTier`, and
    `getTieredBillingSummary` helpers in `usage-logs/lib/format.ts` that
    centralise tiered-billing parsing on top of the canonical
    `parseTiersFromExpr` / `BILLING_PRICING_VARS` from the pricing
    feature, instead of duplicating the classic-frontend renderer.
  - Render `<DynamicPricingBreakdown>` inside the consume-log details
    dialog with the matched tier row highlighted in emerald and tagged
    "Matched"; suppress the legacy claude/audio/image cost rows when a
    tiered expression is in effect.
  - Surface per-tier prices and the matched tier label in log row
    segments and the billing breakdown table.

* feat(pricing): show tier-count, time-based, and request-based hints in model list

  - Add `summarizeTieredExpr` that derives compact dynamic-pricing
    metadata (tier count + presence of time/request conditions) from a
    `tiered_expr` model, computed once per render via `useMemo`, so
    users can tell *what kind* of dynamic pricing applies before
    drilling into the model details.
  - Render the hints alongside the existing "Dynamic Pricing" badge in
    `<ModelRow>`.
  - Extend `<DynamicPricingBreakdown>` with a `matchedTierLabel` prop so
    the same component can be reused from the usage-log details dialog
    to highlight the tier that actually fired.

* feat(profile): require Security Verification for Passkey register/remove

  - Wire `usePasskeyManagement` through `useSecureVerification` and
    `<SecureVerificationDialog>` in `<PasskeyCard>`.
  - Registration prompts for 2FA before issuing the Passkey credential
    (only when 2FA is already enabled — otherwise the browser-level
    Passkey prompt itself acts as proof of presence and we register
    directly).
  - Removal prompts for 2FA or Passkey, whichever the account has
    enabled, with informative toasts when neither method is available
    or the device lacks Passkey support.
  - Scope the dialog method set to the required factor so users cannot
    fall back to a weaker method, and propagate cancellation cleanly.

* refactor: tighten upstream-ratio-sync and fix tier editor narrowing

  - Drop the unused `hasSynced` state and dead `getOrderedRatioTypes` /
    `isSelectableUpstreamValue` imports from `upstream-ratio-sync.tsx`.
  - In the cost estimator, narrow `BILLING_EXTRA_VARS` entries with a
    null-`field` guard to silence the type checker and make the
    "pricing variables only" contract explicit.
  - Apply Prettier-consistent formatting to the upstream-ratio-sync
    table/columns, channel mutate drawer, system info section,
    tier-expr, and wallet helpers (no behaviour change).

* i18n: add 9 keys across en/zh/fr/ja/ru/vi

  - `{{count}} tiers`, `Billing Process`, `Matched`, `Matched Tier`,
    `Request-based`, `Security verification`, `Time-based`, plus the
    two new Passkey verification description strings.

* 🔧 refactor(default): align upstream price sync, tiered billing, and fetch-models with classic 59337e9

Port and optimize the remaining web/classic features from commit 59337e9 to web/default,
covering upstream price synchronization, tiered billing expressions, model fetching, and
channel preset detection. Improve component architecture, memoization, and i18n coverage.

Upstream Price Sync
- Extend sync to all ratio fields: CacheRatio, CreateCacheRatio, ImageRatio,
  AudioRatio, AudioCompletionRatio in addition to ModelRatio / CompletionRatio
  / ModelPrice
- Add tiered billing sync (billing_mode + billing_expr) with auto-pairing so
  selecting one upstream tier value populates the other from the same source
- Bulk select / unselect per upstream column with indeterminate checkbox state
  reflecting partial selection
- Confidence indicators warn when an upstream entry is heuristically derived
- Conflict confirm dialog gains loading state and disables actions during sync
- Default endpoint per channel: /api/pricing for official preset,
  /api/models.dev for the models.dev preset, /api/v1/models for OpenRouter,
  with the rest falling back to the global default
- Rename tab label from "Upstream sync" to "Upstream price sync" for clarity

Tiered Pricing Editor
- Add `len` (full input length, including cache hits) as a tier-condition
  variable to avoid mis-routing when cache hits reduce `p`
- When inserting a new tier, automatically convert the previous catch-all into
  a bounded tier with a `len <= X` upper bound
- Cap each tier at 0~2 conditions and disable the add-condition button at the
  limit, with an Alert explaining the recommended `len` usage
- Extend presets with Multimodal (img / img_o / ai / ao), Request rule
  (header/param matching), and Time-based (hour / weekday) entries
- Embed an LLM prompt helper that copies a model-aware template for designing
  expressions with ChatGPT / Claude

Fetch Models Dialog
- Add a "Removed Models" tab listing models still in the local selection but
  no longer returned by the upstream listing
- Exclude `model_mapping` source keys from the removed view so aliases never
  appear as missing entries
- Force-remount tab content on tab switch via `key` prop to clear stale state
- Switch count placeholders to `{{count}}` interpolation across "Existing
  Models", "New Models", and "Removed Models" labels

Channel Selector & Constants
- Recognize the models.dev preset (id, base_url, name) alongside the existing
  official-channel preset detection
- Add MODELS_DEV_PRESET_* and OPENROUTER_* constants and reorder
  ENDPOINT_OPTIONS so `pricing` is preferred over `ratio_config`
- Expose the new ratio types in RATIO_TYPE_OPTIONS for the sync filter

Types
- Add optional `type` field to UpstreamChannel for endpoint inference
- Extend RatioType union with create_cache_ratio, image_ratio, audio_ratio,
  audio_completion_ratio, billing_mode, and billing_expr

Code Quality & Performance
- Extract upstream-ratio-sync-helpers.ts to host shared types
  (RatioDifferenceEntry, ModelRow, ResolutionsMap), field ordering
  (RATIO_SYNC_FIELDS, SYNC_FIELD_ORDER, NUMERIC_SYNC_FIELDS), and selection
  logic (getPreferredSyncField, isSelectableUpstreamValue, getSyncFieldLabel)
- Memoize the column definitions in useUpstreamRatioSyncColumns and pull the
  per-cell rendering into a renderUpstreamValue helper to remove inline IIFEs
- Wrap handleBulkSelect / handleBulkUnselect in useCallback for stable refs;
  rename the misleading `_upstream` parameter to `upstream`
- Convert parsedRatios from useCallback (returning a function) to useMemo
  (returning the value) and update all call sites to read it as a value
- Memoize the channels list with useMemo so the endpoint-init effect no
  longer fires on every render due to a fresh `?? []` reference

i18n
- Add and translate new keys ("Upstream price sync", "Audio Ratio", "Audio
  Completion Ratio", "Cache Create Ratio", "Image Ratio", "Expression
  Billing", "Fixed Price", "{{n}} model(s) selected", tier guidance, etc.)
  across en, zh, fr, ja, ru, vi
- Fix truncated keys ("Existing Models (", "New Models (", "Removed Models (")
  to proper {{count}} interpolated forms in every locale
- bun run i18n:sync reports 0 missing and 0 extra keys for every locale

Verification
- bun run typecheck: pass
- bun run lint: pass
- bun run i18n:sync: pass (0 missing / 0 extras across all locales)

* 🐛 fix(default): port classic 73e5557 tiered-billing fixes and dedupe Title-Case ratio i18n keys

Sync the web/classic frontend fixes from upstream merge 73e5557 to
web/default, and clean up duplicated Title-Case ratio labels in the
upstream sync UI that were shadowing the canonical sentence-case i18n
keys.

Cache-token filter for tiered model price (port of 9f8a4ec05)
- The matched-tier breakdown shown in the usage-log details dialog
  and in the log table previously listed every cache-related price
  (Cache Read, Cache Write, Cache Write 1h) regardless of whether
  the request actually consumed cache tokens.
- `getTieredBillingSummary` in `usage-logs/lib/format.ts` now skips
  `cache`-group vars when none of `cache_tokens`,
  `cache_creation_tokens`, `cache_creation_tokens_5m`, or
  `cache_creation_tokens_1h` are positive, mirroring the classic
  `renderTieredModelPrice` / `renderTieredModelPriceSimple` logic.
- Extract `hasAnyCacheTokens(other)` as an exported helper so the
  predicate is defined once.
- Add a `hideCacheColumns?: boolean` prop to
  `DynamicPricingBreakdown` and wire it up from the log details
  dialog so the full tier table hides cache columns under the same
  condition. `model-details.tsx` keeps the default (show all
  configured prices), since that view represents the model's
  pricing structure rather than a specific call.

`tiered_expr` ratio/price fallback during sync delays (port of bee339d27)
- When saving a model in tiered-expression mode, the visual editor
  used to delete every ratio/price map entry for the model and only
  write `billing_setting.billing_mode` /
  `billing_setting.billing_expr`. In multi-instance deployments,
  instances that had not yet observed the billing_setting update
  fell back to ratios that no longer existed, breaking pricing.
- `model-ratio-dialog.tsx`: `handleSubmit` always passes every form
  field (`price`, `ratio`, `cacheRatio`, `createCacheRatio`,
  `completionRatio`, `imageRatio`, `audioRatio`,
  `audioCompletionRatio`) into the data object regardless of
  `pricingMode`, so a switch from per-token to tiered_expr no
  longer drops the previously entered ratios.
- `model-ratio-visual-editor.tsx`:
  - The row builder now also surfaces ratio/price values for
    `tiered_expr` rows, so they survive the edit-and-save round
    trip and the next save.
  - `handleSave` factors out a `setIfPresent` helper and persists
    ratio/price entries for `tiered_expr` models alongside
    billing_mode / billing_expr. These act purely as fallback
    because the backend's `ModelPriceHelper` checks `billing_mode`
    first.
  - Cell rendering mutes ratio/price values whenever the row is
    `tiered_expr` (in addition to the existing per-request
    muting), making it visually clear the values are fallback,
    not the active pricing source.

i18n: dedupe Title-Case ratio labels in upstream sync
- `upstream-ratio-sync` `RATIO_TYPE_OPTIONS` previously used
  Title-Case labels (`Model Ratio`, `Cache Ratio`, `Audio
  Completion Ratio`, …) that were rendered through `t()` but never
  existed as canonical keys in the catalogue. The form-field side
  has used sentence-case (`Model ratio`, `Cache ratio`, …) for
  some time, leaving two parallel translation entries per ratio
  type and causing the upstream sync UI to fall back to the
  English source string in zh/ja/ru/fr/vi.
- Rewrite `RATIO_TYPE_OPTIONS` in
  `system-settings/models/constants.ts` and the conflict-detection
  labels in `upstream-ratio-sync.tsx` to reuse the sentence-case
  keys.
- Drop the duplicate Title-Case entries from every locale and
  promote the better translations onto the surviving sentence-case
  keys (e.g. zh `Image ratio` keeps "图片倍率", `Audio completion
  ratio` keeps "音频补全倍率").
- Add a comment to `RATIO_TYPE_OPTIONS` warning future
  contributors not to switch back to Title Case without updating
  the catalogue.

Note on backend fix 4e93148d9
- The backend portion of the merge (allocating a fresh map in
  `updateConfigFromMap` so removed keys are properly cleared) is
  already on HEAD; no additional change is needed.

Verification
- `bun run typecheck`: pass
- `bun run lint`: pass
- `bun run i18n:sync`: 0 missing / 0 extras across
  en / zh / fr / ja / ru / vi

---------

Co-authored-by: Seefs <40468931+seefs001@users.noreply.github.com>
Co-authored-by: Seefs <i@seefs.me>
Co-authored-by: feitianbubu <feitianbubu@qq.com>
Co-authored-by: Calcium-Ion <i@caion.me>
Co-authored-by: Xyfacai <xyfacai@gmail.com>
Co-authored-by: xiangsx <1984871009@qq.com>
Co-authored-by: 郑伯涛 <351175318@qq.com>
Co-authored-by: RedwindA <austinaosid@gmail.com>
Co-authored-by: dean <1006393151@qq.com>
Co-authored-by: QuentinHsu <xuquentinyang@gmail.com>
Co-authored-by: Bliod <bliod@bliod.lan>
Co-authored-by: Apple\Apple <zeraturing@foxmail.com>

web/classic/src/components/settings/ChannelSelectorModal.jsx

@@ -0,0 +1,310 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, {
+  useState,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import { useIsMobile } from '../../hooks/common/useIsMobile';
+import {
+  Modal,
+  Table,
+  Input,
+  Space,
+  Highlight,
+  Select,
+  Tag,
+} from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+
+const OFFICIAL_RATIO_PRESET_ID = -100;
+const MODELS_DEV_PRESET_ID = -101;
+const OFFICIAL_RATIO_PRESET_NAME = '官方倍率预设';
+const MODELS_DEV_PRESET_NAME = 'models.dev 价格预设';
+const OFFICIAL_RATIO_PRESET_BASE_URL = 'https://basellm.github.io';
+const MODELS_DEV_PRESET_BASE_URL = 'https://models.dev';
+
+const ChannelSelectorModal = forwardRef(
+  (
+    {
+      visible,
+      onCancel,
+      onOk,
+      allChannels,
+      selectedChannelIds,
+      setSelectedChannelIds,
+      channelEndpoints,
+      updateChannelEndpoint,
+      t,
+    },
+    ref,
+  ) => {
+    const [searchText, setSearchText] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const isMobile = useIsMobile();
+
+    const [filteredData, setFilteredData] = useState([]);
+
+    useImperativeHandle(ref, () => ({
+      resetPagination: () => {
+        setCurrentPage(1);
+        setSearchText('');
+      },
+    }));
+
+    // 官方渠道识别
+    const isOfficialChannel = (record) => {
+      const id = record?.key ?? record?.value ?? record?._originalData?.id;
+      const base = record?._originalData?.base_url || '';
+      const name = record?.label || '';
+      return (
+        id === OFFICIAL_RATIO_PRESET_ID ||
+        id === MODELS_DEV_PRESET_ID ||
+        base === OFFICIAL_RATIO_PRESET_BASE_URL ||
+        base === MODELS_DEV_PRESET_BASE_URL ||
+        name === OFFICIAL_RATIO_PRESET_NAME ||
+        name === MODELS_DEV_PRESET_NAME
+      );
+    };
+
+    useEffect(() => {
+      if (!allChannels) return;
+
+      const searchLower = searchText.trim().toLowerCase();
+      const matched = searchLower
+        ? allChannels.filter((item) => {
+            const name = (item.label || '').toLowerCase();
+            const baseUrl = (item._originalData?.base_url || '').toLowerCase();
+            return name.includes(searchLower) || baseUrl.includes(searchLower);
+          })
+        : allChannels;
+
+      const sorted = [...matched].sort((a, b) => {
+        const wa = isOfficialChannel(a) ? 0 : 1;
+        const wb = isOfficialChannel(b) ? 0 : 1;
+        return wa - wb;
+      });
+
+      setFilteredData(sorted);
+    }, [allChannels, searchText]);
+
+    const total = filteredData.length;
+
+    const paginatedData = filteredData.slice(
+      (currentPage - 1) * pageSize,
+      currentPage * pageSize,
+    );
+
+    const updateEndpoint = (channelId, endpoint) => {
+      if (typeof updateChannelEndpoint === 'function') {
+        updateChannelEndpoint(channelId, endpoint);
+      }
+    };
+
+    const renderEndpointCell = (text, record) => {
+      const channelId = record.key || record.value;
+      const currentEndpoint = channelEndpoints[channelId] || '';
+
+      const getEndpointType = (ep) => {
+        if (ep === '/api/ratio_config') return 'ratio_config';
+        if (ep === '/api/pricing') return 'pricing';
+        if (ep === 'openrouter') return 'openrouter';
+        return 'custom';
+      };
+
+      const currentType = getEndpointType(currentEndpoint);
+
+      const handleTypeChange = (val) => {
+        if (val === 'ratio_config') {
+          updateEndpoint(channelId, '/api/ratio_config');
+        } else if (val === 'pricing') {
+          updateEndpoint(channelId, '/api/pricing');
+        } else if (val === 'openrouter') {
+          updateEndpoint(channelId, 'openrouter');
+        } else {
+          if (currentType !== 'custom') {
+            updateEndpoint(channelId, '');
+          }
+        }
+      };
+
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Select
+            size='small'
+            value={currentType}
+            onChange={handleTypeChange}
+            style={{ width: 120 }}
+            optionList={[
+              { label: 'pricing', value: 'pricing' },
+              { label: 'ratio_config', value: 'ratio_config' },
+              { label: 'OpenRouter', value: 'openrouter' },
+              { label: 'custom', value: 'custom' },
+            ]}
+          />
+          {currentType === 'custom' && (
+            <Input
+              size='small'
+              value={currentEndpoint}
+              onChange={(val) => updateEndpoint(channelId, val)}
+              placeholder='/your/endpoint'
+              style={{ width: 160, fontSize: 12 }}
+            />
+          )}
+        </div>
+      );
+    };
+
+    const renderStatusCell = (record) => {
+      const status = record?._originalData?.status || 0;
+      const official = isOfficialChannel(record);
+      let statusTag = null;
+      switch (status) {
+        case 1:
+          statusTag = (
+            <Tag color='green' shape='circle'>
+              {t('已启用')}
+            </Tag>
+          );
+          break;
+        case 2:
+          statusTag = (
+            <Tag color='red' shape='circle'>
+              {t('已禁用')}
+            </Tag>
+          );
+          break;
+        case 3:
+          statusTag = (
+            <Tag color='yellow' shape='circle'>
+              {t('自动禁用')}
+            </Tag>
+          );
+          break;
+        default:
+          statusTag = (
+            <Tag color='grey' shape='circle'>
+              {t('未知状态')}
+            </Tag>
+          );
+      }
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {statusTag}
+          {official && (
+            <Tag color='green' shape='circle' type='light'>
+              {t('官方')}
+            </Tag>
+          )}
+        </div>
+      );
+    };
+
+    const renderNameCell = (text) => (
+      <Highlight sourceString={text} searchWords={[searchText]} />
+    );
+
+    const renderBaseUrlCell = (text) => (
+      <Highlight sourceString={text} searchWords={[searchText]} />
+    );
+
+    const columns = [
+      {
+        title: t('名称'),
+        dataIndex: 'label',
+        render: renderNameCell,
+      },
+      {
+        title: t('源地址'),
+        dataIndex: '_originalData.base_url',
+        render: (_, record) =>
+          renderBaseUrlCell(record._originalData?.base_url || ''),
+      },
+      {
+        title: t('状态'),
+        dataIndex: '_originalData.status',
+        render: (_, record) => renderStatusCell(record),
+      },
+      {
+        title: t('同步接口'),
+        dataIndex: 'endpoint',
+        fixed: 'right',
+        render: renderEndpointCell,
+      },
+    ];
+
+    const rowSelection = {
+      selectedRowKeys: selectedChannelIds,
+      onChange: (keys) => setSelectedChannelIds(keys),
+    };
+
+    return (
+      <Modal
+        visible={visible}
+        onCancel={onCancel}
+        onOk={onOk}
+        title={
+          <span className='text-lg font-semibold'>{t('选择同步渠道')}</span>
+        }
+        size={isMobile ? 'full-width' : 'large'}
+        keepDOM
+        lazyRender={false}
+      >
+        <Space vertical style={{ width: '100%' }}>
+          <Input
+            prefix={<IconSearch size={14} />}
+            placeholder={t('搜索渠道名称或地址')}
+            value={searchText}
+            onChange={setSearchText}
+            showClear
+          />
+
+          <Table
+            columns={columns}
+            dataSource={paginatedData}
+            rowKey='key'
+            rowSelection={rowSelection}
+            pagination={{
+              currentPage: currentPage,
+              pageSize: pageSize,
+              total: total,
+              showSizeChanger: true,
+              showQuickJumper: true,
+              pageSizeOptions: ['10', '20', '50', '100'],
+              onChange: (page, size) => {
+                setCurrentPage(page);
+                setPageSize(size);
+              },
+              onShowSizeChange: (curr, size) => {
+                setCurrentPage(1);
+                setPageSize(size);
+              },
+            }}
+            size='small'
+          />
+        </Space>
+      </Modal>
+    );
+  },
+);
+
+export default ChannelSelectorModal;

web/classic/src/components/settings/ChatsSetting.jsx

@@ -0,0 +1,82 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+import SettingsChats from '../../pages/Setting/Chat/SettingsChats';
+import { API, showError, toBoolean } from '../../helpers';
+
+const ChatsSetting = () => {
+  let [inputs, setInputs] = useState({
+    /* 聊天设置 */
+    Chats: '[]',
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (
+          item.key.endsWith('Enabled') ||
+          ['DefaultCollapseSidebar'].includes(item.key)
+        ) {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* 聊天设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsChats options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default ChatsSetting;

web/classic/src/components/settings/DashboardSetting.jsx

@@ -0,0 +1,173 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState, useMemo } from 'react';
+import { Card, Spin, Button, Modal } from '@douyinfe/semi-ui';
+import { API, showError, showSuccess, toBoolean } from '../../helpers';
+import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo';
+import SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements';
+import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ';
+import SettingsUptimeKuma from '../../pages/Setting/Dashboard/SettingsUptimeKuma';
+import SettingsDataDashboard from '../../pages/Setting/Dashboard/SettingsDataDashboard';
+
+const DashboardSetting = () => {
+  let [inputs, setInputs] = useState({
+    'console_setting.api_info': '',
+    'console_setting.announcements': '',
+    'console_setting.faq': '',
+    'console_setting.uptime_kuma_groups': '',
+    'console_setting.api_info_enabled': '',
+    'console_setting.announcements_enabled': '',
+    'console_setting.faq_enabled': '',
+    'console_setting.uptime_kuma_enabled': '',
+
+    // 用于迁移检测的旧键，下个版本会删除
+    ApiInfo: '',
+    Announcements: '',
+    FAQ: '',
+    UptimeKumaUrl: '',
+    UptimeKumaSlug: '',
+
+    /* 数据看板 */
+    DataExportEnabled: false,
+    DataExportDefaultTime: 'hour',
+    DataExportInterval: 5,
+  });
+
+  let [loading, setLoading] = useState(false);
+  const [showMigrateModal, setShowMigrateModal] = useState(false); // 下个版本会删除
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key in inputs) {
+          newInputs[item.key] = item.value;
+        }
+        if (item.key.endsWith('Enabled') && item.key === 'DataExportEnabled') {
+          newInputs[item.key] = toBoolean(item.value);
+        }
+      });
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  // 用于迁移检测的旧键，下个版本会删除
+  const hasLegacyData = useMemo(() => {
+    const legacyKeys = [
+      'ApiInfo',
+      'Announcements',
+      'FAQ',
+      'UptimeKumaUrl',
+      'UptimeKumaSlug',
+    ];
+    return legacyKeys.some((k) => inputs[k]);
+  }, [inputs]);
+
+  useEffect(() => {
+    if (hasLegacyData) {
+      setShowMigrateModal(true);
+    }
+  }, [hasLegacyData]);
+
+  const handleMigrate = async () => {
+    try {
+      setLoading(true);
+      await API.post('/api/option/migrate_console_setting');
+      showSuccess('旧配置迁移完成');
+      await onRefresh();
+      setShowMigrateModal(false);
+    } catch (err) {
+      console.error(err);
+      showError('迁移失败: ' + (err.message || '未知错误'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* 用于迁移检测的旧键模态框，下个版本会删除 */}
+        <Modal
+          title='配置迁移确认'
+          visible={showMigrateModal}
+          onOk={handleMigrate}
+          onCancel={() => setShowMigrateModal(false)}
+          confirmLoading={loading}
+          okText='确认迁移'
+          cancelText='取消'
+        >
+          <p>检测到旧版本的配置数据，是否要迁移到新的配置格式？</p>
+          <p style={{ color: '#f57c00', marginTop: '10px' }}>
+            <strong>注意：</strong>
+            迁移过程中会自动处理数据格式转换，迁移完成后旧配置将被清除，请在迁移前在数据库中备份好旧配置。
+          </p>
+        </Modal>
+
+        {/* 数据看板设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsDataDashboard options={inputs} refresh={onRefresh} />
+        </Card>
+
+        {/* 系统公告管理 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsAnnouncements options={inputs} refresh={onRefresh} />
+        </Card>
+
+        {/* API信息管理 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsAPIInfo options={inputs} refresh={onRefresh} />
+        </Card>
+
+        {/* 常见问答管理 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsFAQ options={inputs} refresh={onRefresh} />
+        </Card>
+
+        {/* Uptime Kuma 监控设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsUptimeKuma options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default DashboardSetting;

web/classic/src/components/settings/DrawingSetting.jsx

@@ -0,0 +1,84 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+import SettingsDrawing from '../../pages/Setting/Drawing/SettingsDrawing';
+import { API, showError, toBoolean } from '../../helpers';
+
+const DrawingSetting = () => {
+  let [inputs, setInputs] = useState({
+    /* 绘图设置 */
+    DrawingEnabled: false,
+    MjNotifyEnabled: false,
+    MjAccountFilterEnabled: false,
+    MjForwardUrlEnabled: false,
+    MjModeClearEnabled: false,
+    MjActionCheckSuccessEnabled: false,
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key.endsWith('Enabled')) {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* 绘图设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsDrawing options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default DrawingSetting;

web/classic/src/components/settings/HttpStatusCodeRulesInput.jsx

@@ -0,0 +1,70 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Form, Tag, Typography } from '@douyinfe/semi-ui';
+
+export default function HttpStatusCodeRulesInput(props) {
+  const { Text } = Typography;
+  const {
+    label,
+    field,
+    placeholder,
+    extraText,
+    onChange,
+    parsed,
+    invalidText,
+  } = props;
+
+  return (
+    <>
+      <Form.Input
+        label={label}
+        placeholder={placeholder}
+        extraText={extraText}
+        field={field}
+        onChange={onChange}
+      />
+      {parsed?.ok && parsed.tokens?.length > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 8,
+            marginTop: 8,
+          }}
+        >
+          {parsed.tokens.map((token) => (
+            <Tag key={token} size='small'>
+              {token}
+            </Tag>
+          ))}
+        </div>
+      )}
+      {!parsed?.ok && (
+        <Text type='danger' style={{ display: 'block', marginTop: 8 }}>
+          {invalidText}
+          {parsed?.invalidTokens && parsed.invalidTokens.length > 0
+            ? `: ${parsed.invalidTokens.join(', ')}`
+            : ''}
+        </Text>
+      )}
+    </>
+  );
+}

web/classic/src/components/settings/ModelDeploymentSetting.jsx

@@ -0,0 +1,85 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+import { API, showError, toBoolean } from '../../helpers';
+import { useTranslation } from 'react-i18next';
+import SettingModelDeployment from '../../pages/Setting/Model/SettingModelDeployment';
+
+const ModelDeploymentSetting = () => {
+  const { t } = useTranslation();
+  let [inputs, setInputs] = useState({
+    'model_deployment.ionet.api_key': '',
+    'model_deployment.ionet.enabled': false,
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {
+        'model_deployment.ionet.api_key': '',
+        'model_deployment.ionet.enabled': false,
+      };
+
+      data.forEach((item) => {
+        if (item.key.endsWith('Enabled') || item.key.endsWith('enabled')) {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        <Card style={{ marginTop: '10px' }}>
+          <SettingModelDeployment options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default ModelDeploymentSetting;

web/classic/src/components/settings/ModelSetting.jsx

@@ -0,0 +1,137 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
+
+import { API, showError, showSuccess, toBoolean } from '../../helpers';
+import { useTranslation } from 'react-i18next';
+import SettingGeminiModel from '../../pages/Setting/Model/SettingGeminiModel';
+import SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel';
+import SettingGlobalModel from '../../pages/Setting/Model/SettingGlobalModel';
+import SettingGrokModel from '../../pages/Setting/Model/SettingGrokModel';
+import SettingsChannelAffinity from '../../pages/Setting/Operation/SettingsChannelAffinity';
+
+const ModelSetting = () => {
+  const { t } = useTranslation();
+  let [inputs, setInputs] = useState({
+    'gemini.safety_settings': '',
+    'gemini.version_settings': '',
+    'gemini.supported_imagine_models': '',
+    'gemini.remove_function_response_id_enabled': true,
+    'claude.model_headers_settings': '',
+    'claude.thinking_adapter_enabled': true,
+    'claude.default_max_tokens': '',
+    'claude.thinking_adapter_budget_tokens_percentage': 0.8,
+    'global.pass_through_request_enabled': false,
+    'global.thinking_model_blacklist': '[]',
+    'global.chat_completions_to_responses_policy': '{}',
+    'general_setting.ping_interval_enabled': false,
+    'general_setting.ping_interval_seconds': 60,
+    'gemini.thinking_adapter_enabled': false,
+    'gemini.thinking_adapter_budget_tokens_percentage': 0.6,
+    'grok.violation_deduction_enabled': true,
+    'grok.violation_deduction_amount': 0.05,
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (
+          item.key === 'gemini.safety_settings' ||
+          item.key === 'gemini.version_settings' ||
+          item.key === 'claude.model_headers_settings' ||
+          item.key === 'claude.default_max_tokens' ||
+          item.key === 'gemini.supported_imagine_models' ||
+          item.key === 'global.thinking_model_blacklist' ||
+          item.key === 'global.chat_completions_to_responses_policy'
+        ) {
+          if (item.value !== '') {
+            try {
+              item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+            } catch (e) {
+              // Keep raw value so user can fix it, and avoid crashing the page.
+              console.error(`Invalid JSON for option ${item.key}:`, e);
+            }
+          }
+        }
+        // Keep boolean config keys ending with enabled/Enabled so UI parses correctly.
+        if (item.key.endsWith('Enabled') || item.key.endsWith('enabled')) {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+      // showSuccess('刷新成功');
+    } catch (error) {
+      showError('刷新失败');
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* OpenAI */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingGlobalModel options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* Channel affinity */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsChannelAffinity options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* Gemini */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingGeminiModel options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* Claude */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingClaudeModel options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* Grok */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingGrokModel options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default ModelSetting;

web/classic/src/components/settings/OperationSetting.jsx

@@ -0,0 +1,162 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+import SettingsGeneral from '../../pages/Setting/Operation/SettingsGeneral';
+import SettingsHeaderNavModules from '../../pages/Setting/Operation/SettingsHeaderNavModules';
+import SettingsSidebarModulesAdmin from '../../pages/Setting/Operation/SettingsSidebarModulesAdmin';
+import SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensitiveWords';
+import SettingsLog from '../../pages/Setting/Operation/SettingsLog';
+import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring';
+import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit';
+import SettingsCheckin from '../../pages/Setting/Operation/SettingsCheckin';
+import { API, showError, toBoolean } from '../../helpers';
+
+const OperationSetting = () => {
+  let [inputs, setInputs] = useState({
+    /* 额度相关 */
+    QuotaForNewUser: 0,
+    PreConsumedQuota: 0,
+    QuotaForInviter: 0,
+    QuotaForInvitee: 0,
+    'quota_setting.enable_free_model_pre_consume': true,
+
+    /* 通用设置 */
+    TopUpLink: '',
+    'general_setting.docs_link': '',
+    QuotaPerUnit: 0,
+    USDExchangeRate: 0,
+    RetryTimes: 0,
+    'general_setting.quota_display_type': 'USD',
+    DisplayTokenStatEnabled: false,
+    DefaultCollapseSidebar: false,
+    DemoSiteEnabled: false,
+    SelfUseModeEnabled: false,
+
+    /* 顶栏模块管理 */
+    HeaderNavModules: '',
+
+    /* 左侧边栏模块管理（管理员） */
+    SidebarModulesAdmin: '',
+
+    /* 敏感词设置 */
+    CheckSensitiveEnabled: false,
+    CheckSensitiveOnPromptEnabled: false,
+    SensitiveWords: '',
+
+    /* 日志设置 */
+    LogConsumeEnabled: false,
+
+    /* 监控设置 */
+    ChannelDisableThreshold: 0,
+    QuotaRemindThreshold: 0,
+    AutomaticDisableChannelEnabled: false,
+    AutomaticEnableChannelEnabled: false,
+    AutomaticDisableKeywords: '',
+    AutomaticDisableStatusCodes: '401',
+    AutomaticRetryStatusCodes:
+      '100-199,300-399,401-407,409-499,500-503,505-523,525-599',
+    'monitor_setting.auto_test_channel_enabled': false,
+    'monitor_setting.auto_test_channel_minutes': 10 /* 签到设置 */,
+    'checkin_setting.enabled': false,
+    'checkin_setting.min_quota': 1000,
+    'checkin_setting.max_quota': 10000,
+
+    /* 令牌设置 */
+    'token_setting.max_user_tokens': 1000,
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (typeof inputs[item.key] === 'boolean') {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+      // showSuccess('刷新成功');
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* 通用设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsGeneral options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* 顶栏模块管理 */}
+        <div style={{ marginTop: '10px' }}>
+          <SettingsHeaderNavModules options={inputs} refresh={onRefresh} />
+        </div>
+        {/* 左侧边栏模块管理（管理员） */}
+        <div style={{ marginTop: '10px' }}>
+          <SettingsSidebarModulesAdmin options={inputs} refresh={onRefresh} />
+        </div>
+        {/* 屏蔽词过滤设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsSensitiveWords options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* 日志设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsLog options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* 监控设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsMonitoring options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* 额度设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsCreditLimit options={inputs} refresh={onRefresh} />
+        </Card>
+        {/* 签到设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsCheckin options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default OperationSetting;

web/classic/src/components/settings/OtherSetting.jsx

@@ -0,0 +1,524 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import {
+  Banner,
+  Button,
+  Col,
+  Form,
+  Row,
+  Modal,
+  Space,
+  Card,
+} from '@douyinfe/semi-ui';
+import { API, showError, showSuccess, timestamp2string } from '../../helpers';
+import { marked } from 'marked';
+import { useTranslation } from 'react-i18next';
+import { StatusContext } from '../../context/Status';
+import Text from '@douyinfe/semi-ui/lib/es/typography/text';
+
+const LEGAL_USER_AGREEMENT_KEY = 'legal.user_agreement';
+const LEGAL_PRIVACY_POLICY_KEY = 'legal.privacy_policy';
+
+const OtherSetting = () => {
+  const { t } = useTranslation();
+  let [inputs, setInputs] = useState({
+    Notice: '',
+    [LEGAL_USER_AGREEMENT_KEY]: '',
+    [LEGAL_PRIVACY_POLICY_KEY]: '',
+    SystemName: '',
+    Logo: '',
+    Footer: '',
+    About: '',
+    HomePageContent: '',
+  });
+  let [loading, setLoading] = useState(false);
+  const [showUpdateModal, setShowUpdateModal] = useState(false);
+  const [statusState, statusDispatch] = useContext(StatusContext);
+  const [updateData, setUpdateData] = useState({
+    tag_name: '',
+    content: '',
+  });
+
+  const updateOption = async (key, value) => {
+    setLoading(true);
+    const res = await API.put('/api/option/', {
+      key,
+      value,
+    });
+    const { success, message } = res.data;
+    if (success) {
+      setInputs((inputs) => ({ ...inputs, [key]: value }));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const [loadingInput, setLoadingInput] = useState({
+    Notice: false,
+    [LEGAL_USER_AGREEMENT_KEY]: false,
+    [LEGAL_PRIVACY_POLICY_KEY]: false,
+    SystemName: false,
+    Logo: false,
+    HomePageContent: false,
+    About: false,
+    Footer: false,
+    CheckUpdate: false,
+  });
+  const handleInputChange = async (value, e) => {
+    const name = e.target.id;
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  // 通用设置
+  const formAPISettingGeneral = useRef();
+  // 通用设置 - Notice
+  const submitNotice = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: true }));
+      await updateOption('Notice', inputs.Notice);
+      showSuccess(t('公告已更新'));
+    } catch (error) {
+      console.error(t('公告更新失败'), error);
+      showError(t('公告更新失败'));
+    } finally {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
+    }
+  };
+  // 通用设置 - UserAgreement
+  const submitUserAgreement = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        [LEGAL_USER_AGREEMENT_KEY]: true,
+      }));
+      await updateOption(
+        LEGAL_USER_AGREEMENT_KEY,
+        inputs[LEGAL_USER_AGREEMENT_KEY],
+      );
+      showSuccess(t('用户协议已更新'));
+    } catch (error) {
+      console.error(t('用户协议更新失败'), error);
+      showError(t('用户协议更新失败'));
+    } finally {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        [LEGAL_USER_AGREEMENT_KEY]: false,
+      }));
+    }
+  };
+  // 通用设置 - PrivacyPolicy
+  const submitPrivacyPolicy = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        [LEGAL_PRIVACY_POLICY_KEY]: true,
+      }));
+      await updateOption(
+        LEGAL_PRIVACY_POLICY_KEY,
+        inputs[LEGAL_PRIVACY_POLICY_KEY],
+      );
+      showSuccess(t('隐私政策已更新'));
+    } catch (error) {
+      console.error(t('隐私政策更新失败'), error);
+      showError(t('隐私政策更新失败'));
+    } finally {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        [LEGAL_PRIVACY_POLICY_KEY]: false,
+      }));
+    }
+  };
+  // 个性化设置
+  const formAPIPersonalization = useRef();
+  //  个性化设置 - SystemName
+  const submitSystemName = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        SystemName: true,
+      }));
+      await updateOption('SystemName', inputs.SystemName);
+      showSuccess(t('系统名称已更新'));
+    } catch (error) {
+      console.error(t('系统名称更新失败'), error);
+      showError(t('系统名称更新失败'));
+    } finally {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        SystemName: false,
+      }));
+    }
+  };
+
+  // 个性化设置 - Logo
+  const submitLogo = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: true }));
+      await updateOption('Logo', inputs.Logo);
+      showSuccess('Logo 已更新');
+    } catch (error) {
+      console.error('Logo 更新失败', error);
+      showError('Logo 更新失败');
+    } finally {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: false }));
+    }
+  };
+  // 个性化设置 - 首页内容
+  const submitOption = async (key) => {
+    try {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        HomePageContent: true,
+      }));
+      await updateOption(key, inputs[key]);
+      showSuccess('首页内容已更新');
+    } catch (error) {
+      console.error('首页内容更新失败', error);
+      showError('首页内容更新失败');
+    } finally {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        HomePageContent: false,
+      }));
+    }
+  };
+  // 个性化设置 - 关于
+  const submitAbout = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, About: true }));
+      await updateOption('About', inputs.About);
+      showSuccess('关于内容已更新');
+    } catch (error) {
+      console.error('关于内容更新失败', error);
+      showError('关于内容更新失败');
+    } finally {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, About: false }));
+    }
+  };
+  // 个性化设置 - 页脚
+  const submitFooter = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: true }));
+      await updateOption('Footer', inputs.Footer);
+      showSuccess('页脚内容已更新');
+    } catch (error) {
+      console.error('页脚内容更新失败', error);
+      showError('页脚内容更新失败');
+    } finally {
+      setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: false }));
+    }
+  };
+
+  const checkUpdate = async () => {
+    try {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        CheckUpdate: true,
+      }));
+      // Use a CORS proxy to avoid direct cross-origin requests to GitHub API
+      // Option 1: Use a public CORS proxy service
+      // const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
+      // const res = await API.get(
+      //   `${proxyUrl}https://api.github.com/repos/Calcium-Ion/new-api/releases/latest`,
+      // );
+
+      // Option 2: Use the JSON proxy approach which often works better with GitHub API
+      const res = await fetch(
+        'https://api.github.com/repos/Calcium-Ion/new-api/releases/latest',
+        {
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            // Adding User-Agent which is often required by GitHub API
+            'User-Agent': 'new-api-update-checker',
+          },
+        },
+      ).then((response) => response.json());
+
+      // Option 3: Use a local proxy endpoint
+      // Create a cached version of the response to avoid frequent GitHub API calls
+      // const res = await API.get('/api/status/github-latest-release');
+
+      const { tag_name, body } = res;
+      if (tag_name === statusState?.status?.version) {
+        showSuccess(`已是最新版本：${tag_name}`);
+      } else {
+        setUpdateData({
+          tag_name: tag_name,
+          content: marked.parse(body),
+        });
+        setShowUpdateModal(true);
+      }
+    } catch (error) {
+      console.error('Failed to check for updates:', error);
+      showError('检查更新失败，请稍后再试');
+    } finally {
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        CheckUpdate: false,
+      }));
+    }
+  };
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key in inputs) {
+          newInputs[item.key] = item.value;
+        }
+      });
+      setInputs(newInputs);
+      formAPISettingGeneral.current.setValues(newInputs);
+      formAPIPersonalization.current.setValues(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  useEffect(() => {
+    getOptions();
+  }, []);
+
+  // Function to open GitHub release page
+  const openGitHubRelease = () => {
+    window.open(
+      `https://github.com/Calcium-Ion/new-api/releases/tag/${updateData.tag_name}`,
+      '_blank',
+    );
+  };
+
+  const getStartTimeString = () => {
+    const timestamp = statusState?.status?.start_time;
+    return statusState.status ? timestamp2string(timestamp) : '';
+  };
+
+  return (
+    <Row>
+      <Col
+        span={24}
+        style={{
+          marginTop: '10px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+        }}
+      >
+        {/* 版本信息 */}
+        <Form>
+          <Card>
+            <Form.Section text={t('系统信息')}>
+              <Row>
+                <Col span={16}>
+                  <Space>
+                    <Text>
+                      {t('当前版本')}：
+                      {statusState?.status?.version || t('未知')}
+                    </Text>
+                    <Button
+                      type='primary'
+                      onClick={checkUpdate}
+                      loading={loadingInput['CheckUpdate']}
+                    >
+                      {t('检查更新')}
+                    </Button>
+                  </Space>
+                </Col>
+              </Row>
+              <Row>
+                <Col span={16}>
+                  <Text>
+                    {t('启动时间')}：{getStartTimeString()}
+                  </Text>
+                </Col>
+              </Row>
+            </Form.Section>
+          </Card>
+        </Form>
+        {/* 通用设置 */}
+        <Form
+          values={inputs}
+          getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
+        >
+          <Card>
+            <Form.Section text={t('通用设置')}>
+              <Form.TextArea
+                label={t('公告')}
+                placeholder={t(
+                  '在此输入新的公告内容，支持 Markdown & HTML 代码',
+                )}
+                field={'Notice'}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+              />
+              <Button onClick={submitNotice} loading={loadingInput['Notice']}>
+                {t('设置公告')}
+              </Button>
+              <Form.TextArea
+                label={t('用户协议')}
+                placeholder={t(
+                  '在此输入用户协议内容，支持 Markdown & HTML 代码',
+                )}
+                field={LEGAL_USER_AGREEMENT_KEY}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+                helpText={t(
+                  '填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议',
+                )}
+              />
+              <Button
+                onClick={submitUserAgreement}
+                loading={loadingInput[LEGAL_USER_AGREEMENT_KEY]}
+              >
+                {t('设置用户协议')}
+              </Button>
+              <Form.TextArea
+                label={t('隐私政策')}
+                placeholder={t(
+                  '在此输入隐私政策内容，支持 Markdown & HTML 代码',
+                )}
+                field={LEGAL_PRIVACY_POLICY_KEY}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+                helpText={t(
+                  '填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策',
+                )}
+              />
+              <Button
+                onClick={submitPrivacyPolicy}
+                loading={loadingInput[LEGAL_PRIVACY_POLICY_KEY]}
+              >
+                {t('设置隐私政策')}
+              </Button>
+            </Form.Section>
+          </Card>
+        </Form>
+        {/* 个性化设置 */}
+        <Form
+          values={inputs}
+          getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
+        >
+          <Card>
+            <Form.Section text={t('个性化设置')}>
+              <Form.Input
+                label={t('系统名称')}
+                placeholder={t('在此输入系统名称')}
+                field={'SystemName'}
+                onChange={handleInputChange}
+              />
+              <Button
+                onClick={submitSystemName}
+                loading={loadingInput['SystemName']}
+              >
+                {t('设置系统名称')}
+              </Button>
+              <Form.Input
+                label={t('Logo 图片地址')}
+                placeholder={t('在此输入 Logo 图片地址')}
+                field={'Logo'}
+                onChange={handleInputChange}
+              />
+              <Button onClick={submitLogo} loading={loadingInput['Logo']}>
+                {t('设置 Logo')}
+              </Button>
+              <Form.TextArea
+                label={t('首页内容')}
+                placeholder={t(
+                  '在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页',
+                )}
+                field={'HomePageContent'}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+              />
+              <Button
+                onClick={() => submitOption('HomePageContent')}
+                loading={loadingInput['HomePageContent']}
+              >
+                {t('设置首页内容')}
+              </Button>
+              <Form.TextArea
+                label={t('关于')}
+                placeholder={t(
+                  '在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面',
+                )}
+                field={'About'}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+              />
+              <Button onClick={submitAbout} loading={loadingInput['About']}>
+                {t('设置关于')}
+              </Button>
+              {/*  */}
+              <Banner
+                fullMode={false}
+                type='info'
+                description={t(
+                  '移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目',
+                )}
+                closeIcon={null}
+                style={{ marginTop: 15 }}
+              />
+              <Form.Input
+                label={t('页脚')}
+                placeholder={t(
+                  '在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码',
+                )}
+                field={'Footer'}
+                onChange={handleInputChange}
+              />
+              <Button onClick={submitFooter} loading={loadingInput['Footer']}>
+                {t('设置页脚')}
+              </Button>
+            </Form.Section>
+          </Card>
+        </Form>
+      </Col>
+      <Modal
+        title={t('新版本') + '：' + updateData.tag_name}
+        visible={showUpdateModal}
+        onCancel={() => setShowUpdateModal(false)}
+        footer={[
+          <Button
+            key='details'
+            type='primary'
+            onClick={() => {
+              setShowUpdateModal(false);
+              openGitHubRelease();
+            }}
+          >
+            {t('详情')}
+          </Button>,
+        ]}
+      >
+        <div dangerouslySetInnerHTML={{ __html: updateData.content }}></div>
+      </Modal>
+    </Row>
+  );
+};
+
+export default OtherSetting;

web/classic/src/components/settings/PaymentSetting.jsx

@@ -0,0 +1,215 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
+import SettingsGeneralPayment from '../../pages/Setting/Payment/SettingsGeneralPayment';
+import SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway';
+import SettingsPaymentGatewayStripe from '../../pages/Setting/Payment/SettingsPaymentGatewayStripe';
+import SettingsPaymentGatewayCreem from '../../pages/Setting/Payment/SettingsPaymentGatewayCreem';
+import SettingsPaymentGatewayWaffo from '../../pages/Setting/Payment/SettingsPaymentGatewayWaffo';
+import SettingsPaymentGatewayWaffoPancake from '../../pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake';
+import { API, showError, toBoolean } from '../../helpers';
+import { useTranslation } from 'react-i18next';
+
+const PaymentSetting = () => {
+  const { t } = useTranslation();
+  let [inputs, setInputs] = useState({
+    ServerAddress: '',
+    PayAddress: '',
+    EpayId: '',
+    EpayKey: '',
+    Price: 7.3,
+    MinTopUp: 1,
+    TopupGroupRatio: '',
+    CustomCallbackAddress: '',
+    PayMethods: '',
+    AmountOptions: '',
+    AmountDiscount: '',
+
+    StripeApiSecret: '',
+    StripeWebhookSecret: '',
+    StripePriceId: '',
+    StripeUnitPrice: 8.0,
+    StripeMinTopUp: 1,
+    StripePromotionCodesEnabled: false,
+
+    WaffoPancakeEnabled: false,
+    WaffoPancakeSandbox: false,
+    WaffoPancakeMerchantID: '',
+    WaffoPancakePrivateKey: '',
+    WaffoPancakeStoreID: '',
+    WaffoPancakeProductID: '',
+    WaffoPancakeReturnURL: '',
+    WaffoPancakeCurrency: 'USD',
+    WaffoPancakeUnitPrice: 1.0,
+    WaffoPancakeMinTopUp: 1,
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        switch (item.key) {
+          case 'TopupGroupRatio':
+            try {
+              newInputs[item.key] = JSON.stringify(
+                JSON.parse(item.value),
+                null,
+                2,
+              );
+            } catch (error) {
+              newInputs[item.key] = item.value;
+            }
+            break;
+          case 'payment_setting.amount_options':
+            try {
+              newInputs['AmountOptions'] = JSON.stringify(
+                JSON.parse(item.value),
+                null,
+                2,
+              );
+            } catch (error) {
+              newInputs['AmountOptions'] = item.value;
+            }
+            break;
+          case 'payment_setting.amount_discount':
+            try {
+              newInputs['AmountDiscount'] = JSON.stringify(
+                JSON.parse(item.value),
+                null,
+                2,
+              );
+            } catch (error) {
+              newInputs['AmountDiscount'] = item.value;
+            }
+            break;
+          case 'Price':
+          case 'MinTopUp':
+          case 'StripeUnitPrice':
+          case 'StripeMinTopUp':
+          case 'WaffoPancakeUnitPrice':
+          case 'WaffoPancakeMinTopUp':
+            newInputs[item.key] = parseFloat(item.value);
+            break;
+          case 'WaffoPancakeMerchantID':
+          case 'WaffoPancakePrivateKey':
+          case 'WaffoPancakeStoreID':
+          case 'WaffoPancakeProductID':
+          case 'WaffoPancakeReturnURL':
+          case 'WaffoPancakeCurrency':
+            newInputs[item.key] = item.value;
+            break;
+          case 'WaffoPancakeSandbox':
+            newInputs[item.key] = toBoolean(item.value);
+            break;
+          default:
+            if (item.key.endsWith('Enabled')) {
+              newInputs[item.key] = toBoolean(item.value);
+            } else {
+              newInputs[item.key] = item.value;
+            }
+            break;
+        }
+      });
+
+      setInputs((prev) => ({ ...prev, ...newInputs }));
+    } else {
+      showError(t(message));
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError(t('刷新失败'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        <Card style={{ marginTop: '10px' }}>
+          <Tabs
+            type='card'
+            defaultActiveKey='general'
+            contentStyle={{ paddingTop: 24 }}
+          >
+            <Tabs.TabPane tab={t('通用设置')} itemKey='general'>
+              <SettingsGeneralPayment
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('易支付设置')} itemKey='epay'>
+              <SettingsPaymentGateway
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('Stripe 设置')} itemKey='stripe'>
+              <SettingsPaymentGatewayStripe
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('Creem 设置')} itemKey='creem'>
+              <SettingsPaymentGatewayCreem
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('Waffo 设置')} itemKey='waffo'>
+              <SettingsPaymentGatewayWaffo
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            {/*<Tabs.TabPane tab={t('Waffo Pancake 设置')} itemKey='waffo-pancake'>*/}
+            {/*  <SettingsPaymentGatewayWaffoPancake*/}
+            {/*    options={inputs}*/}
+            {/*    refresh={onRefresh}*/}
+            {/*    hideSectionTitle*/}
+            {/*  />*/}
+            {/*</Tabs.TabPane>*/}
+          </Tabs>
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default PaymentSetting;

web/classic/src/components/settings/PerformanceSetting.jsx

@@ -0,0 +1,80 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+import SettingsPerformance from '../../pages/Setting/Performance/SettingsPerformance';
+import { API, showError, toBoolean } from '../../helpers';
+
+const PerformanceSetting = () => {
+  let [inputs, setInputs] = useState({
+    'performance_setting.disk_cache_enabled': false,
+    'performance_setting.disk_cache_threshold_mb': 10,
+    'performance_setting.disk_cache_max_size_mb': 1024,
+    'performance_setting.disk_cache_path': '',
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (typeof inputs[item.key] === 'boolean') {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* 性能设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsPerformance options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default PerformanceSetting;

web/classic/src/components/settings/PersonalSetting.jsx

@@ -0,0 +1,668 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  API,
+  copy,
+  showError,
+  showInfo,
+  showSuccess,
+  setStatusData,
+  prepareCredentialCreationOptions,
+  buildRegistrationResult,
+  isPasskeySupported,
+  setUserData,
+} from '../../helpers';
+import { UserContext } from '../../context/User';
+import { Modal } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+
+// 导入子组件
+import UserInfoHeader from './personal/components/UserInfoHeader';
+import AccountManagement from './personal/cards/AccountManagement';
+import NotificationSettings from './personal/cards/NotificationSettings';
+import PreferencesSettings from './personal/cards/PreferencesSettings';
+import CheckinCalendar from './personal/cards/CheckinCalendar';
+import EmailBindModal from './personal/modals/EmailBindModal';
+import WeChatBindModal from './personal/modals/WeChatBindModal';
+import AccountDeleteModal from './personal/modals/AccountDeleteModal';
+import ChangePasswordModal from './personal/modals/ChangePasswordModal';
+import SecureVerificationModal from '../common/modals/SecureVerificationModal';
+import { useSecureVerification } from '../../hooks/common/useSecureVerification';
+
+const PersonalSetting = () => {
+  const [userState, userDispatch] = useContext(UserContext);
+  let navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const [inputs, setInputs] = useState({
+    wechat_verification_code: '',
+    email_verification_code: '',
+    email: '',
+    self_account_deletion_confirmation: '',
+    original_password: '',
+    set_new_password: '',
+    set_new_password_confirmation: '',
+  });
+  const [status, setStatus] = useState({});
+  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
+  const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
+  const [showEmailBindModal, setShowEmailBindModal] = useState(false);
+  const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
+  const [systemToken, setSystemToken] = useState('');
+  const [passkeyStatus, setPasskeyStatus] = useState({ enabled: false });
+  const [passkeyRegisterLoading, setPasskeyRegisterLoading] = useState(false);
+  const [passkeyDeleteLoading, setPasskeyDeleteLoading] = useState(false);
+  const [passkeySupported, setPasskeySupported] = useState(false);
+  const [
+    passkeyRequiredVerificationMethod,
+    setPasskeyRequiredVerificationMethod,
+  ] = useState(null);
+  const [notificationSettings, setNotificationSettings] = useState({
+    warningType: 'email',
+    warningThreshold: 100000,
+    webhookUrl: '',
+    webhookSecret: '',
+    notificationEmail: '',
+    barkUrl: '',
+    gotifyUrl: '',
+    gotifyToken: '',
+    gotifyPriority: 5,
+    upstreamModelUpdateNotifyEnabled: false,
+    acceptUnsetModelRatioModel: false,
+    recordIpLog: false,
+  });
+
+  const {
+    isModalVisible: isPasskeyVerificationModalVisible,
+    verificationMethods: passkeyVerificationMethods,
+    verificationState: passkeyVerificationState,
+    startVerification: startPasskeyVerification,
+    executeVerification: executePasskeyVerification,
+    cancelVerification: cancelPasskeyVerification,
+    setVerificationCode: setPasskeyVerificationCode,
+    switchVerificationMethod: switchPasskeyVerificationMethod,
+    checkVerificationMethods: checkPasskeyVerificationMethods,
+  } = useSecureVerification({
+    onSuccess: () => {
+      setPasskeyRequiredVerificationMethod(null);
+    },
+  });
+
+  const visiblePasskeyVerificationMethods = passkeyRequiredVerificationMethod
+    ? {
+        ...passkeyVerificationMethods,
+        has2FA:
+          passkeyRequiredVerificationMethod === '2fa' &&
+          passkeyVerificationMethods.has2FA,
+        hasPasskey:
+          passkeyRequiredVerificationMethod === 'passkey' &&
+          passkeyVerificationMethods.hasPasskey,
+      }
+    : passkeyVerificationMethods;
+
+  useEffect(() => {
+    let saved = localStorage.getItem('status');
+    if (saved) {
+      const parsed = JSON.parse(saved);
+      setStatus(parsed);
+      if (parsed.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(parsed.turnstile_site_key);
+      } else {
+        setTurnstileEnabled(false);
+        setTurnstileSiteKey('');
+      }
+    }
+    // Always refresh status from server to avoid stale flags (e.g., admin just enabled OAuth)
+    (async () => {
+      try {
+        const res = await API.get('/api/status');
+        const { success, data } = res.data;
+        if (success && data) {
+          setStatus(data);
+          setStatusData(data);
+          if (data.turnstile_check) {
+            setTurnstileEnabled(true);
+            setTurnstileSiteKey(data.turnstile_site_key);
+          } else {
+            setTurnstileEnabled(false);
+            setTurnstileSiteKey('');
+          }
+        }
+      } catch (e) {
+        // ignore and keep local status
+      }
+    })();
+
+    getUserData();
+
+    isPasskeySupported()
+      .then(setPasskeySupported)
+      .catch(() => setPasskeySupported(false));
+  }, []);
+
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval); // Clean up on unmount
+  }, [disableButton, countdown]);
+
+  useEffect(() => {
+    if (userState?.user?.setting) {
+      const settings = JSON.parse(userState.user.setting);
+      setNotificationSettings({
+        warningType: settings.notify_type || 'email',
+        warningThreshold: settings.quota_warning_threshold || 500000,
+        webhookUrl: settings.webhook_url || '',
+        webhookSecret: settings.webhook_secret || '',
+        notificationEmail: settings.notification_email || '',
+        barkUrl: settings.bark_url || '',
+        gotifyUrl: settings.gotify_url || '',
+        gotifyToken: settings.gotify_token || '',
+        gotifyPriority:
+          settings.gotify_priority !== undefined ? settings.gotify_priority : 5,
+        upstreamModelUpdateNotifyEnabled:
+          settings.upstream_model_update_notify_enabled === true,
+        acceptUnsetModelRatioModel:
+          settings.accept_unset_model_ratio_model || false,
+        recordIpLog: settings.record_ip_log || false,
+      });
+    }
+  }, [userState?.user?.setting]);
+
+  const handleInputChange = (name, value) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const generateAccessToken = async () => {
+    const res = await API.get('/api/user/token');
+    const { success, message, data } = res.data;
+    if (success) {
+      setSystemToken(data);
+      await copy(data);
+      showSuccess(t('令牌已重置并已复制到剪贴板'));
+    } else {
+      showError(message);
+    }
+  };
+
+  const loadPasskeyStatus = async () => {
+    try {
+      const res = await API.get('/api/user/passkey');
+      const { success, data, message } = res.data;
+      if (success) {
+        setPasskeyStatus({
+          enabled: data?.enabled || false,
+          last_used_at: data?.last_used_at || null,
+          backup_eligible: data?.backup_eligible || false,
+          backup_state: data?.backup_state || false,
+        });
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      // 忽略错误，保留默认状态
+    }
+  };
+
+  const startPasskeyManagementVerification = async (apiCall, options = {}) => {
+    const methods = await checkPasskeyVerificationMethods();
+    const requiredMethod = methods.has2FA
+      ? '2fa'
+      : methods.hasPasskey
+        ? 'passkey'
+        : null;
+
+    if (!requiredMethod) {
+      showError(t('您需要先启用两步验证或 Passkey 才能执行此操作'));
+      return;
+    }
+
+    if (requiredMethod === 'passkey' && !methods.passkeySupported) {
+      showInfo(t('当前设备不支持 Passkey'));
+      return;
+    }
+
+    setPasskeyRequiredVerificationMethod(requiredMethod);
+    await startPasskeyVerification(apiCall, {
+      preferredMethod: requiredMethod,
+      title: t('安全验证'),
+      ...options,
+    });
+  };
+
+  const startPasskeyRegistration = async () => {
+    const methods = await checkPasskeyVerificationMethods();
+    if (!methods.has2FA) {
+      try {
+        await registerPasskey();
+      } catch (error) {
+        showError(error.message || t('Passkey 注册失败，请重试'));
+      }
+      return;
+    }
+
+    setPasskeyRequiredVerificationMethod('2fa');
+    await startPasskeyVerification(registerPasskey, {
+      preferredMethod: '2fa',
+      title: t('安全验证'),
+    });
+  };
+
+  const registerPasskey = async () => {
+    setPasskeyRegisterLoading(true);
+    try {
+      const beginRes = await API.post('/api/user/passkey/register/begin');
+      const { success, message, data } = beginRes.data;
+      if (!success) {
+        throw new Error(message || t('无法发起 Passkey 注册'));
+      }
+
+      const publicKey = prepareCredentialCreationOptions(
+        data?.options || data?.publicKey || data,
+      );
+      const credential = await navigator.credentials.create({ publicKey });
+      const payload = buildRegistrationResult(credential);
+      if (!payload) {
+        throw new Error(t('Passkey 注册失败，请重试'));
+      }
+
+      const finishRes = await API.post(
+        '/api/user/passkey/register/finish',
+        payload,
+      );
+      if (!finishRes.data.success) {
+        throw new Error(
+          finishRes.data.message || t('Passkey 注册失败，请重试'),
+        );
+      }
+
+      showSuccess(t('Passkey 注册成功'));
+      await loadPasskeyStatus();
+      return finishRes.data;
+    } catch (error) {
+      if (error?.name === 'AbortError') {
+        showInfo(t('已取消 Passkey 注册'));
+        return { cancelled: true };
+      }
+      throw new Error(error?.message || t('Passkey 注册失败，请重试'));
+    } finally {
+      setPasskeyRegisterLoading(false);
+    }
+  };
+
+  const handleRegisterPasskey = async () => {
+    if (!passkeySupported || !window.PublicKeyCredential) {
+      showInfo(t('当前设备不支持 Passkey'));
+      return;
+    }
+    await startPasskeyRegistration();
+  };
+
+  const removePasskey = async () => {
+    setPasskeyDeleteLoading(true);
+    try {
+      const res = await API.delete('/api/user/passkey');
+      const { success, message } = res.data;
+      if (!success) {
+        throw new Error(message || t('操作失败，请重试'));
+      }
+
+      showSuccess(t('Passkey 已解绑'));
+      await loadPasskeyStatus();
+      return res.data;
+    } catch (error) {
+      throw new Error(error?.message || t('操作失败，请重试'));
+    } finally {
+      setPasskeyDeleteLoading(false);
+    }
+  };
+
+  const handleRemovePasskey = async () => {
+    await startPasskeyManagementVerification(removePasskey);
+  };
+
+  const handlePasskeyVerificationCancel = () => {
+    setPasskeyRequiredVerificationMethod(null);
+    cancelPasskeyVerification();
+  };
+
+  const getUserData = async () => {
+    let res = await API.get(`/api/user/self`);
+    const { success, message, data } = res.data;
+    if (success) {
+      userDispatch({ type: 'login', payload: data });
+      setUserData(data);
+      await loadPasskeyStatus();
+    } else {
+      showError(message);
+    }
+  };
+
+  const handleSystemTokenClick = async (e) => {
+    e.target.select();
+    await copy(e.target.value);
+    showSuccess(t('系统令牌已复制到剪切板'));
+  };
+
+  const deleteAccount = async () => {
+    if (inputs.self_account_deletion_confirmation !== userState.user.username) {
+      showError(t('请输入你的账户名以确认删除！'));
+      return;
+    }
+
+    const res = await API.delete('/api/user/self');
+    const { success, message } = res.data;
+
+    if (success) {
+      showSuccess(t('账户已删除！'));
+      await API.get('/api/user/logout');
+      userDispatch({ type: 'logout' });
+      localStorage.removeItem('user');
+      navigate('/login');
+    } else {
+      showError(message);
+    }
+  };
+
+  const bindWeChat = async () => {
+    if (inputs.wechat_verification_code === '') return;
+    const res = await API.post('/api/oauth/wechat/bind', {
+      code: inputs.wechat_verification_code,
+    });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('微信账户绑定成功！'));
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+  };
+
+  const changePassword = async () => {
+    // if (inputs.original_password === '') {
+    //   showError(t('请输入原密码！'));
+    //   return;
+    // }
+    if (inputs.set_new_password === '') {
+      showError(t('请输入新密码！'));
+      return;
+    }
+    if (inputs.original_password === inputs.set_new_password) {
+      showError(t('新密码需要和原密码不一致！'));
+      return;
+    }
+    if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
+      showError(t('两次输入的密码不一致！'));
+      return;
+    }
+    const res = await API.put(`/api/user/self`, {
+      original_password: inputs.original_password,
+      password: inputs.set_new_password,
+    });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('密码修改成功！'));
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+    setShowChangePasswordModal(false);
+  };
+
+  const sendVerificationCode = async () => {
+    if (inputs.email === '') {
+      showError(t('请输入邮箱！'));
+      return;
+    }
+    setDisableButton(true);
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo(t('请稍后几秒重试，Turnstile 正在检查用户环境！'));
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('验证码发送成功，请检查邮箱！'));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const bindEmail = async () => {
+    if (inputs.email_verification_code === '') {
+      showError(t('请输入邮箱验证码！'));
+      return;
+    }
+    setLoading(true);
+    const res = await API.post('/api/oauth/email/bind', {
+      email: inputs.email,
+      code: inputs.email_verification_code,
+    });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('邮箱账户绑定成功！'));
+      setShowEmailBindModal(false);
+      userState.user.email = inputs.email;
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess(t('已复制：') + text);
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+    }
+  };
+
+  const handleNotificationSettingChange = (type, value) => {
+    setNotificationSettings((prev) => ({
+      ...prev,
+      [type]: value.target
+        ? value.target.value !== undefined
+          ? value.target.value
+          : value.target.checked
+        : value, // handle checkbox properly
+    }));
+  };
+
+  const saveNotificationSettings = async () => {
+    try {
+      const res = await API.put('/api/user/setting', {
+        notify_type: notificationSettings.warningType,
+        quota_warning_threshold: parseFloat(
+          notificationSettings.warningThreshold,
+        ),
+        webhook_url: notificationSettings.webhookUrl,
+        webhook_secret: notificationSettings.webhookSecret,
+        notification_email: notificationSettings.notificationEmail,
+        bark_url: notificationSettings.barkUrl,
+        gotify_url: notificationSettings.gotifyUrl,
+        gotify_token: notificationSettings.gotifyToken,
+        gotify_priority: (() => {
+          const parsed = parseInt(notificationSettings.gotifyPriority);
+          return isNaN(parsed) ? 5 : parsed;
+        })(),
+        upstream_model_update_notify_enabled:
+          notificationSettings.upstreamModelUpdateNotifyEnabled === true,
+        accept_unset_model_ratio_model:
+          notificationSettings.acceptUnsetModelRatioModel,
+        record_ip_log: notificationSettings.recordIpLog,
+      });
+
+      if (res.data.success) {
+        showSuccess(t('设置保存成功'));
+        await getUserData();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('设置保存失败'));
+    }
+  };
+
+  return (
+    <div className='mt-[60px]'>
+      <div className='flex justify-center'>
+        <div className='w-full max-w-7xl mx-auto px-2'>
+          {/* 顶部用户信息区域 */}
+          <UserInfoHeader t={t} userState={userState} />
+
+          {/* 签到日历 - 仅在启用时显示 */}
+          {status?.checkin_enabled && (
+            <div className='mt-4 md:mt-6'>
+              <CheckinCalendar
+                t={t}
+                status={status}
+                turnstileEnabled={turnstileEnabled}
+                turnstileSiteKey={turnstileSiteKey}
+              />
+            </div>
+          )}
+
+          {/* 账户管理和其他设置 */}
+          <div className='grid grid-cols-1 xl:grid-cols-2 items-start gap-4 md:gap-6 mt-4 md:mt-6'>
+            {/* 左侧：账户管理设置 */}
+            <div className='flex flex-col gap-4 md:gap-6'>
+              <AccountManagement
+                t={t}
+                userState={userState}
+                status={status}
+                systemToken={systemToken}
+                setShowEmailBindModal={setShowEmailBindModal}
+                setShowWeChatBindModal={setShowWeChatBindModal}
+                generateAccessToken={generateAccessToken}
+                handleSystemTokenClick={handleSystemTokenClick}
+                setShowChangePasswordModal={setShowChangePasswordModal}
+                setShowAccountDeleteModal={setShowAccountDeleteModal}
+                passkeyStatus={passkeyStatus}
+                passkeySupported={passkeySupported}
+                passkeyRegisterLoading={passkeyRegisterLoading}
+                passkeyDeleteLoading={passkeyDeleteLoading}
+                onPasskeyRegister={handleRegisterPasskey}
+                onPasskeyDelete={handleRemovePasskey}
+              />
+
+              {/* 偏好设置（语言等） */}
+              <PreferencesSettings t={t} />
+            </div>
+
+            {/* 右侧：其他设置 */}
+            <NotificationSettings
+              t={t}
+              notificationSettings={notificationSettings}
+              handleNotificationSettingChange={handleNotificationSettingChange}
+              saveNotificationSettings={saveNotificationSettings}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 模态框组件 */}
+      <EmailBindModal
+        t={t}
+        showEmailBindModal={showEmailBindModal}
+        setShowEmailBindModal={setShowEmailBindModal}
+        inputs={inputs}
+        handleInputChange={handleInputChange}
+        sendVerificationCode={sendVerificationCode}
+        bindEmail={bindEmail}
+        disableButton={disableButton}
+        loading={loading}
+        countdown={countdown}
+        turnstileEnabled={turnstileEnabled}
+        turnstileSiteKey={turnstileSiteKey}
+        setTurnstileToken={setTurnstileToken}
+      />
+
+      <WeChatBindModal
+        t={t}
+        showWeChatBindModal={showWeChatBindModal}
+        setShowWeChatBindModal={setShowWeChatBindModal}
+        inputs={inputs}
+        handleInputChange={handleInputChange}
+        bindWeChat={bindWeChat}
+        status={status}
+      />
+
+      <AccountDeleteModal
+        t={t}
+        showAccountDeleteModal={showAccountDeleteModal}
+        setShowAccountDeleteModal={setShowAccountDeleteModal}
+        inputs={inputs}
+        handleInputChange={handleInputChange}
+        deleteAccount={deleteAccount}
+        userState={userState}
+        turnstileEnabled={turnstileEnabled}
+        turnstileSiteKey={turnstileSiteKey}
+        setTurnstileToken={setTurnstileToken}
+      />
+
+      <ChangePasswordModal
+        t={t}
+        showChangePasswordModal={showChangePasswordModal}
+        setShowChangePasswordModal={setShowChangePasswordModal}
+        inputs={inputs}
+        handleInputChange={handleInputChange}
+        changePassword={changePassword}
+        turnstileEnabled={turnstileEnabled}
+        turnstileSiteKey={turnstileSiteKey}
+        setTurnstileToken={setTurnstileToken}
+      />
+
+      <SecureVerificationModal
+        visible={isPasskeyVerificationModalVisible}
+        verificationMethods={visiblePasskeyVerificationMethods}
+        verificationState={passkeyVerificationState}
+        onVerify={executePasskeyVerification}
+        onCancel={handlePasskeyVerificationCancel}
+        onCodeChange={setPasskeyVerificationCode}
+        onMethodSwitch={switchPasskeyVerificationMethod}
+        title={passkeyVerificationState.title}
+        description={passkeyVerificationState.description}
+      />
+    </div>
+  );
+};
+
+export default PersonalSetting;

web/classic/src/components/settings/RateLimitSetting.jsx

@@ -0,0 +1,89 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+
+import { API, showError, toBoolean } from '../../helpers';
+import { useTranslation } from 'react-i18next';
+import RequestRateLimit from '../../pages/Setting/RateLimit/SettingsRequestRateLimit';
+
+const RateLimitSetting = () => {
+  const { t } = useTranslation();
+  let [inputs, setInputs] = useState({
+    ModelRequestRateLimitEnabled: false,
+    ModelRequestRateLimitCount: 0,
+    ModelRequestRateLimitSuccessCount: 1000,
+    ModelRequestRateLimitDurationMinutes: 1,
+    ModelRequestRateLimitGroup: '',
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key === 'ModelRequestRateLimitGroup') {
+          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+        }
+
+        if (item.key.endsWith('Enabled')) {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+      // showSuccess('刷新成功');
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* AI请求速率限制 */}
+        <Card style={{ marginTop: '10px' }}>
+          <RequestRateLimit options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default RateLimitSetting;

web/classic/src/components/settings/RatioSetting.jsx

@@ -0,0 +1,121 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+
+import ModelPricingCombined from '../../pages/Setting/Ratio/ModelPricingCombined';
+import GroupRatioSettings from '../../pages/Setting/Ratio/GroupRatioSettings';
+import ModelRatioNotSetEditor from '../../pages/Setting/Ratio/ModelRationNotSetEditor';
+import UpstreamRatioSync from '../../pages/Setting/Ratio/UpstreamRatioSync';
+import ToolPriceSettings from '../../pages/Setting/Ratio/ToolPriceSettings';
+
+import { API, showError, toBoolean } from '../../helpers';
+
+const RatioSetting = () => {
+  const { t } = useTranslation();
+
+  let [inputs, setInputs] = useState({
+    ModelPrice: '',
+    ModelRatio: '',
+    CacheRatio: '',
+    CreateCacheRatio: '',
+    CompletionRatio: '',
+    GroupRatio: '',
+    GroupGroupRatio: '',
+    ImageRatio: '',
+    AudioRatio: '',
+    AudioCompletionRatio: '',
+    AutoGroups: '',
+    DefaultUseAutoGroup: false,
+    ExposeRatioEnabled: false,
+    UserUsableGroups: '',
+    'group_ratio_setting.group_special_usable_group': '',
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.value.startsWith('{') || item.value.startsWith('[')) {
+          try {
+            item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+          } catch (e) {
+            // 如果后端返回的不是合法 JSON，直接展示
+          }
+        }
+        if (['DefaultUseAutoGroup', 'ExposeRatioEnabled'].includes(item.key)) {
+          newInputs[item.key] = toBoolean(item.value);
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  const onRefresh = async () => {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    onRefresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Spin spinning={loading} size='large'>
+      <Card style={{ marginTop: '10px' }}>
+        <Tabs type='card' defaultActiveKey='pricing'>
+          <Tabs.TabPane tab={t('模型定价设置')} itemKey='pricing'>
+            <ModelPricingCombined options={inputs} refresh={onRefresh} />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab={t('分组相关设置')} itemKey='group'>
+            <GroupRatioSettings options={inputs} refresh={onRefresh} />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab={t('未设置价格模型')} itemKey='unset_models'>
+            <ModelRatioNotSetEditor options={inputs} refresh={onRefresh} />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab={t('上游价格同步')} itemKey='upstream_sync'>
+            <UpstreamRatioSync options={inputs} refresh={onRefresh} />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab={t('工具调用定价')} itemKey='tool_price'>
+            <ToolPriceSettings options={inputs} />
+          </Tabs.TabPane>
+        </Tabs>
+      </Card>
+    </Spin>
+  );
+};
+
+export default RatioSetting;

web/classic/src/components/settings/personal/cards/AccountManagement.jsx

@@ -0,0 +1,774 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Button,
+  Card,
+  Input,
+  Space,
+  Typography,
+  Avatar,
+  Tabs,
+  TabPane,
+  Popover,
+  Modal,
+} from '@douyinfe/semi-ui';
+import {
+  IconMail,
+  IconShield,
+  IconGithubLogo,
+  IconKey,
+  IconLock,
+  IconDelete,
+} from '@douyinfe/semi-icons';
+import { SiTelegram, SiWechat, SiLinux, SiDiscord } from 'react-icons/si';
+import { UserPlus, ShieldCheck } from 'lucide-react';
+import TelegramLoginButton from 'react-telegram-login';
+import {
+  API,
+  showError,
+  showSuccess,
+  onGitHubOAuthClicked,
+  onOIDCClicked,
+  onLinuxDOOAuthClicked,
+  onDiscordOAuthClicked,
+  onCustomOAuthClicked,
+  getOAuthProviderIcon,
+} from '../../../../helpers';
+import TwoFASetting from '../components/TwoFASetting';
+
+const AccountManagement = ({
+  t,
+  userState,
+  status,
+  systemToken,
+  setShowEmailBindModal,
+  setShowWeChatBindModal,
+  generateAccessToken,
+  handleSystemTokenClick,
+  setShowChangePasswordModal,
+  setShowAccountDeleteModal,
+  passkeyStatus,
+  passkeySupported,
+  passkeyRegisterLoading,
+  passkeyDeleteLoading,
+  onPasskeyRegister,
+  onPasskeyDelete,
+}) => {
+  const renderAccountInfo = (accountId, label) => {
+    if (!accountId || accountId === '') {
+      return <span className='text-gray-500'>{t('未绑定')}</span>;
+    }
+
+    const popContent = (
+      <div className='text-xs p-2'>
+        <Typography.Paragraph copyable={{ content: accountId }}>
+          {accountId}
+        </Typography.Paragraph>
+        {label ? (
+          <div className='mt-1 text-[11px] text-gray-500'>{label}</div>
+        ) : null}
+      </div>
+    );
+
+    return (
+      <Popover content={popContent} position='top' trigger='hover'>
+        <span className='block max-w-full truncate text-gray-600 hover:text-blue-600 cursor-pointer'>
+          {accountId}
+        </span>
+      </Popover>
+    );
+  };
+  const isBound = (accountId) => Boolean(accountId);
+  const [showTelegramBindModal, setShowTelegramBindModal] =
+    React.useState(false);
+  const [customOAuthBindings, setCustomOAuthBindings] = React.useState([]);
+  const [customOAuthLoading, setCustomOAuthLoading] = React.useState({});
+
+  // Fetch custom OAuth bindings
+  const loadCustomOAuthBindings = async () => {
+    try {
+      const res = await API.get('/api/user/oauth/bindings');
+      if (res.data.success) {
+        setCustomOAuthBindings(res.data.data || []);
+      } else {
+        showError(res.data.message || t('获取绑定信息失败'));
+      }
+    } catch (error) {
+      showError(error.response?.data?.message || error.message || t('获取绑定信息失败'));
+    }
+  };
+
+  // Unbind custom OAuth provider
+  const handleUnbindCustomOAuth = async (providerId, providerName) => {
+    Modal.confirm({
+      title: t('确认解绑'),
+      content: t('确定要解绑 {{name}} 吗？', { name: providerName }),
+      okText: t('确认'),
+      cancelText: t('取消'),
+      onOk: async () => {
+        setCustomOAuthLoading((prev) => ({ ...prev, [providerId]: true }));
+        try {
+          const res = await API.delete(`/api/user/oauth/bindings/${providerId}`);
+          if (res.data.success) {
+            showSuccess(t('解绑成功'));
+            await loadCustomOAuthBindings();
+          } else {
+            showError(res.data.message);
+          }
+        } catch (error) {
+          showError(error.response?.data?.message || error.message || t('操作失败'));
+        } finally {
+          setCustomOAuthLoading((prev) => ({ ...prev, [providerId]: false }));
+        }
+      },
+    });
+  };
+
+  // Handle bind custom OAuth
+  const handleBindCustomOAuth = (provider) => {
+    onCustomOAuthClicked(provider);
+  };
+
+  // Check if custom OAuth provider is bound
+  const isCustomOAuthBound = (providerId) => {
+    const normalizedId = Number(providerId);
+    return customOAuthBindings.some((b) => Number(b.provider_id) === normalizedId);
+  };
+
+  // Get binding info for a provider
+  const getCustomOAuthBinding = (providerId) => {
+    const normalizedId = Number(providerId);
+    return customOAuthBindings.find((b) => Number(b.provider_id) === normalizedId);
+  };
+
+  React.useEffect(() => {
+    loadCustomOAuthBindings();
+  }, []);
+
+  const passkeyEnabled = passkeyStatus?.enabled;
+  const lastUsedLabel = passkeyStatus?.last_used_at
+    ? new Date(passkeyStatus.last_used_at).toLocaleString()
+    : t('尚未使用');
+
+  return (
+    <Card className='!rounded-2xl'>
+      {/* 卡片头部 */}
+      <div className='flex items-center mb-4'>
+        <Avatar size='small' color='teal' className='mr-3 shadow-md'>
+          <UserPlus size={16} />
+        </Avatar>
+        <div>
+          <Typography.Text className='text-lg font-medium'>
+            {t('账户管理')}
+          </Typography.Text>
+          <div className='text-xs text-gray-600'>
+            {t('账户绑定、安全设置和身份验证')}
+          </div>
+        </div>
+      </div>
+
+      <Tabs type='card' defaultActiveKey='binding'>
+        {/* 账户绑定 Tab */}
+        <TabPane
+          tab={
+            <div className='flex items-center'>
+              <UserPlus size={16} className='mr-2' />
+              {t('账户绑定')}
+            </div>
+          }
+          itemKey='binding'
+        >
+          <div className='py-4'>
+            <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
+              {/* 邮箱绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <IconMail
+                        size='default'
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('邮箱')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {renderAccountInfo(
+                          userState.user?.email,
+                          t('邮箱地址'),
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    <Button
+                      type='primary'
+                      theme='outline'
+                      size='small'
+                      onClick={() => setShowEmailBindModal(true)}
+                    >
+                      {isBound(userState.user?.email)
+                        ? t('修改绑定')
+                        : t('绑定')}
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
+              {/* 微信绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <SiWechat
+                        size={20}
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('微信')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {!status.wechat_login
+                          ? t('未启用')
+                          : isBound(userState.user?.wechat_id)
+                            ? t('已绑定')
+                            : t('未绑定')}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    <Button
+                      type='primary'
+                      theme='outline'
+                      size='small'
+                      disabled={!status.wechat_login}
+                      onClick={() => setShowWeChatBindModal(true)}
+                    >
+                      {isBound(userState.user?.wechat_id)
+                        ? t('修改绑定')
+                        : status.wechat_login
+                          ? t('绑定')
+                          : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
+              {/* GitHub绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <IconGithubLogo
+                        size='default'
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('GitHub')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {renderAccountInfo(
+                          userState.user?.github_id,
+                          t('GitHub ID'),
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    <Button
+                      type='primary'
+                      theme='outline'
+                      size='small'
+                      onClick={() =>
+                        onGitHubOAuthClicked(status.github_client_id)
+                      }
+                      disabled={
+                        isBound(userState.user?.github_id) ||
+                        !status.github_oauth
+                      }
+                    >
+                      {status.github_oauth ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
+              {/* Discord绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <SiDiscord
+                        size={20}
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('Discord')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {renderAccountInfo(
+                          userState.user?.discord_id,
+                          t('Discord ID'),
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    <Button
+                      type='primary'
+                      theme='outline'
+                      size='small'
+                      onClick={() =>
+                        onDiscordOAuthClicked(status.discord_client_id)
+                      }
+                      disabled={
+                        isBound(userState.user?.discord_id) ||
+                        !status.discord_oauth
+                      }
+                    >
+                      {status.discord_oauth ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
+              {/* OIDC绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <IconShield
+                        size='default'
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('OIDC')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {renderAccountInfo(
+                          userState.user?.oidc_id,
+                          t('OIDC ID'),
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    <Button
+                      type='primary'
+                      theme='outline'
+                      size='small'
+                      onClick={() =>
+                        onOIDCClicked(
+                          status.oidc_authorization_endpoint,
+                          status.oidc_client_id,
+                        )
+                      }
+                      disabled={
+                        isBound(userState.user?.oidc_id) || !status.oidc_enabled
+                      }
+                    >
+                      {status.oidc_enabled ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
+              {/* Telegram绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <SiTelegram
+                        size={20}
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('Telegram')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {renderAccountInfo(
+                          userState.user?.telegram_id,
+                          t('Telegram ID'),
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    {status.telegram_oauth ? (
+                      isBound(userState.user?.telegram_id) ? (
+                        <Button
+                          disabled
+                          size='small'
+                          type='primary'
+                          theme='outline'
+                        >
+                          {t('已绑定')}
+                        </Button>
+                      ) : (
+                        <Button
+                          type='primary'
+                          theme='outline'
+                          size='small'
+                          onClick={() => setShowTelegramBindModal(true)}
+                        >
+                          {t('绑定')}
+                        </Button>
+                      )
+                    ) : (
+                      <Button
+                        disabled
+                        size='small'
+                        type='primary'
+                        theme='outline'
+                      >
+                        {t('未启用')}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </Card>
+              <Modal
+                title={t('绑定 Telegram')}
+                visible={showTelegramBindModal}
+                onCancel={() => setShowTelegramBindModal(false)}
+                footer={null}
+              >
+                <div className='my-3 text-sm text-gray-600'>
+                  {t('点击下方按钮通过 Telegram 完成绑定')}
+                </div>
+                <div className='flex justify-center'>
+                  <div className='scale-90'>
+                    <TelegramLoginButton
+                      dataAuthUrl='/api/oauth/telegram/bind'
+                      botName={status.telegram_bot_name}
+                    />
+                  </div>
+                </div>
+              </Modal>
+
+              {/* LinuxDO绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <SiLinux
+                        size={20}
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('LinuxDO')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {renderAccountInfo(
+                          userState.user?.linux_do_id,
+                          t('LinuxDO ID'),
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    <Button
+                      type='primary'
+                      theme='outline'
+                      size='small'
+                      onClick={() =>
+                        onLinuxDOOAuthClicked(status.linuxdo_client_id)
+                      }
+                      disabled={
+                        isBound(userState.user?.linux_do_id) ||
+                        !status.linuxdo_oauth
+                      }
+                    >
+                      {status.linuxdo_oauth ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
+              {/* 自定义 OAuth 提供商绑定 */}
+              {status.custom_oauth_providers &&
+                status.custom_oauth_providers.map((provider) => {
+                  const bound = isCustomOAuthBound(provider.id);
+                  const binding = getCustomOAuthBinding(provider.id);
+                  return (
+                    <Card key={provider.slug} className='!rounded-xl'>
+                      <div className='flex items-center justify-between gap-3'>
+                        <div className='flex items-center flex-1 min-w-0'>
+                          <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                            {getOAuthProviderIcon(
+                              provider.icon || binding?.provider_icon || '',
+                              20,
+                            )}
+                          </div>
+                          <div className='flex-1 min-w-0'>
+                            <div className='font-medium text-gray-900'>
+                              {provider.name}
+                            </div>
+                            <div className='text-sm text-gray-500 truncate'>
+                              {bound
+                                ? renderAccountInfo(
+                                    binding?.provider_user_id,
+                                    t('{{name}} ID', { name: provider.name }),
+                                  )
+                                : t('未绑定')}
+                            </div>
+                          </div>
+                        </div>
+                        <div className='flex-shrink-0'>
+                          {bound ? (
+                            <Button
+                              type='danger'
+                              theme='outline'
+                              size='small'
+                              loading={customOAuthLoading[provider.id]}
+                              onClick={() =>
+                                handleUnbindCustomOAuth(provider.id, provider.name)
+                              }
+                            >
+                              {t('解绑')}
+                            </Button>
+                          ) : (
+                            <Button
+                              type='primary'
+                              theme='outline'
+                              size='small'
+                              onClick={() => handleBindCustomOAuth(provider)}
+                            >
+                              {t('绑定')}
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </Card>
+                  );
+                })}
+            </div>
+          </div>
+        </TabPane>
+
+        {/* 安全设置 Tab */}
+        <TabPane
+          tab={
+            <div className='flex items-center'>
+              <ShieldCheck size={16} className='mr-2' />
+              {t('安全设置')}
+            </div>
+          }
+          itemKey='security'
+        >
+          <div className='py-4'>
+            <div className='space-y-6'>
+              <Space vertical className='w-full'>
+                {/* 系统访问令牌 */}
+                <Card className='!rounded-xl w-full'>
+                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
+                    <div className='flex items-start w-full sm:w-auto'>
+                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
+                        <IconKey size='large' className='text-slate-600' />
+                      </div>
+                      <div className='flex-1'>
+                        <Typography.Title heading={6} className='mb-1'>
+                          {t('系统访问令牌')}
+                        </Typography.Title>
+                        <Typography.Text type='tertiary' className='text-sm'>
+                          {t('用于API调用的身份验证令牌，请妥善保管')}
+                        </Typography.Text>
+                        {systemToken && (
+                          <div className='mt-3'>
+                            <Input
+                              readonly
+                              value={systemToken}
+                              onClick={handleSystemTokenClick}
+                              size='large'
+                              prefix={<IconKey />}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <Button
+                      type='primary'
+                      theme='solid'
+                      onClick={generateAccessToken}
+                      className='!bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto'
+                      icon={<IconKey />}
+                    >
+                      {systemToken ? t('重新生成') : t('生成令牌')}
+                    </Button>
+                  </div>
+                </Card>
+
+                {/* 密码管理 */}
+                <Card className='!rounded-xl w-full'>
+                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
+                    <div className='flex items-start w-full sm:w-auto'>
+                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
+                        <IconLock size='large' className='text-slate-600' />
+                      </div>
+                      <div>
+                        <Typography.Title heading={6} className='mb-1'>
+                          {t('密码管理')}
+                        </Typography.Title>
+                        <Typography.Text type='tertiary' className='text-sm'>
+                          {t('定期更改密码可以提高账户安全性')}
+                        </Typography.Text>
+                      </div>
+                    </div>
+                    <Button
+                      type='primary'
+                      theme='solid'
+                      onClick={() => setShowChangePasswordModal(true)}
+                      className='!bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto'
+                      icon={<IconLock />}
+                    >
+                      {t('修改密码')}
+                    </Button>
+                  </div>
+                </Card>
+
+                {/* Passkey 设置 */}
+                <Card className='!rounded-xl w-full'>
+                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
+                    <div className='flex items-start w-full sm:w-auto'>
+                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
+                        <IconKey size='large' className='text-slate-600' />
+                      </div>
+                      <div>
+                        <Typography.Title heading={6} className='mb-1'>
+                          {t('Passkey 登录')}
+                        </Typography.Title>
+                        <Typography.Text type='tertiary' className='text-sm'>
+                          {passkeyEnabled
+                            ? t('已启用 Passkey，无需密码即可登录')
+                            : t('使用 Passkey 实现免密且更安全的登录体验')}
+                        </Typography.Text>
+                        <div className='mt-2 text-xs text-gray-500 space-y-1'>
+                          <div>
+                            {t('最后使用时间')}：{lastUsedLabel}
+                          </div>
+                          {/*{passkeyEnabled && (*/}
+                          {/*  <div>*/}
+                          {/*    {t('备份支持')}：*/}
+                          {/*    {passkeyStatus?.backup_eligible*/}
+                          {/*      ? t('支持备份')*/}
+                          {/*      : t('不支持')}*/}
+                          {/*    ，{t('备份状态')}：*/}
+                          {/*    {passkeyStatus?.backup_state ? t('已备份') : t('未备份')}*/}
+                          {/*  </div>*/}
+                          {/*)}*/}
+                          {!passkeySupported && (
+                            <div className='text-amber-600'>
+                              {t('当前设备不支持 Passkey')}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Button
+                      type={passkeyEnabled ? 'danger' : 'primary'}
+                      theme={passkeyEnabled ? 'solid' : 'solid'}
+                      onClick={
+                        passkeyEnabled
+                          ? () => {
+                              Modal.confirm({
+                                title: t('确认解绑 Passkey'),
+                                content: t(
+                                  '解绑后将无法使用 Passkey 登录，确定要继续吗？',
+                                ),
+                                okText: t('确认解绑'),
+                                cancelText: t('取消'),
+                                okType: 'danger',
+                                onOk: onPasskeyDelete,
+                              });
+                            }
+                          : onPasskeyRegister
+                      }
+                      className={`w-full sm:w-auto ${passkeyEnabled ? '!bg-slate-500 hover:!bg-slate-600' : ''}`}
+                      icon={<IconKey />}
+                      disabled={!passkeySupported && !passkeyEnabled}
+                      loading={
+                        passkeyEnabled
+                          ? passkeyDeleteLoading
+                          : passkeyRegisterLoading
+                      }
+                    >
+                      {passkeyEnabled ? t('解绑 Passkey') : t('注册 Passkey')}
+                    </Button>
+                  </div>
+                </Card>
+
+                {/* 两步验证设置 */}
+                <TwoFASetting t={t} />
+
+                {/* 危险区域 */}
+                <Card className='!rounded-xl w-full'>
+                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
+                    <div className='flex items-start w-full sm:w-auto'>
+                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
+                        <IconDelete size='large' className='text-slate-600' />
+                      </div>
+                      <div>
+                        <Typography.Title
+                          heading={6}
+                          className='mb-1 text-slate-700'
+                        >
+                          {t('删除账户')}
+                        </Typography.Title>
+                        <Typography.Text type='tertiary' className='text-sm'>
+                          {t('此操作不可逆，所有数据将被永久删除')}
+                        </Typography.Text>
+                      </div>
+                    </div>
+                    <Button
+                      type='danger'
+                      theme='solid'
+                      onClick={() => setShowAccountDeleteModal(true)}
+                      className='w-full sm:w-auto !bg-slate-500 hover:!bg-slate-600'
+                      icon={<IconDelete />}
+                    >
+                      {t('删除账户')}
+                    </Button>
+                  </div>
+                </Card>
+              </Space>
+            </div>
+          </div>
+        </TabPane>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default AccountManagement;

web/classic/src/components/settings/personal/cards/CheckinCalendar.jsx

@@ -0,0 +1,384 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  Card,
+  Calendar,
+  Button,
+  Typography,
+  Avatar,
+  Spin,
+  Tooltip,
+  Collapsible,
+  Modal,
+} from '@douyinfe/semi-ui';
+import {
+  CalendarCheck,
+  Gift,
+  Check,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import Turnstile from 'react-turnstile';
+import { API, showError, showSuccess, renderQuota } from '../../../../helpers';
+
+const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
+  const [loading, setLoading] = useState(false);
+  const [checkinLoading, setCheckinLoading] = useState(false);
+  const [turnstileModalVisible, setTurnstileModalVisible] = useState(false);
+  const [turnstileWidgetKey, setTurnstileWidgetKey] = useState(0);
+  const [checkinData, setCheckinData] = useState({
+    enabled: false,
+    stats: {
+      checked_in_today: false,
+      total_checkins: 0,
+      total_quota: 0,
+      checkin_count: 0,
+      records: [],
+    },
+  });
+  const [currentMonth, setCurrentMonth] = useState(
+    new Date().toISOString().slice(0, 7),
+  );
+  // 初始加载状态，用于避免折叠状态闪烁
+  const [initialLoaded, setInitialLoaded] = useState(false);
+  // 折叠状态：null 表示未确定（等待首次加载）
+  const [isCollapsed, setIsCollapsed] = useState(null);
+
+  // 创建日期到额度的映射，方便快速查找
+  const checkinRecordsMap = useMemo(() => {
+    const map = {};
+    const records = checkinData.stats?.records || [];
+    records.forEach((record) => {
+      map[record.checkin_date] = record.quota_awarded;
+    });
+    return map;
+  }, [checkinData.stats?.records]);
+
+  // 计算本月获得的额度
+  const monthlyQuota = useMemo(() => {
+    const records = checkinData.stats?.records || [];
+    return records.reduce(
+      (sum, record) => sum + (record.quota_awarded || 0),
+      0,
+    );
+  }, [checkinData.stats?.records]);
+
+  // 获取签到状态
+  const fetchCheckinStatus = async (month) => {
+    const isFirstLoad = !initialLoaded;
+    setLoading(true);
+    try {
+      const res = await API.get(`/api/user/checkin?month=${month}`);
+      const { success, data, message } = res.data;
+      if (success) {
+        setCheckinData(data);
+        // 首次加载时，根据签到状态设置折叠状态
+        if (isFirstLoad) {
+          setIsCollapsed(data.stats?.checked_in_today ?? false);
+          setInitialLoaded(true);
+        }
+      } else {
+        showError(message || t('获取签到状态失败'));
+        if (isFirstLoad) {
+          setIsCollapsed(false);
+          setInitialLoaded(true);
+        }
+      }
+    } catch (error) {
+      showError(t('获取签到状态失败'));
+      if (isFirstLoad) {
+        setIsCollapsed(false);
+        setInitialLoaded(true);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const postCheckin = async (token) => {
+    const url = token
+      ? `/api/user/checkin?turnstile=${encodeURIComponent(token)}`
+      : '/api/user/checkin';
+    return API.post(url);
+  };
+
+  const shouldTriggerTurnstile = (message) => {
+    if (!turnstileEnabled) return false;
+    if (typeof message !== 'string') return true;
+    return message.includes('Turnstile');
+  };
+
+  const doCheckin = async (token) => {
+    setCheckinLoading(true);
+    try {
+      const res = await postCheckin(token);
+      const { success, data, message } = res.data;
+      if (success) {
+        showSuccess(
+          t('签到成功！获得') + ' ' + renderQuota(data.quota_awarded),
+        );
+        // 刷新签到状态
+        fetchCheckinStatus(currentMonth);
+        setTurnstileModalVisible(false);
+      } else {
+        if (!token && shouldTriggerTurnstile(message)) {
+          if (!turnstileSiteKey) {
+            showError('Turnstile is enabled but site key is empty.');
+            return;
+          }
+          setTurnstileModalVisible(true);
+          return;
+        }
+        if (token && shouldTriggerTurnstile(message)) {
+          setTurnstileWidgetKey((v) => v + 1);
+        }
+        showError(message || t('签到失败'));
+      }
+    } catch (error) {
+      showError(t('签到失败'));
+    } finally {
+      setCheckinLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (status?.checkin_enabled) {
+      fetchCheckinStatus(currentMonth);
+    }
+  }, [status?.checkin_enabled, currentMonth]);
+
+  // 如果签到功能未启用，不显示组件
+  if (!status?.checkin_enabled) {
+    return null;
+  }
+
+  // 日期渲染函数 - 显示签到状态和获得的额度
+  const dateRender = (dateString) => {
+    // Semi Calendar 传入的 dateString 是 Date.toString() 格式
+    // 需要转换为 YYYY-MM-DD 格式来匹配后端数据
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) {
+      return null;
+    }
+    // 使用本地时间格式化，避免时区问题
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const formattedDate = `${year}-${month}-${day}`; // YYYY-MM-DD
+    const quotaAwarded = checkinRecordsMap[formattedDate];
+    const isCheckedIn = quotaAwarded !== undefined;
+
+    if (isCheckedIn) {
+      return (
+        <Tooltip
+          content={`${t('获得')} ${renderQuota(quotaAwarded)}`}
+          position='top'
+        >
+          <div className='absolute inset-0 flex flex-col items-center justify-center cursor-pointer'>
+            <div className='w-6 h-6 rounded-full bg-green-500 flex items-center justify-center mb-0.5 shadow-sm'>
+              <Check size={14} className='text-white' strokeWidth={3} />
+            </div>
+            <div className='text-[10px] font-medium text-green-600 dark:text-green-400 leading-none'>
+              {renderQuota(quotaAwarded)}
+            </div>
+          </div>
+        </Tooltip>
+      );
+    }
+    return null;
+  };
+
+  // 处理月份变化
+  const handleMonthChange = (date) => {
+    const month = date.toISOString().slice(0, 7);
+    setCurrentMonth(month);
+  };
+
+  return (
+    <Card className='!rounded-2xl'>
+      <Modal
+        title='Security Check'
+        visible={turnstileModalVisible}
+        footer={null}
+        centered
+        onCancel={() => {
+          setTurnstileModalVisible(false);
+          setTurnstileWidgetKey((v) => v + 1);
+        }}
+      >
+        <div className='flex justify-center py-2'>
+          <Turnstile
+            key={turnstileWidgetKey}
+            sitekey={turnstileSiteKey}
+            onVerify={(token) => {
+              doCheckin(token);
+            }}
+            onExpire={() => {
+              setTurnstileWidgetKey((v) => v + 1);
+            }}
+          />
+        </div>
+      </Modal>
+
+      {/* 卡片头部 */}
+      <div className='flex items-center justify-between'>
+        <div
+          className='flex items-center flex-1 cursor-pointer'
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          <Avatar size='small' color='green' className='mr-3 shadow-md'>
+            <CalendarCheck size={16} />
+          </Avatar>
+          <div className='flex-1'>
+            <div className='flex items-center gap-2'>
+              <Typography.Text className='text-lg font-medium'>
+                {t('每日签到')}
+              </Typography.Text>
+              {isCollapsed ? (
+                <ChevronDown size={16} className='text-gray-400' />
+              ) : (
+                <ChevronUp size={16} className='text-gray-400' />
+              )}
+            </div>
+            <div className='text-xs text-gray-500 dark:text-gray-400'>
+              {!initialLoaded
+                ? t('正在加载签到状态...')
+                : checkinData.stats?.checked_in_today
+                  ? t('今日已签到，累计签到') +
+                    ` ${checkinData.stats?.total_checkins || 0} ` +
+                    t('天')
+                  : t('每日签到可获得随机额度奖励')}
+            </div>
+          </div>
+        </div>
+        <Button
+          type='primary'
+          theme='solid'
+          icon={<Gift size={16} />}
+          onClick={() => doCheckin()}
+          loading={checkinLoading || !initialLoaded}
+          disabled={!initialLoaded || checkinData.stats?.checked_in_today}
+          className='!bg-green-600 hover:!bg-green-700'
+        >
+          {!initialLoaded
+            ? t('加载中...')
+            : checkinData.stats?.checked_in_today
+              ? t('今日已签到')
+              : t('立即签到')}
+        </Button>
+      </div>
+
+      {/* 可折叠内容 */}
+      <Collapsible isOpen={isCollapsed === false} keepDOM>
+        {/* 签到统计 */}
+        <div className='grid grid-cols-3 gap-3 mb-4 mt-4'>
+          <div className='text-center p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
+            <div className='text-xl font-bold text-green-600'>
+              {checkinData.stats?.total_checkins || 0}
+            </div>
+            <div className='text-xs text-gray-500'>{t('累计签到')}</div>
+          </div>
+          <div className='text-center p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
+            <div className='text-xl font-bold text-orange-600'>
+              {renderQuota(monthlyQuota, 6)}
+            </div>
+            <div className='text-xs text-gray-500'>{t('本月获得')}</div>
+          </div>
+          <div className='text-center p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
+            <div className='text-xl font-bold text-blue-600'>
+              {renderQuota(checkinData.stats?.total_quota || 0, 6)}
+            </div>
+            <div className='text-xs text-gray-500'>{t('累计获得')}</div>
+          </div>
+        </div>
+
+        {/* 签到日历 - 使用更紧凑的样式 */}
+        <Spin spinning={loading}>
+          <div className='border rounded-lg overflow-hidden checkin-calendar'>
+            <style>{`
+            .checkin-calendar .semi-calendar {
+              font-size: 13px;
+            }
+            .checkin-calendar .semi-calendar-month-header {
+              padding: 8px 12px;
+            }
+            .checkin-calendar .semi-calendar-month-week-row {
+              height: 28px;
+            }
+            .checkin-calendar .semi-calendar-month-week-row th {
+              font-size: 12px;
+              padding: 4px 0;
+            }
+            .checkin-calendar .semi-calendar-month-grid-row {
+              height: auto;
+            }
+            .checkin-calendar .semi-calendar-month-grid-row td {
+              height: 56px;
+              padding: 2px;
+            }
+            .checkin-calendar .semi-calendar-month-grid-row-cell {
+              position: relative;
+              height: 100%;
+            }
+            .checkin-calendar .semi-calendar-month-grid-row-cell-day {
+              position: absolute;
+              top: 4px;
+              left: 50%;
+              transform: translateX(-50%);
+              font-size: 12px;
+              z-index: 1;
+            }
+            .checkin-calendar .semi-calendar-month-same {
+              background: transparent;
+            }
+            .checkin-calendar .semi-calendar-month-today .semi-calendar-month-grid-row-cell-day {
+              background: var(--semi-color-primary);
+              color: white;border-radius: 50%;
+              width: 20px;
+              height: 20px;
+              display: flex;
+              align-items: center;
+              justify-content: center;}
+          `}</style>
+            <Calendar
+              mode='month'
+              onChange={handleMonthChange}
+              dateGridRender={(dateString, date) => dateRender(dateString)}
+            />
+          </div>
+        </Spin>
+
+        {/* 签到说明 */}
+        <div className='mt-3 p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
+          <Typography.Text type='tertiary' className='text-xs'>
+            <ul className='list-disc list-inside space-y-0.5'>
+              <li>{t('每日签到可获得随机额度奖励')}</li>
+              <li>{t('签到奖励将直接添加到您的账户余额')}</li>
+              <li>{t('每日仅可签到一次，请勿重复签到')}</li>
+            </ul>
+          </Typography.Text>
+        </div>
+      </Collapsible>
+    </Card>
+  );
+};
+
+export default CheckinCalendar;

web/classic/src/components/settings/personal/cards/ModelsList.jsx

@@ -0,0 +1,280 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useEffect } from 'react';
+import {
+  Empty,
+  Skeleton,
+  Space,
+  Tag,
+  Collapsible,
+  Tabs,
+  TabPane,
+  Typography,
+  Avatar,
+} from '@douyinfe/semi-ui';
+import {
+  IllustrationNoContent,
+  IllustrationNoContentDark,
+} from '@douyinfe/semi-illustrations';
+import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
+import { Settings } from 'lucide-react';
+import { renderModelTag, getModelCategories } from '../../../../helpers';
+
+const ModelsList = ({ t, models, modelsLoading, copyText }) => {
+  const [isModelsExpanded, setIsModelsExpanded] = useState(() => {
+    // Initialize from localStorage if available
+    const savedState = localStorage.getItem('modelsExpanded');
+    return savedState ? JSON.parse(savedState) : false;
+  });
+  const [activeModelCategory, setActiveModelCategory] = useState('all');
+  const MODELS_DISPLAY_COUNT = 25; // 默认显示的模型数量
+
+  // Save models expanded state to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('modelsExpanded', JSON.stringify(isModelsExpanded));
+  }, [isModelsExpanded]);
+
+  return (
+    <div className='py-4'>
+      {/* 卡片头部 */}
+      <div className='flex items-center mb-4'>
+        <Avatar size='small' color='green' className='mr-3 shadow-md'>
+          <Settings size={16} />
+        </Avatar>
+        <div>
+          <Typography.Text className='text-lg font-medium'>
+            {t('可用模型')}
+          </Typography.Text>
+          <div className='text-xs text-gray-600'>
+            {t('查看当前可用的所有模型')}
+          </div>
+        </div>
+      </div>
+
+      {/* 可用模型部分 */}
+      <div className='bg-gray-50 dark:bg-gray-800 rounded-xl'>
+        {modelsLoading ? (
+          // 骨架屏加载状态 - 模拟实际加载后的布局
+          <div className='space-y-4'>
+            {/* 模拟分类标签 */}
+            <div
+              className='mb-4'
+              style={{ borderBottom: '1px solid var(--semi-color-border)' }}
+            >
+              <div className='flex overflow-x-auto py-2 gap-2'>
+                {Array.from({ length: 8 }).map((_, index) => (
+                  <Skeleton.Button
+                    key={`cat-${index}`}
+                    style={{
+                      width: index === 0 ? 130 : 100 + Math.random() * 50,
+                      height: 36,
+                      borderRadius: 8,
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* 模拟模型标签列表 */}
+            <div className='flex flex-wrap gap-2'>
+              {Array.from({ length: 20 }).map((_, index) => (
+                <Skeleton.Button
+                  key={`model-${index}`}
+                  style={{
+                    width: 100 + Math.random() * 100,
+                    height: 32,
+                    borderRadius: 16,
+                    margin: '4px',
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        ) : models.length === 0 ? (
+          <div className='py-8'>
+            <Empty
+              image={
+                <IllustrationNoContent style={{ width: 150, height: 150 }} />
+              }
+              darkModeImage={
+                <IllustrationNoContentDark
+                  style={{ width: 150, height: 150 }}
+                />
+              }
+              description={t('没有可用模型')}
+              style={{ padding: '24px 0' }}
+            />
+          </div>
+        ) : (
+          <>
+            {/* 模型分类标签页 */}
+            <div className='mb-4'>
+              <Tabs
+                type='card'
+                activeKey={activeModelCategory}
+                onChange={(key) => setActiveModelCategory(key)}
+                className='mt-2'
+                collapsible
+              >
+                {Object.entries(getModelCategories(t)).map(
+                  ([key, category]) => {
+                    // 计算该分类下的模型数量
+                    const modelCount =
+                      key === 'all'
+                        ? models.length
+                        : models.filter((model) =>
+                            category.filter({ model_name: model }),
+                          ).length;
+
+                    if (modelCount === 0 && key !== 'all') return null;
+
+                    return (
+                      <TabPane
+                        tab={
+                          <span className='flex items-center gap-2'>
+                            {category.icon && (
+                              <span className='w-4 h-4'>{category.icon}</span>
+                            )}
+                            {category.label}
+                            <Tag
+                              color={
+                                activeModelCategory === key ? 'red' : 'grey'
+                              }
+                              size='small'
+                              shape='circle'
+                            >
+                              {modelCount}
+                            </Tag>
+                          </span>
+                        }
+                        itemKey={key}
+                        key={key}
+                      />
+                    );
+                  },
+                )}
+              </Tabs>
+            </div>
+
+            <div className='bg-white dark:bg-gray-700 rounded-lg p-3'>
+              {(() => {
+                // 根据当前选中的分类过滤模型
+                const categories = getModelCategories(t);
+                const filteredModels =
+                  activeModelCategory === 'all'
+                    ? models
+                    : models.filter((model) =>
+                        categories[activeModelCategory].filter({
+                          model_name: model,
+                        }),
+                      );
+
+                // 如果过滤后没有模型，显示空状态
+                if (filteredModels.length === 0) {
+                  return (
+                    <Empty
+                      image={
+                        <IllustrationNoContent
+                          style={{ width: 120, height: 120 }}
+                        />
+                      }
+                      darkModeImage={
+                        <IllustrationNoContentDark
+                          style={{ width: 120, height: 120 }}
+                        />
+                      }
+                      description={t('该分类下没有可用模型')}
+                      style={{ padding: '16px 0' }}
+                    />
+                  );
+                }
+
+                if (filteredModels.length <= MODELS_DISPLAY_COUNT) {
+                  return (
+                    <Space wrap>
+                      {filteredModels.map((model) =>
+                        renderModelTag(model, {
+                          size: 'small',
+                          shape: 'circle',
+                          onClick: () => copyText(model),
+                        }),
+                      )}
+                    </Space>
+                  );
+                } else {
+                  return (
+                    <>
+                      <Collapsible isOpen={isModelsExpanded}>
+                        <Space wrap>
+                          {filteredModels.map((model) =>
+                            renderModelTag(model, {
+                              size: 'small',
+                              shape: 'circle',
+                              onClick: () => copyText(model),
+                            }),
+                          )}
+                          <Tag
+                            color='grey'
+                            type='light'
+                            className='cursor-pointer !rounded-lg'
+                            onClick={() => setIsModelsExpanded(false)}
+                            icon={<IconChevronUp />}
+                          >
+                            {t('收起')}
+                          </Tag>
+                        </Space>
+                      </Collapsible>
+                      {!isModelsExpanded && (
+                        <Space wrap>
+                          {filteredModels
+                            .slice(0, MODELS_DISPLAY_COUNT)
+                            .map((model) =>
+                              renderModelTag(model, {
+                                size: 'small',
+                                shape: 'circle',
+                                onClick: () => copyText(model),
+                              }),
+                            )}
+                          <Tag
+                            color='grey'
+                            type='light'
+                            className='cursor-pointer !rounded-lg'
+                            onClick={() => setIsModelsExpanded(true)}
+                            icon={<IconChevronDown />}
+                          >
+                            {t('更多')}{' '}
+                            {filteredModels.length - MODELS_DISPLAY_COUNT}{' '}
+                            {t('个模型')}
+                          </Tag>
+                        </Space>
+                      )}
+                    </>
+                  );
+                }
+              })()}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModelsList;

web/classic/src/components/settings/personal/cards/NotificationSettings.jsx

@@ -0,0 +1,950 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useRef, useEffect, useState, useContext } from 'react';
+import {
+  Button,
+  Typography,
+  Card,
+  Avatar,
+  Form,
+  Radio,
+  Toast,
+  Tabs,
+  TabPane,
+  Switch,
+  Row,
+  Col,
+} from '@douyinfe/semi-ui';
+import { IconMail, IconKey, IconBell, IconLink } from '@douyinfe/semi-icons';
+import { ShieldCheck, Bell, DollarSign, Settings } from 'lucide-react';
+import {
+  renderQuotaWithPrompt,
+  API,
+  showSuccess,
+  showError,
+} from '../../../../helpers';
+import CodeViewer from '../../../playground/CodeViewer';
+import { StatusContext } from '../../../../context/Status';
+import { UserContext } from '../../../../context/User';
+import { useUserPermissions } from '../../../../hooks/common/useUserPermissions';
+import {
+  mergeAdminConfig,
+  useSidebar,
+} from '../../../../hooks/common/useSidebar';
+
+const NotificationSettings = ({
+  t,
+  notificationSettings,
+  handleNotificationSettingChange,
+  saveNotificationSettings,
+}) => {
+  const formApiRef = useRef(null);
+  const [statusState] = useContext(StatusContext);
+  const [userState] = useContext(UserContext);
+  const isAdminOrRoot = (userState?.user?.role || 0) >= 10;
+
+  // 左侧边栏设置相关状态
+  const [sidebarLoading, setSidebarLoading] = useState(false);
+  const [activeTabKey, setActiveTabKey] = useState('notification');
+  const [sidebarModulesUser, setSidebarModulesUser] = useState({
+    chat: {
+      enabled: true,
+      playground: true,
+      chat: true,
+    },
+    console: {
+      enabled: true,
+      detail: true,
+      token: true,
+      log: true,
+      midjourney: true,
+      task: true,
+    },
+    personal: {
+      enabled: true,
+      topup: true,
+      personal: true,
+    },
+    admin: {
+      enabled: true,
+      channel: true,
+      models: true,
+      deployment: true,
+      subscription: true,
+      redemption: true,
+      user: true,
+      setting: true,
+    },
+  });
+  const [adminConfig, setAdminConfig] = useState(null);
+
+  // 使用后端权限验证替代前端角色判断
+  const {
+    permissions,
+    loading: permissionsLoading,
+    hasSidebarSettingsPermission,
+    isSidebarSectionAllowed,
+    isSidebarModuleAllowed,
+  } = useUserPermissions();
+
+  // 使用useSidebar钩子获取刷新方法
+  const { refreshUserConfig } = useSidebar();
+
+  // 左侧边栏设置处理函数
+  const handleSectionChange = (sectionKey) => {
+    return (checked) => {
+      const newModules = {
+        ...sidebarModulesUser,
+        [sectionKey]: {
+          ...sidebarModulesUser[sectionKey],
+          enabled: checked,
+        },
+      };
+      setSidebarModulesUser(newModules);
+    };
+  };
+
+  const handleModuleChange = (sectionKey, moduleKey) => {
+    return (checked) => {
+      const newModules = {
+        ...sidebarModulesUser,
+        [sectionKey]: {
+          ...sidebarModulesUser[sectionKey],
+          [moduleKey]: checked,
+        },
+      };
+      setSidebarModulesUser(newModules);
+    };
+  };
+
+  const saveSidebarSettings = async () => {
+    setSidebarLoading(true);
+    try {
+      const res = await API.put('/api/user/self', {
+        sidebar_modules: JSON.stringify(sidebarModulesUser),
+      });
+      if (res.data.success) {
+        showSuccess(t('侧边栏设置保存成功'));
+
+        // 刷新useSidebar钩子中的用户配置，实现实时更新
+        await refreshUserConfig();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('保存失败'));
+    }
+    setSidebarLoading(false);
+  };
+
+  const resetSidebarModules = () => {
+    const defaultConfig = {
+      chat: { enabled: true, playground: true, chat: true },
+      console: {
+        enabled: true,
+        detail: true,
+        token: true,
+        log: true,
+        midjourney: true,
+        task: true,
+      },
+      personal: { enabled: true, topup: true, personal: true },
+      admin: {
+        enabled: true,
+        channel: true,
+        models: true,
+        deployment: true,
+        subscription: true,
+        redemption: true,
+        user: true,
+        setting: true,
+      },
+    };
+    setSidebarModulesUser(defaultConfig);
+  };
+
+  // 加载左侧边栏配置
+  useEffect(() => {
+    const loadSidebarConfigs = async () => {
+      try {
+        // 获取管理员全局配置
+        if (statusState?.status?.SidebarModulesAdmin) {
+          try {
+            const adminConf = JSON.parse(
+              statusState.status.SidebarModulesAdmin,
+            );
+            setAdminConfig(mergeAdminConfig(adminConf));
+          } catch (error) {
+            setAdminConfig(mergeAdminConfig(null));
+          }
+        } else {
+          setAdminConfig(mergeAdminConfig(null));
+        }
+
+        // 获取用户个人配置
+        const userRes = await API.get('/api/user/self');
+        if (userRes.data.success && userRes.data.data.sidebar_modules) {
+          let userConf;
+          if (typeof userRes.data.data.sidebar_modules === 'string') {
+            userConf = JSON.parse(userRes.data.data.sidebar_modules);
+          } else {
+            userConf = userRes.data.data.sidebar_modules;
+          }
+          setSidebarModulesUser(userConf);
+        }
+      } catch (error) {
+        console.error('加载边栏配置失败:', error);
+      }
+    };
+
+    loadSidebarConfigs();
+  }, [statusState]);
+
+  // 初始化表单值
+  useEffect(() => {
+    if (formApiRef.current && notificationSettings) {
+      formApiRef.current.setValues(notificationSettings);
+    }
+  }, [notificationSettings]);
+
+  // 处理表单字段变化
+  const handleFormChange = (field, value) => {
+    handleNotificationSettingChange(field, value);
+  };
+
+  // 检查功能是否被管理员允许
+  const isAllowedByAdmin = (sectionKey, moduleKey = null) => {
+    if (!adminConfig) return true;
+
+    if (moduleKey) {
+      return (
+        adminConfig[sectionKey]?.enabled && adminConfig[sectionKey]?.[moduleKey]
+      );
+    } else {
+      return adminConfig[sectionKey]?.enabled;
+    }
+  };
+
+  // 区域配置数据（根据权限过滤）
+  const sectionConfigs = [
+    {
+      key: 'chat',
+      title: t('聊天区域'),
+      description: t('操练场和聊天功能'),
+      modules: [
+        {
+          key: 'playground',
+          title: t('操练场'),
+          description: t('AI模型测试环境'),
+        },
+        { key: 'chat', title: t('聊天'), description: t('聊天会话管理') },
+      ],
+    },
+    {
+      key: 'console',
+      title: t('控制台区域'),
+      description: t('数据管理和日志查看'),
+      modules: [
+        { key: 'detail', title: t('数据看板'), description: t('系统数据统计') },
+        { key: 'token', title: t('令牌管理'), description: t('API令牌管理') },
+        { key: 'log', title: t('使用日志'), description: t('API使用记录') },
+        {
+          key: 'midjourney',
+          title: t('绘图日志'),
+          description: t('绘图任务记录'),
+        },
+        { key: 'task', title: t('任务日志'), description: t('系统任务记录') },
+      ],
+    },
+    {
+      key: 'personal',
+      title: t('个人中心区域'),
+      description: t('用户个人功能'),
+      modules: [
+        { key: 'topup', title: t('钱包管理'), description: t('余额充值管理') },
+        {
+          key: 'personal',
+          title: t('个人设置'),
+          description: t('个人信息设置'),
+        },
+      ],
+    },
+    // 管理员区域：根据后端权限控制显示
+    {
+      key: 'admin',
+      title: t('管理员区域'),
+      description: t('系统管理功能'),
+      modules: [
+        { key: 'channel', title: t('渠道管理'), description: t('API渠道配置') },
+        { key: 'models', title: t('模型管理'), description: t('AI模型配置') },
+        {
+          key: 'deployment',
+          title: t('模型部署'),
+          description: t('模型部署管理'),
+        },
+        {
+          key: 'subscription',
+          title: t('订阅管理'),
+          description: t('订阅套餐管理'),
+        },
+        {
+          key: 'redemption',
+          title: t('兑换码管理'),
+          description: t('兑换码生成管理'),
+        },
+        { key: 'user', title: t('用户管理'), description: t('用户账户管理') },
+        {
+          key: 'setting',
+          title: t('系统设置'),
+          description: t('系统参数配置'),
+        },
+      ],
+    },
+  ]
+    .filter((section) => {
+      // 使用后端权限验证替代前端角色判断
+      return isSidebarSectionAllowed(section.key);
+    })
+    .map((section) => ({
+      ...section,
+      modules: section.modules.filter((module) =>
+        isSidebarModuleAllowed(section.key, module.key),
+      ),
+    }))
+    .filter(
+      (section) =>
+        // 过滤掉没有可用模块的区域
+        section.modules.length > 0 && isAllowedByAdmin(section.key),
+    );
+
+  // 表单提交
+  const handleSubmit = () => {
+    if (formApiRef.current) {
+      formApiRef.current
+        .validate()
+        .then(() => {
+          saveNotificationSettings();
+        })
+        .catch((errors) => {
+          console.log('表单验证失败:', errors);
+          Toast.error(t('请检查表单填写是否正确'));
+        });
+    } else {
+      saveNotificationSettings();
+    }
+  };
+
+  return (
+    <Card
+      className='!rounded-2xl shadow-sm border-0'
+      footer={
+        <div className='flex justify-end gap-3'>
+          {activeTabKey === 'sidebar' ? (
+            // 边栏设置标签页的按钮
+            <>
+              <Button
+                type='tertiary'
+                onClick={resetSidebarModules}
+                className='!rounded-lg'
+              >
+                {t('重置为默认')}
+              </Button>
+              <Button
+                type='primary'
+                onClick={saveSidebarSettings}
+                loading={sidebarLoading}
+                className='!rounded-lg'
+              >
+                {t('保存设置')}
+              </Button>
+            </>
+          ) : (
+            // 其他标签页的通用保存按钮
+            <Button type='primary' onClick={handleSubmit}>
+              {t('保存设置')}
+            </Button>
+          )}
+        </div>
+      }
+    >
+      {/* 卡片头部 */}
+      <div className='flex items-center mb-4'>
+        <Avatar size='small' color='blue' className='mr-3 shadow-md'>
+          <Bell size={16} />
+        </Avatar>
+        <div>
+          <Typography.Text className='text-lg font-medium'>
+            {t('其他设置')}
+          </Typography.Text>
+          <div className='text-xs text-gray-600'>
+            {t('通知、价格和隐私相关设置')}
+          </div>
+        </div>
+      </div>
+
+      <Form
+        getFormApi={(api) => (formApiRef.current = api)}
+        initValues={notificationSettings}
+        onSubmit={handleSubmit}
+      >
+        {() => (
+          <Tabs
+            type='card'
+            defaultActiveKey='notification'
+            onChange={(key) => setActiveTabKey(key)}
+          >
+            {/* 通知配置 Tab */}
+            <TabPane
+              tab={
+                <div className='flex items-center'>
+                  <Bell size={16} className='mr-2' />
+                  {t('通知配置')}
+                </div>
+              }
+              itemKey='notification'
+            >
+              <div className='py-4'>
+                <Form.RadioGroup
+                  field='warningType'
+                  label={t('通知方式')}
+                  initValue={notificationSettings.warningType}
+                  onChange={(value) => handleFormChange('warningType', value)}
+                  rules={[{ required: true, message: t('请选择通知方式') }]}
+                >
+                  <Radio value='email'>{t('邮件通知')}</Radio>
+                  <Radio value='webhook'>{t('Webhook通知')}</Radio>
+                  <Radio value='bark'>{t('Bark通知')}</Radio>
+                  <Radio value='gotify'>{t('Gotify通知')}</Radio>
+                </Form.RadioGroup>
+
+                <Form.AutoComplete
+                  field='warningThreshold'
+                  label={
+                    <span>
+                      {t('额度预警阈值')}{' '}
+                      {renderQuotaWithPrompt(
+                        notificationSettings.warningThreshold,
+                      )}
+                    </span>
+                  }
+                  placeholder={t('请输入预警额度')}
+                  data={[
+                    { value: 100000, label: '0.2$' },
+                    { value: 500000, label: '1$' },
+                    { value: 1000000, label: '2$' },
+                    { value: 5000000, label: '10$' },
+                  ]}
+                  onChange={(val) => handleFormChange('warningThreshold', val)}
+                  prefix={<IconBell />}
+                  extraText={t(
+                    '当钱包或订阅剩余额度低于此数值时，系统将通过选择的方式发送通知',
+                  )}
+                  style={{ width: '100%', maxWidth: '300px' }}
+                  rules={[
+                    { required: true, message: t('请输入预警阈值') },
+                    {
+                      validator: (rule, value) => {
+                        const numValue = Number(value);
+                        if (isNaN(numValue) || numValue <= 0) {
+                          return Promise.reject(t('预警阈值必须为正数'));
+                        }
+                        return Promise.resolve();
+                      },
+                    },
+                  ]}
+                />
+
+                {isAdminOrRoot && (
+                  <Form.Switch
+                    field='upstreamModelUpdateNotifyEnabled'
+                    label={t('接收上游模型更新通知')}
+                    checkedText={t('开')}
+                    uncheckedText={t('关')}
+                    onChange={(value) =>
+                      handleFormChange('upstreamModelUpdateNotifyEnabled', value)
+                    }
+                    extraText={t(
+                      '仅管理员可用。开启后，当系统定时检测全部渠道发现上游模型变更或检测异常时，将按你选择的通知方式发送汇总通知；渠道或模型过多时会自动省略部分明细。',
+                    )}
+                  />
+                )}
+
+                {/* 邮件通知设置 */}
+                {notificationSettings.warningType === 'email' && (
+                  <Form.Input
+                    field='notificationEmail'
+                    label={t('通知邮箱')}
+                    placeholder={t('留空则使用账号绑定的邮箱')}
+                    onChange={(val) =>
+                      handleFormChange('notificationEmail', val)
+                    }
+                    prefix={<IconMail />}
+                    extraText={t(
+                      '设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱',
+                    )}
+                    showClear
+                  />
+                )}
+
+                {/* Webhook通知设置 */}
+                {notificationSettings.warningType === 'webhook' && (
+                  <>
+                    <Form.Input
+                      field='webhookUrl'
+                      label={t('Webhook地址')}
+                      placeholder={t(
+                        '请输入Webhook地址，例如: https://example.com/webhook',
+                      )}
+                      onChange={(val) => handleFormChange('webhookUrl', val)}
+                      prefix={<IconLink />}
+                      extraText={t(
+                        '只支持HTTPS，系统将以POST方式发送通知，请确保地址可以接收POST请求',
+                      )}
+                      showClear
+                      rules={[
+                        {
+                          required:
+                            notificationSettings.warningType === 'webhook',
+                          message: t('请输入Webhook地址'),
+                        },
+                        {
+                          pattern: /^https:\/\/.+/,
+                          message: t('Webhook地址必须以https://开头'),
+                        },
+                      ]}
+                    />
+
+                    <Form.Input
+                      field='webhookSecret'
+                      label={t('接口凭证')}
+                      placeholder={t('请输入密钥')}
+                      onChange={(val) => handleFormChange('webhookSecret', val)}
+                      prefix={<IconKey />}
+                      extraText={t(
+                        '密钥将以Bearer方式添加到请求头中，用于验证webhook请求的合法性',
+                      )}
+                      showClear
+                    />
+
+                    <Form.Slot label={t('Webhook请求结构说明')}>
+                      <div>
+                        <div style={{ height: '200px', marginBottom: '12px' }}>
+                          <CodeViewer
+                            content={{
+                              type: 'quota_exceed',
+                              title: '额度预警通知',
+                              content:
+                                '您的额度即将用尽，当前剩余额度为 {{value}}',
+                              values: ['$0.99'],
+                              timestamp: 1739950503,
+                            }}
+                            title='webhook'
+                            language='json'
+                          />
+                        </div>
+                        <div className='text-xs text-gray-500 leading-relaxed'>
+                          <div>
+                            <strong>type:</strong>{' '}
+                            {t('通知类型 (quota_exceed: 额度预警)')}{' '}
+                          </div>
+                          <div>
+                            <strong>title:</strong> {t('通知标题')}
+                          </div>
+                          <div>
+                            <strong>content:</strong>{' '}
+                            {t('通知内容，支持 {{value}} 变量占位符')}
+                          </div>
+                          <div>
+                            <strong>values:</strong>{' '}
+                            {t('按顺序替换content中的变量占位符')}
+                          </div>
+                          <div>
+                            <strong>timestamp:</strong> {t('Unix时间戳')}
+                          </div>
+                        </div>
+                      </div>
+                    </Form.Slot>
+                  </>
+                )}
+
+                {/* Bark推送设置 */}
+                {notificationSettings.warningType === 'bark' && (
+                  <>
+                    <Form.Input
+                      field='barkUrl'
+                      label={t('Bark推送URL')}
+                      placeholder={t(
+                        '请输入Bark推送URL，例如: https://api.day.app/yourkey/{{title}}/{{content}}',
+                      )}
+                      onChange={(val) => handleFormChange('barkUrl', val)}
+                      prefix={<IconLink />}
+                      extraText={t(
+                        '支持HTTP和HTTPS，模板变量: {{title}} (通知标题), {{content}} (通知内容)',
+                      )}
+                      showClear
+                      rules={[
+                        {
+                          required: notificationSettings.warningType === 'bark',
+                          message: t('请输入Bark推送URL'),
+                        },
+                        {
+                          pattern: /^https?:\/\/.+/,
+                          message: t('Bark推送URL必须以http://或https://开头'),
+                        },
+                      ]}
+                    />
+
+                    <div className='mt-3 p-4 bg-gray-50/50 rounded-xl'>
+                      <div className='text-sm text-gray-700 mb-3'>
+                        <strong>{t('模板示例')}</strong>
+                      </div>
+                      <div className='text-xs text-gray-600 font-mono bg-white p-3 rounded-lg shadow-sm mb-4'>
+                        https://api.day.app/yourkey/{'{{title}}'}/
+                        {'{{content}}'}?sound=alarm&group=quota
+                      </div>
+                      <div className='text-xs text-gray-500 space-y-2'>
+                        <div>
+                          • <strong>{'title'}:</strong> {t('通知标题')}
+                        </div>
+                        <div>
+                          • <strong>{'content'}:</strong> {t('通知内容')}
+                        </div>
+                        <div className='mt-3 pt-3 border-t border-gray-200'>
+                          <span className='text-gray-400'>
+                            {t('更多参数请参考')}
+                          </span>{' '}
+                          <a
+                            href='https://github.com/Finb/Bark'
+                            target='_blank'
+                            rel='noopener noreferrer'
+                            className='text-blue-500 hover:text-blue-600 font-medium'
+                          >
+                            Bark {t('官方文档')}
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+
+                {/* Gotify推送设置 */}
+                {notificationSettings.warningType === 'gotify' && (
+                  <>
+                    <Form.Input
+                      field='gotifyUrl'
+                      label={t('Gotify服务器地址')}
+                      placeholder={t(
+                        '请输入Gotify服务器地址，例如: https://gotify.example.com',
+                      )}
+                      onChange={(val) => handleFormChange('gotifyUrl', val)}
+                      prefix={<IconLink />}
+                      extraText={t(
+                        '支持HTTP和HTTPS，填写Gotify服务器的完整URL地址',
+                      )}
+                      showClear
+                      rules={[
+                        {
+                          required:
+                            notificationSettings.warningType === 'gotify',
+                          message: t('请输入Gotify服务器地址'),
+                        },
+                        {
+                          pattern: /^https?:\/\/.+/,
+                          message: t(
+                            'Gotify服务器地址必须以http://或https://开头',
+                          ),
+                        },
+                      ]}
+                    />
+
+                    <Form.Input
+                      field='gotifyToken'
+                      label={t('Gotify应用令牌')}
+                      placeholder={t('请输入Gotify应用令牌')}
+                      onChange={(val) => handleFormChange('gotifyToken', val)}
+                      prefix={<IconKey />}
+                      extraText={t(
+                        '在Gotify服务器创建应用后获得的令牌，用于发送通知',
+                      )}
+                      showClear
+                      rules={[
+                        {
+                          required:
+                            notificationSettings.warningType === 'gotify',
+                          message: t('请输入Gotify应用令牌'),
+                        },
+                      ]}
+                    />
+
+                    <Form.AutoComplete
+                      field='gotifyPriority'
+                      label={t('消息优先级')}
+                      placeholder={t('请选择消息优先级')}
+                      data={[
+                        { value: 0, label: t('0 - 最低') },
+                        { value: 2, label: t('2 - 低') },
+                        { value: 5, label: t('5 - 正常（默认）') },
+                        { value: 8, label: t('8 - 高') },
+                        { value: 10, label: t('10 - 最高') },
+                      ]}
+                      onChange={(val) =>
+                        handleFormChange('gotifyPriority', val)
+                      }
+                      prefix={<IconBell />}
+                      extraText={t('消息优先级，范围0-10，默认为5')}
+                      style={{ width: '100%', maxWidth: '300px' }}
+                    />
+
+                    <div className='mt-3 p-4 bg-gray-50/50 rounded-xl'>
+                      <div className='text-sm text-gray-700 mb-3'>
+                        <strong>{t('配置说明')}</strong>
+                      </div>
+                      <div className='text-xs text-gray-500 space-y-2'>
+                        <div>
+                          1. {t('在Gotify服务器的应用管理中创建新应用')}
+                        </div>
+                        <div>
+                          2.{' '}
+                          {t(
+                            '复制应用的令牌（Token）并填写到上方的应用令牌字段',
+                          )}
+                        </div>
+                        <div>3. {t('填写Gotify服务器的完整URL地址')}</div>
+                        <div className='mt-3 pt-3 border-t border-gray-200'>
+                          <span className='text-gray-400'>
+                            {t('更多信息请参考')}
+                          </span>{' '}
+                          <a
+                            href='https://gotify.net/'
+                            target='_blank'
+                            rel='noopener noreferrer'
+                            className='text-blue-500 hover:text-blue-600 font-medium'
+                          >
+                            Gotify {t('官方文档')}
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </TabPane>
+
+            {/* 价格设置 Tab */}
+            <TabPane
+              tab={
+                <div className='flex items-center'>
+                  <DollarSign size={16} className='mr-2' />
+                  {t('价格设置')}
+                </div>
+              }
+              itemKey='pricing'
+            >
+              <div className='py-4'>
+                <Form.Switch
+                  field='acceptUnsetModelRatioModel'
+                  label={t('接受未设置价格模型')}
+                  checkedText={t('开')}
+                  uncheckedText={t('关')}
+                  onChange={(value) =>
+                    handleFormChange('acceptUnsetModelRatioModel', value)
+                  }
+                  extraText={t(
+                    '当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用',
+                  )}
+                />
+              </div>
+            </TabPane>
+
+            {/* 隐私设置 Tab */}
+            <TabPane
+              tab={
+                <div className='flex items-center'>
+                  <ShieldCheck size={16} className='mr-2' />
+                  {t('隐私设置')}
+                </div>
+              }
+              itemKey='privacy'
+            >
+              <div className='py-4'>
+                <Form.Switch
+                  field='recordIpLog'
+                  label={t('记录请求与错误日志IP')}
+                  checkedText={t('开')}
+                  uncheckedText={t('关')}
+                  onChange={(value) => handleFormChange('recordIpLog', value)}
+                  extraText={t(
+                    '开启后，仅"消费"和"错误"日志将记录您的客户端IP地址',
+                  )}
+                />
+              </div>
+            </TabPane>
+
+            {/* 左侧边栏设置 Tab - 根据后端权限控制显示 */}
+            {hasSidebarSettingsPermission() && (
+              <TabPane
+                tab={
+                  <div className='flex items-center'>
+                    <Settings size={16} className='mr-2' />
+                    {t('边栏设置')}
+                  </div>
+                }
+                itemKey='sidebar'
+              >
+                <div className='py-4'>
+                  <div className='mb-4'>
+                    <Typography.Text
+                      type='secondary'
+                      size='small'
+                      style={{
+                        fontSize: '12px',
+                        lineHeight: '1.5',
+                        color: 'var(--semi-color-text-2)',
+                      }}
+                    >
+                      {t('您可以个性化设置侧边栏的要显示功能')}
+                    </Typography.Text>
+                  </div>
+                  {/* 边栏设置功能区域容器 */}
+                  <div
+                    className='border rounded-xl p-4'
+                    style={{
+                      borderColor: 'var(--semi-color-border)',
+                      backgroundColor: 'var(--semi-color-bg-1)',
+                    }}
+                  >
+                    {sectionConfigs.map((section) => (
+                      <div key={section.key} className='mb-6'>
+                        {/* 区域标题和总开关 */}
+                        <div
+                          className='flex justify-between items-center mb-4 p-4 rounded-lg'
+                          style={{
+                            backgroundColor: 'var(--semi-color-fill-0)',
+                            border: '1px solid var(--semi-color-border-light)',
+                            borderColor: 'var(--semi-color-fill-1)',
+                          }}
+                        >
+                          <div>
+                            <div className='font-semibold text-base text-gray-900 mb-1'>
+                              {section.title}
+                            </div>
+                            <Typography.Text
+                              type='secondary'
+                              size='small'
+                              style={{
+                                fontSize: '12px',
+                                lineHeight: '1.5',
+                                color: 'var(--semi-color-text-2)',
+                              }}
+                            >
+                              {section.description}
+                            </Typography.Text>
+                          </div>
+                          <Switch
+                            checked={
+                              sidebarModulesUser[section.key]?.enabled !== false
+                            }
+                            onChange={handleSectionChange(section.key)}
+                            size='default'
+                          />
+                        </div>
+
+                        {/* 功能模块网格 */}
+                        <Row gutter={[12, 12]}>
+                          {section.modules
+                            .filter((module) =>
+                              isAllowedByAdmin(section.key, module.key),
+                            )
+                            .map((module) => (
+                              <Col
+                                key={module.key}
+                                xs={24}
+                                sm={24}
+                                md={12}
+                                lg={8}
+                                xl={8}
+                              >
+                                <Card
+                                  className={`!rounded-xl border border-gray-200 hover:border-blue-300 transition-all duration-200 ${
+                                    sidebarModulesUser[section.key]?.enabled !==
+                                    false
+                                      ? ''
+                                      : 'opacity-50'
+                                  }`}
+                                  bodyStyle={{ padding: '16px' }}
+                                  hoverable
+                                >
+                                  <div className='flex justify-between items-center h-full'>
+                                    <div className='flex-1 text-left'>
+                                      <div className='font-semibold text-sm text-gray-900 mb-1'>
+                                        {module.title}
+                                      </div>
+                                      <Typography.Text
+                                        type='secondary'
+                                        size='small'
+                                        className='block'
+                                        style={{
+                                          fontSize: '12px',
+                                          lineHeight: '1.5',
+                                          color: 'var(--semi-color-text-2)',
+                                          marginTop: '4px',
+                                        }}
+                                      >
+                                        {module.description}
+                                      </Typography.Text>
+                                    </div>
+                                    <div className='ml-4'>
+                                      <Switch
+                                        checked={
+                                          sidebarModulesUser[section.key]?.[
+                                            module.key
+                                          ] !== false
+                                        }
+                                        onChange={handleModuleChange(
+                                          section.key,
+                                          module.key,
+                                        )}
+                                        size='default'
+                                        disabled={
+                                          sidebarModulesUser[section.key]
+                                            ?.enabled === false
+                                        }
+                                      />
+                                    </div>
+                                  </div>
+                                </Card>
+                              </Col>
+                            ))}
+                        </Row>
+                      </div>
+                    ))}
+                  </div>{' '}
+                  {/* 关闭边栏设置功能区域容器 */}
+                </div>
+              </TabPane>
+            )}
+          </Tabs>
+        )}
+      </Form>
+    </Card>
+  );
+};
+
+export default NotificationSettings;

web/classic/src/components/settings/personal/cards/PreferencesSettings.jsx

@@ -0,0 +1,182 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useEffect, useContext } from "react";
+import { Card, Select, Typography, Avatar } from "@douyinfe/semi-ui";
+import { Languages } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { API, showSuccess, showError } from "../../../../helpers";
+import { UserContext } from "../../../../context/User";
+import { normalizeLanguage } from "../../../../i18n/language";
+
+// Language options with native names
+const languageOptions = [
+	{ value: "zh-CN", label: "简体中文" },
+	{ value: "zh-TW", label: "繁體中文" },
+	{ value: "en", label: "English" },
+	{ value: 'fr', label: 'Français'},
+	{ value: 'ru', label: 'Русский'},
+	{ value: 'ja', label: '日本語'},
+	{ value: "vi", label: "Tiếng Việt" },
+];
+
+const PreferencesSettings = ({ t }) => {
+	const { i18n } = useTranslation();
+	const [userState, userDispatch] = useContext(UserContext);
+	const [currentLanguage, setCurrentLanguage] = useState(
+		normalizeLanguage(i18n.language) || "zh-CN",
+	);
+	const [loading, setLoading] = useState(false);
+
+	// Load saved language preference from user settings
+	useEffect(() => {
+		if (userState?.user?.setting) {
+			try {
+				const settings = JSON.parse(userState.user.setting);
+				if (settings.language) {
+					const lang = normalizeLanguage(settings.language);
+					setCurrentLanguage(lang);
+					// Sync i18n with saved preference
+					if (i18n.language !== lang) {
+						i18n.changeLanguage(lang);
+					}
+				}
+			} catch (e) {
+				// Ignore parse errors
+			}
+		}
+	}, [userState?.user?.setting, i18n]);
+
+	const handleLanguagePreferenceChange = async (lang) => {
+		if (lang === currentLanguage) return;
+
+		setLoading(true);
+		const previousLang = currentLanguage;
+
+		try {
+			// Update language immediately for responsive UX
+			setCurrentLanguage(lang);
+			i18n.changeLanguage(lang);
+			localStorage.setItem('i18nextLng', lang);
+
+			// Save to backend
+			const res = await API.put("/api/user/self", {
+				language: lang,
+			});
+
+			if (res.data.success) {
+				showSuccess(t("语言偏好已保存"));
+				// Keep backend preference, context state, and local cache aligned.
+				let settings = {};
+				if (userState?.user?.setting) {
+					try {
+						settings = JSON.parse(userState.user.setting) || {};
+					} catch (e) {
+						settings = {};
+					}
+				}
+				settings.language = lang;
+				const nextUser = {
+					...userState.user,
+					setting: JSON.stringify(settings),
+				};
+				userDispatch({
+					type: "login",
+					payload: nextUser,
+				});
+				localStorage.setItem("user", JSON.stringify(nextUser));
+			} else {
+				showError(res.data.message || t("保存失败"));
+				// Revert on error
+				setCurrentLanguage(previousLang);
+				i18n.changeLanguage(previousLang);
+				localStorage.setItem("i18nextLng", previousLang);
+			}
+		} catch (error) {
+			showError(t("保存失败，请重试"));
+			// Revert on error
+			setCurrentLanguage(previousLang);
+			i18n.changeLanguage(previousLang);
+			localStorage.setItem("i18nextLng", previousLang);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<Card className="!rounded-2xl shadow-sm border-0">
+			{/* Card Header */}
+			<div className="flex items-center mb-4">
+				<Avatar size="small" color="violet" className="mr-3 shadow-md">
+					<Languages size={16} />
+				</Avatar>
+				<div>
+					<Typography.Text className="text-lg font-medium">
+						{t("偏好设置")}
+					</Typography.Text>
+					<div className="text-xs text-gray-600 dark:text-gray-400">
+						{t("界面语言和其他个人偏好")}
+					</div>
+				</div>
+			</div>
+			{/* Language Setting Card */}
+			<Card className="!rounded-xl border dark:border-gray-700">
+				<div className="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between gap-4">
+					<div className="flex items-start w-full sm:w-auto">
+						<div className="w-12 h-12 rounded-full bg-violet-50 dark:bg-violet-900/30 flex items-center justify-center mr-4 flex-shrink-0">
+							<Languages
+								size={20}
+								className="text-violet-600 dark:text-violet-400"
+							/>
+						</div>
+						<div>
+							<Typography.Title heading={6} className="mb-1">
+								{t("语言偏好")}
+							</Typography.Title>
+							<Typography.Text type="tertiary" className="text-sm">
+								{t("选择您的首选界面语言，设置将自动保存并同步到所有设备")}
+							</Typography.Text>
+						</div>
+					</div>
+					<Select
+						value={currentLanguage}
+						onChange={handleLanguagePreferenceChange}
+						style={{ width: 180 }}
+						loading={loading}
+						optionList={languageOptions.map((opt) => ({
+							value: opt.value,
+							label: opt.label,
+						}))}
+					/>
+				</div>
+			</Card>
+
+			{/* Additional info */}
+			<div className="mt-4 text-xs text-gray-500 dark:text-gray-400">
+				<Typography.Text type="tertiary">
+					{t(
+						"提示：语言偏好会同步到您登录的所有设备，并影响API返回的错误消息语言。",
+					)}
+				</Typography.Text>
+			</div>
+		</Card>
+	);
+};
+
+export default PreferencesSettings;

web/classic/src/components/settings/personal/components/TwoFASetting.jsx

@@ -0,0 +1,723 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { API, showError, showSuccess, showWarning } from '../../../../helpers';
+import {
+  Banner,
+  Button,
+  Card,
+  Checkbox,
+  Divider,
+  Input,
+  Modal,
+  Tag,
+  Typography,
+  Steps,
+  Space,
+  Badge,
+} from '@douyinfe/semi-ui';
+import {
+  IconShield,
+  IconAlertTriangle,
+  IconRefresh,
+  IconCopy,
+} from '@douyinfe/semi-icons';
+import React, { useEffect, useState } from 'react';
+
+import { QRCodeSVG } from 'qrcode.react';
+
+const { Text, Paragraph } = Typography;
+
+const TwoFASetting = ({ t }) => {
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState({
+    enabled: false,
+    locked: false,
+    backup_codes_remaining: 0,
+  });
+
+  // 模态框状态
+  const [setupModalVisible, setSetupModalVisible] = useState(false);
+  const [enableModalVisible, setEnableModalVisible] = useState(false);
+  const [disableModalVisible, setDisableModalVisible] = useState(false);
+  const [backupModalVisible, setBackupModalVisible] = useState(false);
+
+  // 表单数据
+  const [setupData, setSetupData] = useState(null);
+  const [verificationCode, setVerificationCode] = useState('');
+  const [backupCodes, setBackupCodes] = useState([]);
+  const [confirmDisable, setConfirmDisable] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // 获取2FA状态
+  const fetchStatus = async () => {
+    try {
+      const res = await API.get('/api/user/2fa/status');
+      if (res.data.success) {
+        setStatus(res.data.data);
+      }
+    } catch (error) {
+      showError(t('获取2FA状态失败'));
+    }
+  };
+
+  useEffect(() => {
+    fetchStatus();
+  }, []);
+
+  // 初始化2FA设置
+  const handleSetup2FA = async () => {
+    setLoading(true);
+    try {
+      const res = await API.post('/api/user/2fa/setup');
+      if (res.data.success) {
+        setSetupData(res.data.data);
+        setSetupModalVisible(true);
+        setCurrentStep(0);
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('设置2FA失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 启用2FA
+  const handleEnable2FA = async () => {
+    if (!verificationCode) {
+      showWarning(t('请输入验证码'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await API.post('/api/user/2fa/enable', {
+        code: verificationCode,
+      });
+      if (res.data.success) {
+        showSuccess(t('两步验证启用成功！'));
+        setEnableModalVisible(false);
+        setSetupModalVisible(false);
+        setVerificationCode('');
+        setCurrentStep(0);
+        fetchStatus();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('启用2FA失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 禁用2FA
+  const handleDisable2FA = async () => {
+    if (!verificationCode) {
+      showWarning(t('请输入验证码或备用码'));
+      return;
+    }
+
+    if (!confirmDisable) {
+      showWarning(t('请确认您已了解禁用两步验证的后果'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await API.post('/api/user/2fa/disable', {
+        code: verificationCode,
+      });
+      if (res.data.success) {
+        showSuccess(t('两步验证已禁用'));
+        setDisableModalVisible(false);
+        setVerificationCode('');
+        setConfirmDisable(false);
+        fetchStatus();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('禁用2FA失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 重新生成备用码
+  const handleRegenerateBackupCodes = async () => {
+    if (!verificationCode) {
+      showWarning(t('请输入验证码'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await API.post('/api/user/2fa/backup_codes', {
+        code: verificationCode,
+      });
+      if (res.data.success) {
+        setBackupCodes(res.data.data.backup_codes);
+        showSuccess(t('备用码重新生成成功'));
+        setVerificationCode('');
+        fetchStatus();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('重新生成备用码失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 通用复制函数
+  const copyTextToClipboard = (text, successMessage = t('已复制到剪贴板')) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        showSuccess(successMessage);
+      })
+      .catch(() => {
+        showError(t('复制失败，请手动复制'));
+      });
+  };
+
+  const copyBackupCodes = () => {
+    const codesText = backupCodes.join('\n');
+    copyTextToClipboard(codesText, t('备用码已复制到剪贴板'));
+  };
+
+  // 备用码展示组件
+  const BackupCodesDisplay = ({ codes, title, onCopy }) => {
+    return (
+      <Card className='!rounded-xl' style={{ width: '100%' }}>
+        <div className='space-y-3'>
+          <div className='flex items-center justify-between'>
+            <Text strong className='text-slate-700 dark:text-slate-200'>
+              {title}
+            </Text>
+          </div>
+
+          <div className='grid grid-cols-1 sm:grid-cols-2 gap-2'>
+            {codes.map((code, index) => (
+              <div key={index} className='rounded-lg p-3'>
+                <div className='flex items-center justify-between'>
+                  <Text
+                    code
+                    className='text-sm font-mono text-slate-700 dark:text-slate-200'
+                  >
+                    {code}
+                  </Text>
+                  <Text type='quaternary' className='text-xs'>
+                    #{(index + 1).toString().padStart(2, '0')}
+                  </Text>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <Divider margin={12} />
+          <Button
+            type='primary'
+            theme='solid'
+            icon={<IconCopy />}
+            onClick={onCopy}
+            className='!rounded-lg !bg-slate-600 hover:!bg-slate-700 w-full'
+          >
+            {t('复制所有代码')}
+          </Button>
+        </div>
+      </Card>
+    );
+  };
+
+  // 渲染设置模态框footer
+  const renderSetupModalFooter = () => {
+    return (
+      <>
+        {currentStep > 0 && (
+          <Button
+            onClick={() => setCurrentStep(currentStep - 1)}
+            className='!rounded-lg'
+          >
+            {t('上一步')}
+          </Button>
+        )}
+        {currentStep < 2 ? (
+          <Button
+            type='primary'
+            theme='solid'
+            onClick={() => setCurrentStep(currentStep + 1)}
+            className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
+          >
+            {t('下一步')}
+          </Button>
+        ) : (
+          <Button
+            type='primary'
+            theme='solid'
+            loading={loading}
+            onClick={() => {
+              if (!verificationCode) {
+                showWarning(t('请输入验证码'));
+                return;
+              }
+              handleEnable2FA();
+            }}
+            className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
+          >
+            {t('完成设置并启用两步验证')}
+          </Button>
+        )}
+      </>
+    );
+  };
+
+  // 渲染禁用模态框footer
+  const renderDisableModalFooter = () => {
+    return (
+      <>
+        <Button
+          onClick={() => {
+            setDisableModalVisible(false);
+            setVerificationCode('');
+            setConfirmDisable(false);
+          }}
+          className='!rounded-lg'
+        >
+          {t('取消')}
+        </Button>
+        <Button
+          type='danger'
+          theme='solid'
+          loading={loading}
+          disabled={!confirmDisable || !verificationCode}
+          onClick={handleDisable2FA}
+          className='!rounded-lg !bg-slate-500 hover:!bg-slate-600'
+        >
+          {t('确认禁用')}
+        </Button>
+      </>
+    );
+  };
+
+  // 渲染重新生成模态框footer
+  const renderRegenerateModalFooter = () => {
+    if (backupCodes.length > 0) {
+      return (
+        <Button
+          type='primary'
+          theme='solid'
+          onClick={() => {
+            setBackupModalVisible(false);
+            setVerificationCode('');
+            setBackupCodes([]);
+          }}
+          className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
+        >
+          {t('完成')}
+        </Button>
+      );
+    }
+
+    return (
+      <>
+        <Button
+          onClick={() => {
+            setBackupModalVisible(false);
+            setVerificationCode('');
+            setBackupCodes([]);
+          }}
+          className='!rounded-lg'
+        >
+          {t('取消')}
+        </Button>
+        <Button
+          type='primary'
+          theme='solid'
+          loading={loading}
+          disabled={!verificationCode}
+          onClick={handleRegenerateBackupCodes}
+          className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
+        >
+          {t('生成新的备用码')}
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Card className='!rounded-xl w-full'>
+        <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
+          <div className='flex items-start w-full sm:w-auto'>
+            <div className='w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-4 flex-shrink-0'>
+              <IconShield
+                size='large'
+                className='text-slate-600 dark:text-slate-300'
+              />
+            </div>
+            <div className='flex-1'>
+              <div className='flex items-center gap-2 mb-1'>
+                <Typography.Title heading={6} className='mb-0'>
+                  {t('两步验证设置')}
+                </Typography.Title>
+                {status.enabled ? (
+                  <Tag color='green' shape='circle' size='small'>
+                    {t('已启用')}
+                  </Tag>
+                ) : (
+                  <Tag color='red' shape='circle' size='small'>
+                    {t('未启用')}
+                  </Tag>
+                )}
+                {status.locked && (
+                  <Tag color='orange' shape='circle' size='small'>
+                    {t('账户已锁定')}
+                  </Tag>
+                )}
+              </div>
+              <Typography.Text type='tertiary' className='text-sm'>
+                {t(
+                  '两步验证（2FA）为您的账户提供额外的安全保护。启用后，登录时需要输入密码和验证器应用生成的验证码。',
+                )}
+              </Typography.Text>
+              {status.enabled && (
+                <div className='mt-2'>
+                  <Text size='small' type='secondary'>
+                    {t('剩余备用码：')}
+                    {status.backup_codes_remaining || 0}
+                    {t('个')}
+                  </Text>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className='flex flex-col space-y-2 w-full sm:w-auto'>
+            {!status.enabled ? (
+              <Button
+                type='primary'
+                theme='solid'
+                size='default'
+                onClick={handleSetup2FA}
+                loading={loading}
+                className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
+                icon={<IconShield />}
+              >
+                {t('启用验证')}
+              </Button>
+            ) : (
+              <div className='flex flex-col space-y-2'>
+                <Button
+                  type='danger'
+                  theme='solid'
+                  size='default'
+                  onClick={() => setDisableModalVisible(true)}
+                  className='!rounded-lg !bg-slate-500 hover:!bg-slate-600'
+                  icon={<IconAlertTriangle />}
+                >
+                  {t('禁用两步验证')}
+                </Button>
+                <Button
+                  type='primary'
+                  theme='solid'
+                  size='default'
+                  onClick={() => setBackupModalVisible(true)}
+                  className='!rounded-lg'
+                  icon={<IconRefresh />}
+                >
+                  {t('重新生成备用码')}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+
+      {/* 2FA设置模态框 */}
+      <Modal
+        title={
+          <div className='flex items-center'>
+            <IconShield className='mr-2 text-slate-600' />
+            {t('设置两步验证')}
+          </div>
+        }
+        visible={setupModalVisible}
+        onCancel={() => {
+          setSetupModalVisible(false);
+          setSetupData(null);
+          setCurrentStep(0);
+          setVerificationCode('');
+        }}
+        footer={renderSetupModalFooter()}
+        width={650}
+        style={{ maxWidth: '90vw' }}
+      >
+        {setupData && (
+          <div className='space-y-6'>
+            {/* 步骤进度 */}
+            <Steps type='basic' size='small' current={currentStep}>
+              <Steps.Step
+                title={t('扫描二维码')}
+                description={t('使用认证器应用扫描二维码')}
+              />
+              <Steps.Step
+                title={t('保存备用码')}
+                description={t('保存备用码以备不时之需')}
+              />
+              <Steps.Step
+                title={t('验证设置')}
+                description={t('输入验证码完成设置')}
+              />
+            </Steps>
+
+            {/* 步骤内容 */}
+            <div className='rounded-xl'>
+              {currentStep === 0 && (
+                <div>
+                  <Paragraph className='text-gray-600 dark:text-gray-300 mb-4'>
+                    {t(
+                      '使用认证器应用（如 Google Authenticator、Microsoft Authenticator）扫描下方二维码：',
+                    )}
+                  </Paragraph>
+                  <div className='flex justify-center mb-4'>
+                    <div className='bg-white p-4 rounded-lg shadow-sm'>
+                      <QRCodeSVG value={setupData.qr_code_data} size={180} />
+                    </div>
+                  </div>
+                  <div className='bg-blue-50 dark:bg-blue-900 rounded-lg p-3'>
+                    <Text className='text-blue-800 dark:text-blue-200 text-sm'>
+                      {t('或手动输入密钥：')}
+                      <Text code copyable className='ml-2'>
+                        {setupData.secret}
+                      </Text>
+                    </Text>
+                  </div>
+                </div>
+              )}
+
+              {currentStep === 1 && (
+                <div className='space-y-4'>
+                  {/* 备用码展示 */}
+                  <BackupCodesDisplay
+                    codes={setupData.backup_codes}
+                    title={t('备用恢复代码')}
+                    onCopy={() => {
+                      const codesText = setupData.backup_codes.join('\n');
+                      copyTextToClipboard(codesText, t('备用码已复制到剪贴板'));
+                    }}
+                  />
+                </div>
+              )}
+
+              {currentStep === 2 && (
+                <Input
+                  placeholder={t('输入认证器应用显示的6位数字验证码')}
+                  value={verificationCode}
+                  onChange={setVerificationCode}
+                  size='large'
+                  maxLength={6}
+                  className='!rounded-lg'
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* 禁用2FA模态框 */}
+      <Modal
+        title={
+          <div className='flex items-center'>
+            <IconAlertTriangle className='mr-2 text-red-500' />
+            {t('禁用两步验证')}
+          </div>
+        }
+        visible={disableModalVisible}
+        onCancel={() => {
+          setDisableModalVisible(false);
+          setVerificationCode('');
+          setConfirmDisable(false);
+        }}
+        footer={renderDisableModalFooter()}
+        width={550}
+        style={{ maxWidth: '90vw' }}
+      >
+        <div className='space-y-6'>
+          {/* 警告提示 */}
+          <div className='rounded-xl'>
+            <Banner
+              type='warning'
+              description={t(
+                '警告：禁用两步验证将永久删除您的验证设置和所有备用码，此操作不可撤销！',
+              )}
+              className='!rounded-lg'
+            />
+          </div>
+
+          {/* 内容区域 */}
+          <div className='space-y-4'>
+            <div>
+              <Text
+                strong
+                className='block mb-2 text-slate-700 dark:text-slate-200'
+              >
+                {t('禁用后的影响：')}
+              </Text>
+              <ul className='space-y-2 text-sm text-slate-600 dark:text-slate-300'>
+                <li className='flex items-start gap-2'>
+                  <Badge dot type='warning' />
+                  {t('降低您账户的安全性')}
+                </li>
+                <li className='flex items-start gap-2'>
+                  <Badge dot type='warning' />
+                  {t('需要重新完整设置才能再次启用')}
+                </li>
+                <li className='flex items-start gap-2'>
+                  <Badge dot type='danger' />
+                  {t('永久删除您的两步验证设置')}
+                </li>
+                <li className='flex items-start gap-2'>
+                  <Badge dot type='danger' />
+                  {t('永久删除所有备用码（包括未使用的）')}
+                </li>
+              </ul>
+            </div>
+
+            <Divider margin={16} />
+
+            <div className='space-y-4'>
+              <div>
+                <Text
+                  strong
+                  className='block mb-2 text-slate-700 dark:text-slate-200'
+                >
+                  {t('验证身份')}
+                </Text>
+                <Input
+                  placeholder={t('请输入认证器验证码或备用码')}
+                  value={verificationCode}
+                  onChange={setVerificationCode}
+                  size='large'
+                  className='!rounded-lg'
+                />
+              </div>
+
+              <div>
+                <Checkbox
+                  checked={confirmDisable}
+                  onChange={(e) => setConfirmDisable(e.target.checked)}
+                  className='text-sm'
+                >
+                  {t(
+                    '我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销',
+                  )}
+                </Checkbox>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Modal>
+
+      {/* 重新生成备用码模态框 */}
+      <Modal
+        title={
+          <div className='flex items-center'>
+            <IconRefresh className='mr-2 text-slate-600' />
+            {t('重新生成备用码')}
+          </div>
+        }
+        visible={backupModalVisible}
+        onCancel={() => {
+          setBackupModalVisible(false);
+          setVerificationCode('');
+          setBackupCodes([]);
+        }}
+        footer={renderRegenerateModalFooter()}
+        width={500}
+        style={{ maxWidth: '90vw' }}
+      >
+        <div className='space-y-6'>
+          {backupCodes.length === 0 ? (
+            <>
+              {/* 警告提示 */}
+              <div className='rounded-xl'>
+                <Banner
+                  type='warning'
+                  description={t(
+                    '重新生成备用码将使现有的备用码失效，请确保您已保存了当前的备用码。',
+                  )}
+                  className='!rounded-lg'
+                />
+              </div>
+
+              {/* 验证区域 */}
+              <div className='space-y-4'>
+                <div>
+                  <Text
+                    strong
+                    className='block mb-2 text-slate-700 dark:text-slate-200'
+                  >
+                    {t('验证身份')}
+                  </Text>
+                  <Input
+                    placeholder={t('请输入认证器验证码')}
+                    value={verificationCode}
+                    onChange={setVerificationCode}
+                    size='large'
+                    className='!rounded-lg'
+                  />
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* 成功提示 */}
+              <Space vertical style={{ width: '100%' }}>
+                <div className='flex items-center justify-center gap-2'>
+                  <Badge dot type='success' />
+                  <Text
+                    strong
+                    className='text-lg text-slate-700 dark:text-slate-200'
+                  >
+                    {t('新的备用码已生成')}
+                  </Text>
+                </div>
+                <Text className='text-slate-500 dark:text-slate-400 text-sm'>
+                  {t('旧的备用码已失效，请保存新的备用码')}
+                </Text>
+
+                {/* 备用码展示 */}
+                <BackupCodesDisplay
+                  codes={backupCodes}
+                  title={t('新的备用恢复代码')}
+                  onCopy={copyBackupCodes}
+                />
+              </Space>
+            </>
+          )}
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default TwoFASetting;

web/classic/src/components/settings/personal/components/UserInfoHeader.jsx

@@ -0,0 +1,220 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Avatar,
+  Card,
+  Tag,
+  Divider,
+  Typography,
+  Badge,
+} from '@douyinfe/semi-ui';
+import {
+  isRoot,
+  isAdmin,
+  renderQuota,
+  stringToColor,
+} from '../../../../helpers';
+import { Coins, BarChart2, Users } from 'lucide-react';
+
+const UserInfoHeader = ({ t, userState }) => {
+  const getUsername = () => {
+    if (userState.user) {
+      return userState.user.username;
+    } else {
+      return 'null';
+    }
+  };
+
+  const getAvatarText = () => {
+    const username = getUsername();
+    if (username && username.length > 0) {
+      return username.slice(0, 2).toUpperCase();
+    }
+    return 'NA';
+  };
+
+  return (
+    <Card
+      className='!rounded-2xl overflow-hidden'
+      cover={
+        <div
+          className='relative h-32'
+          style={{
+            '--palette-primary-darkerChannel': '0 75 80',
+            backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+          }}
+        >
+          {/* 用户信息内容 */}
+          <div className='relative z-10 h-full flex flex-col justify-end p-6'>
+            <div className='flex items-center'>
+              <div className='flex items-stretch gap-3 sm:gap-4 flex-1 min-w-0'>
+                <Avatar size='large' color={stringToColor(getUsername())}>
+                  {getAvatarText()}
+                </Avatar>
+                <div className='flex-1 min-w-0 flex flex-col justify-between'>
+                  <div
+                    className='text-3xl font-bold truncate'
+                    style={{ color: 'white' }}
+                  >
+                    {getUsername()}
+                  </div>
+                  <div className='flex flex-wrap items-center gap-2'>
+                    {isRoot() ? (
+                      <Tag
+                        size='large'
+                        shape='circle'
+                        style={{ color: 'white' }}
+                      >
+                        {t('超级管理员')}
+                      </Tag>
+                    ) : isAdmin() ? (
+                      <Tag
+                        size='large'
+                        shape='circle'
+                        style={{ color: 'white' }}
+                      >
+                        {t('管理员')}
+                      </Tag>
+                    ) : (
+                      <Tag
+                        size='large'
+                        shape='circle'
+                        style={{ color: 'white' }}
+                      >
+                        {t('普通用户')}
+                      </Tag>
+                    )}
+                    <Tag size='large' shape='circle' style={{ color: 'white' }}>
+                      ID: {userState?.user?.id}
+                    </Tag>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      {/* 当前余额和桌面版统计信息 */}
+      <div className='flex items-start justify-between gap-6'>
+        {/* 当前余额显示 */}
+        <Badge count={t('当前余额')} position='rightTop' type='danger'>
+          <div className='text-2xl sm:text-3xl md:text-4xl font-bold tracking-wide'>
+            {renderQuota(userState?.user?.quota)}
+          </div>
+        </Badge>
+
+        {/* 桌面版统计信息（Semi UI 卡片） */}
+        <div className='hidden lg:block flex-shrink-0'>
+          <Card
+            size='small'
+            className='!rounded-xl'
+            bodyStyle={{ padding: '12px 16px' }}
+          >
+            <div className='flex items-center gap-4'>
+              <div className='flex items-center gap-2'>
+                <Coins size={16} />
+                <Typography.Text size='small' type='tertiary'>
+                  {t('历史消耗')}
+                </Typography.Text>
+                <Typography.Text size='small' type='tertiary' strong>
+                  {renderQuota(userState?.user?.used_quota)}
+                </Typography.Text>
+              </div>
+              <Divider layout='vertical' />
+              <div className='flex items-center gap-2'>
+                <BarChart2 size={16} />
+                <Typography.Text size='small' type='tertiary'>
+                  {t('请求次数')}
+                </Typography.Text>
+                <Typography.Text size='small' type='tertiary' strong>
+                  {userState.user?.request_count || 0}
+                </Typography.Text>
+              </div>
+              <Divider layout='vertical' />
+              <div className='flex items-center gap-2'>
+                <Users size={16} />
+                <Typography.Text size='small' type='tertiary'>
+                  {t('用户分组')}
+                </Typography.Text>
+                <Typography.Text size='small' type='tertiary' strong>
+                  {userState?.user?.group || t('默认')}
+                </Typography.Text>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+
+      {/* 移动端和中等屏幕统计信息卡片 */}
+      <div className='lg:hidden mt-2'>
+        <Card
+          size='small'
+          className='!rounded-xl'
+          bodyStyle={{ padding: '12px 16px' }}
+        >
+          <div className='space-y-3'>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <Coins size={16} />
+                <Typography.Text size='small' type='tertiary'>
+                  {t('历史消耗')}
+                </Typography.Text>
+              </div>
+              <Typography.Text size='small' type='tertiary' strong>
+                {renderQuota(userState?.user?.used_quota)}
+              </Typography.Text>
+            </div>
+            <Divider margin='8px' />
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <BarChart2 size={16} />
+                <Typography.Text size='small' type='tertiary'>
+                  {t('请求次数')}
+                </Typography.Text>
+              </div>
+              <Typography.Text size='small' type='tertiary' strong>
+                {userState.user?.request_count || 0}
+              </Typography.Text>
+            </div>
+            <Divider margin='8px' />
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <Users size={16} />
+                <Typography.Text size='small' type='tertiary'>
+                  {t('用户分组')}
+                </Typography.Text>
+              </div>
+              <Typography.Text size='small' type='tertiary' strong>
+                {userState?.user?.group || t('默认')}
+              </Typography.Text>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </Card>
+  );
+};
+
+export default UserInfoHeader;

web/classic/src/components/settings/personal/modals/AccountDeleteModal.jsx

@@ -0,0 +1,94 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Banner, Input, Modal, Typography } from '@douyinfe/semi-ui';
+import { IconDelete, IconUser } from '@douyinfe/semi-icons';
+import Turnstile from 'react-turnstile';
+
+const AccountDeleteModal = ({
+  t,
+  showAccountDeleteModal,
+  setShowAccountDeleteModal,
+  inputs,
+  handleInputChange,
+  deleteAccount,
+  userState,
+  turnstileEnabled,
+  turnstileSiteKey,
+  setTurnstileToken,
+}) => {
+  return (
+    <Modal
+      title={
+        <div className='flex items-center'>
+          <IconDelete className='mr-2 text-red-500' />
+          {t('删除账户确认')}
+        </div>
+      }
+      visible={showAccountDeleteModal}
+      onCancel={() => setShowAccountDeleteModal(false)}
+      onOk={deleteAccount}
+      size={'small'}
+      centered={true}
+      className='modern-modal'
+    >
+      <div className='space-y-4 py-4'>
+        <Banner
+          type='danger'
+          description={t('您正在删除自己的帐户，将清空所有数据且不可恢复')}
+          closeIcon={null}
+          className='!rounded-lg'
+        />
+
+        <div>
+          <Typography.Text strong className='block mb-2 text-red-600'>
+            {t('请输入您的用户名以确认删除')}
+          </Typography.Text>
+          <Input
+            placeholder={t('输入你的账户名{{username}}以确认删除', {
+              username: ` ${userState?.user?.username} `,
+            })}
+            name='self_account_deletion_confirmation'
+            value={inputs.self_account_deletion_confirmation}
+            onChange={(value) =>
+              handleInputChange('self_account_deletion_confirmation', value)
+            }
+            size='large'
+            className='!rounded-lg'
+            prefix={<IconUser />}
+          />
+        </div>
+
+        {turnstileEnabled && (
+          <div className='flex justify-center'>
+            <Turnstile
+              sitekey={turnstileSiteKey}
+              onVerify={(token) => {
+                setTurnstileToken(token);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default AccountDeleteModal;

web/classic/src/components/settings/personal/modals/ChangePasswordModal.jsx

@@ -0,0 +1,117 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Input, Modal, Typography } from '@douyinfe/semi-ui';
+import { IconLock } from '@douyinfe/semi-icons';
+import Turnstile from 'react-turnstile';
+
+const ChangePasswordModal = ({
+  t,
+  showChangePasswordModal,
+  setShowChangePasswordModal,
+  inputs,
+  handleInputChange,
+  changePassword,
+  turnstileEnabled,
+  turnstileSiteKey,
+  setTurnstileToken,
+}) => {
+  return (
+    <Modal
+      title={
+        <div className='flex items-center'>
+          <IconLock className='mr-2 text-orange-500' />
+          {t('修改密码')}
+        </div>
+      }
+      visible={showChangePasswordModal}
+      onCancel={() => setShowChangePasswordModal(false)}
+      onOk={changePassword}
+      size={'small'}
+      centered={true}
+      className='modern-modal'
+    >
+      <div className='space-y-4 py-4'>
+        <div>
+          <Typography.Text strong className='block mb-2'>
+            {t('原密码')}
+          </Typography.Text>
+          <Input
+            name='original_password'
+            placeholder={t('请输入原密码')}
+            type='password'
+            value={inputs.original_password}
+            onChange={(value) => handleInputChange('original_password', value)}
+            size='large'
+            className='!rounded-lg'
+            prefix={<IconLock />}
+          />
+        </div>
+
+        <div>
+          <Typography.Text strong className='block mb-2'>
+            {t('新密码')}
+          </Typography.Text>
+          <Input
+            name='set_new_password'
+            placeholder={t('请输入新密码')}
+            type='password'
+            value={inputs.set_new_password}
+            onChange={(value) => handleInputChange('set_new_password', value)}
+            size='large'
+            className='!rounded-lg'
+            prefix={<IconLock />}
+          />
+        </div>
+
+        <div>
+          <Typography.Text strong className='block mb-2'>
+            {t('确认新密码')}
+          </Typography.Text>
+          <Input
+            name='set_new_password_confirmation'
+            placeholder={t('请再次输入新密码')}
+            type='password'
+            value={inputs.set_new_password_confirmation}
+            onChange={(value) =>
+              handleInputChange('set_new_password_confirmation', value)
+            }
+            size='large'
+            className='!rounded-lg'
+            prefix={<IconLock />}
+          />
+        </div>
+
+        {turnstileEnabled && (
+          <div className='flex justify-center'>
+            <Turnstile
+              sitekey={turnstileSiteKey}
+              onVerify={(token) => {
+                setTurnstileToken(token);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ChangePasswordModal;

web/classic/src/components/settings/personal/modals/EmailBindModal.jsx

@@ -0,0 +1,108 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Button, Input, Modal } from '@douyinfe/semi-ui';
+import { IconMail, IconKey } from '@douyinfe/semi-icons';
+import Turnstile from 'react-turnstile';
+
+const EmailBindModal = ({
+  t,
+  showEmailBindModal,
+  setShowEmailBindModal,
+  inputs,
+  handleInputChange,
+  sendVerificationCode,
+  bindEmail,
+  disableButton,
+  loading,
+  countdown,
+  turnstileEnabled,
+  turnstileSiteKey,
+  setTurnstileToken,
+}) => {
+  return (
+    <Modal
+      title={
+        <div className='flex items-center'>
+          <IconMail className='mr-2 text-blue-500' />
+          {t('绑定邮箱地址')}
+        </div>
+      }
+      visible={showEmailBindModal}
+      onCancel={() => setShowEmailBindModal(false)}
+      onOk={bindEmail}
+      size={'small'}
+      centered={true}
+      maskClosable={false}
+      className='modern-modal'
+    >
+      <div className='space-y-4 py-4'>
+        <div className='flex gap-3'>
+          <Input
+            placeholder={t('输入邮箱地址')}
+            onChange={(value) => handleInputChange('email', value)}
+            name='email'
+            type='email'
+            size='large'
+            className='!rounded-lg flex-1'
+            prefix={<IconMail />}
+          />
+          <Button
+            onClick={sendVerificationCode}
+            disabled={disableButton || loading}
+            className='!rounded-lg'
+            type='primary'
+            theme='outline'
+            size='large'
+          >
+            {disableButton
+              ? `${t('重新发送')} (${countdown})`
+              : t('获取验证码')}
+          </Button>
+        </div>
+
+        <Input
+          placeholder={t('验证码')}
+          name='email_verification_code'
+          value={inputs.email_verification_code}
+          onChange={(value) =>
+            handleInputChange('email_verification_code', value)
+          }
+          size='large'
+          className='!rounded-lg'
+          prefix={<IconKey />}
+        />
+
+        {turnstileEnabled && (
+          <div className='flex justify-center'>
+            <Turnstile
+              sitekey={turnstileSiteKey}
+              onVerify={(token) => {
+                setTurnstileToken(token);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default EmailBindModal;

web/classic/src/components/settings/personal/modals/WeChatBindModal.jsx

@@ -0,0 +1,80 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Button, Input, Modal, Image } from '@douyinfe/semi-ui';
+import { IconKey } from '@douyinfe/semi-icons';
+import { SiWechat } from 'react-icons/si';
+
+const WeChatBindModal = ({
+  t,
+  showWeChatBindModal,
+  setShowWeChatBindModal,
+  inputs,
+  handleInputChange,
+  bindWeChat,
+  status,
+}) => {
+  return (
+    <Modal
+      title={
+        <div className='flex items-center'>
+          <SiWechat className='mr-2 text-green-500' size={20} />
+          {t('绑定微信账户')}
+        </div>
+      }
+      visible={showWeChatBindModal}
+      onCancel={() => setShowWeChatBindModal(false)}
+      footer={null}
+      size={'small'}
+      centered={true}
+      className='modern-modal'
+    >
+      <div className='space-y-4 py-4 text-center'>
+        <Image src={status.wechat_qrcode} className='mx-auto' />
+        <div className='text-gray-600'>
+          <p>
+            {t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}
+          </p>
+        </div>
+        <Input
+          placeholder={t('验证码')}
+          name='wechat_verification_code'
+          value={inputs.wechat_verification_code}
+          onChange={(v) => handleInputChange('wechat_verification_code', v)}
+          size='large'
+          className='!rounded-lg'
+          prefix={<IconKey />}
+        />
+        <Button
+          type='primary'
+          theme='solid'
+          size='large'
+          onClick={bindWeChat}
+          className='!rounded-lg w-full !bg-slate-600 hover:!bg-slate-700'
+          icon={<SiWechat size={16} />}
+        >
+          {t('绑定')}
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default WeChatBindModal;