🚀 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/table/model-pricing/filter/PricingDisplaySettings.jsx

@@ -0,0 +1,123 @@
+/*
+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 SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
+
+const PricingDisplaySettings = ({
+  showWithRecharge,
+  setShowWithRecharge,
+  currency,
+  setCurrency,
+  siteDisplayType,
+  showRatio,
+  setShowRatio,
+  viewMode,
+  setViewMode,
+  tokenUnit,
+  setTokenUnit,
+  loading = false,
+  t,
+}) => {
+  const supportsCurrencyDisplay = siteDisplayType !== 'TOKENS';
+
+  const items = [
+    ...(supportsCurrencyDisplay
+      ? [
+          {
+            value: 'recharge',
+            label: t('充值价格显示'),
+          },
+        ]
+      : []),
+    {
+      value: 'ratio',
+      label: t('显示倍率'),
+    },
+    {
+      value: 'tableView',
+      label: t('表格视图'),
+    },
+    {
+      value: 'tokenUnit',
+      label: t('按K显示单位'),
+    },
+  ];
+
+  const currencyItems = [
+    { value: 'USD', label: 'USD ($)' },
+    { value: 'CNY', label: 'CNY (¥)' },
+    { value: 'CUSTOM', label: t('自定义货币') },
+  ];
+
+  const handleChange = (value) => {
+    switch (value) {
+      case 'recharge':
+        setShowWithRecharge(!showWithRecharge);
+        break;
+      case 'ratio':
+        setShowRatio(!showRatio);
+        break;
+      case 'tableView':
+        setViewMode(viewMode === 'table' ? 'card' : 'table');
+        break;
+      case 'tokenUnit':
+        setTokenUnit(tokenUnit === 'K' ? 'M' : 'K');
+        break;
+    }
+  };
+
+  const getActiveValues = () => {
+    const activeValues = [];
+    if (supportsCurrencyDisplay && showWithRecharge) activeValues.push('recharge');
+    if (showRatio) activeValues.push('ratio');
+    if (viewMode === 'table') activeValues.push('tableView');
+    if (tokenUnit === 'K') activeValues.push('tokenUnit');
+    return activeValues;
+  };
+
+  return (
+    <div>
+      <SelectableButtonGroup
+        title={t('显示设置')}
+        items={items}
+        activeValue={getActiveValues()}
+        onChange={handleChange}
+        withCheckbox
+        collapsible={false}
+        loading={loading}
+        t={t}
+      />
+
+      {supportsCurrencyDisplay && showWithRecharge && (
+        <SelectableButtonGroup
+          title={t('货币单位')}
+          items={currencyItems}
+          activeValue={currency}
+          onChange={setCurrency}
+          collapsible={false}
+          loading={loading}
+          t={t}
+        />
+      )}
+    </div>
+  );
+};
+
+export default PricingDisplaySettings;

web/classic/src/components/table/model-pricing/filter/PricingEndpointTypes.jsx

@@ -0,0 +1,103 @@
+/*
+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 SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
+
+/**
+ * 端点类型筛选组件
+ * @param {string|'all'} filterEndpointType 当前值
+ * @param {Function} setFilterEndpointType setter
+ * @param {Array} models 模型列表
+ * @param {boolean} loading 是否加载中
+ * @param {Function} t i18n
+ */
+const PricingEndpointTypes = ({
+  filterEndpointType,
+  setFilterEndpointType,
+  models = [],
+  allModels = [],
+  loading = false,
+  t,
+}) => {
+  // 获取系统中所有端点类型（基于 allModels，如果未提供则退化为 models）
+  const getAllEndpointTypes = () => {
+    const endpointTypes = new Set();
+    (allModels.length > 0 ? allModels : models).forEach((model) => {
+      if (
+        model.supported_endpoint_types &&
+        Array.isArray(model.supported_endpoint_types)
+      ) {
+        model.supported_endpoint_types.forEach((endpoint) => {
+          endpointTypes.add(endpoint);
+        });
+      }
+    });
+    return Array.from(endpointTypes).sort();
+  };
+
+  // 计算每个端点类型的模型数量
+  const getEndpointTypeCount = (endpointType) => {
+    if (endpointType === 'all') {
+      return models.length;
+    }
+    return models.filter(
+      (model) =>
+        model.supported_endpoint_types &&
+        model.supported_endpoint_types.includes(endpointType),
+    ).length;
+  };
+
+  // 端点类型显示名称映射
+  const getEndpointTypeLabel = (endpointType) => {
+    return endpointType;
+  };
+
+  const availableEndpointTypes = getAllEndpointTypes();
+
+  const items = [
+    {
+      value: 'all',
+      label: t('全部端点'),
+      tagCount: getEndpointTypeCount('all'),
+    },
+    ...availableEndpointTypes.map((endpointType) => {
+      const count = getEndpointTypeCount(endpointType);
+      return {
+        value: endpointType,
+        label: getEndpointTypeLabel(endpointType),
+        tagCount: count,
+      };
+    }),
+  ];
+
+  return (
+    <SelectableButtonGroup
+      title={t('端点类型')}
+      items={items}
+      activeValue={filterEndpointType}
+      onChange={setFilterEndpointType}
+      loading={loading}
+      variant='green'
+      t={t}
+    />
+  );
+};
+
+export default PricingEndpointTypes;

web/classic/src/components/table/model-pricing/filter/PricingGroups.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 from 'react';
+import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
+
+/**
+ * 分组筛选组件
+ * @param {string} filterGroup 当前选中的分组，'all' 表示不过滤
+ * @param {Function} setFilterGroup 设置选中分组
+ * @param {Record<string, any>} usableGroup 后端返回的可用分组对象
+ * @param {Record<string, number>} groupRatio 分组倍率对象
+ * @param {Array} models 模型列表
+ * @param {boolean} loading 是否加载中
+ * @param {Function} t i18n
+ */
+const PricingGroups = ({
+  filterGroup,
+  setFilterGroup,
+  usableGroup = {},
+  groupRatio = {},
+  models = [],
+  loading = false,
+  t,
+}) => {
+  const groups = [
+    'all',
+    ...Object.keys(usableGroup).filter((key) => key !== ''),
+  ];
+
+  const items = groups.map((g) => {
+    const modelCount =
+      g === 'all'
+        ? models.length
+        : models.filter((m) => m.enable_groups && m.enable_groups.includes(g))
+            .length;
+    let ratioDisplay = '';
+    if (g === 'all') {
+      // ratioDisplay = t('全部');
+    } else {
+      const ratio = groupRatio[g];
+      if (ratio !== undefined && ratio !== null) {
+        ratioDisplay = `${ratio}x`;
+      } else {
+        ratioDisplay = '1x';
+      }
+    }
+    return {
+      value: g,
+      label: g === 'all' ? t('全部分组') : g,
+      tagCount: ratioDisplay,
+    };
+  });
+
+  return (
+    <SelectableButtonGroup
+      title={t('可用令牌分组')}
+      items={items}
+      activeValue={filterGroup}
+      onChange={setFilterGroup}
+      loading={loading}
+      variant='teal'
+      t={t}
+    />
+  );
+};
+
+export default PricingGroups;

web/classic/src/components/table/model-pricing/filter/PricingQuotaTypes.jsx

@@ -0,0 +1,61 @@
+/*
+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 SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
+
+/**
+ * 计费类型筛选组件
+ * @param {string|'all'|0|1} filterQuotaType 当前值
+ * @param {Function} setFilterQuotaType setter
+ * @param {Array} models 模型列表
+ * @param {boolean} loading 是否加载中
+ * @param {Function} t i18n
+ */
+const PricingQuotaTypes = ({
+  filterQuotaType,
+  setFilterQuotaType,
+  models = [],
+  loading = false,
+  t,
+}) => {
+  const qtyCount = (type) =>
+    models.filter((m) => (type === 'all' ? true : m.quota_type === type))
+      .length;
+
+  const items = [
+    { value: 'all', label: t('全部类型'), tagCount: qtyCount('all') },
+    { value: 0, label: t('按量计费'), tagCount: qtyCount(0) },
+    { value: 1, label: t('按次计费'), tagCount: qtyCount(1) },
+  ];
+
+  return (
+    <SelectableButtonGroup
+      title={t('计费类型')}
+      items={items}
+      activeValue={filterQuotaType}
+      onChange={setFilterQuotaType}
+      loading={loading}
+      variant='amber'
+      t={t}
+    />
+  );
+};
+
+export default PricingQuotaTypes;

web/classic/src/components/table/model-pricing/filter/PricingTags.jsx

@@ -0,0 +1,109 @@
+/*
+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 SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
+
+/**
+ * 模型标签筛选组件
+ * @param {string|'all'} filterTag 当前选中的标签
+ * @param {Function} setFilterTag setter
+ * @param {Array} models 当前过滤后模型列表（用于计数）
+ * @param {Array} allModels 所有模型列表（用于获取所有标签）
+ * @param {boolean} loading 是否加载中
+ * @param {Function} t i18n
+ */
+const PricingTags = ({
+  filterTag,
+  setFilterTag,
+  models = [],
+  allModels = [],
+  loading = false,
+  t,
+}) => {
+  // 提取系统所有标签
+  const getAllTags = React.useMemo(() => {
+    const tagSet = new Set();
+
+    (allModels.length > 0 ? allModels : models).forEach((model) => {
+      if (model.tags) {
+        model.tags
+          .split(/[,;|]+/) // 逗号、分号或竖线（保留空格，允许多词标签如 "open weights"）
+          .map((tag) => tag.trim())
+          .filter(Boolean)
+          .forEach((tag) => tagSet.add(tag.toLowerCase()));
+      }
+    });
+
+    return Array.from(tagSet).sort((a, b) => a.localeCompare(b));
+  }, [allModels, models]);
+
+  // 计算标签对应的模型数量
+  const getTagCount = React.useCallback(
+    (tag) => {
+      if (tag === 'all') return models.length;
+
+      const tagLower = tag.toLowerCase();
+      return models.filter((model) => {
+        if (!model.tags) return false;
+        return model.tags
+          .toLowerCase()
+          .split(/[,;|]+/)
+          .map((tg) => tg.trim())
+          .includes(tagLower);
+      }).length;
+    },
+    [models],
+  );
+
+  const items = React.useMemo(() => {
+    const result = [
+      {
+        value: 'all',
+        label: t('全部标签'),
+        tagCount: getTagCount('all'),
+      },
+    ];
+
+    getAllTags.forEach((tag) => {
+      const count = getTagCount(tag);
+      result.push({
+        value: tag,
+        label: tag,
+        tagCount: count,
+      });
+    });
+
+    return result;
+  }, [getAllTags, getTagCount, t, models.length]);
+
+  return (
+    <SelectableButtonGroup
+      title={t('标签')}
+      items={items}
+      activeValue={filterTag}
+      onChange={setFilterTag}
+      loading={loading}
+      variant='rose'
+      t={t}
+    />
+  );
+};
+
+export default PricingTags;

web/classic/src/components/table/model-pricing/filter/PricingVendors.jsx

@@ -0,0 +1,127 @@
+/*
+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 SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
+import { getLobeHubIcon } from '../../../../helpers';
+
+/**
+ * 供应商筛选组件
+ * @param {string|'all'} filterVendor 当前值
+ * @param {Function} setFilterVendor setter
+ * @param {Array} models 模型列表
+ * @param {Array} allModels 所有模型列表（用于获取全部供应商）
+ * @param {boolean} loading 是否加载中
+ * @param {Function} t i18n
+ */
+const PricingVendors = ({
+  filterVendor,
+  setFilterVendor,
+  models = [],
+  allModels = [],
+  loading = false,
+  t,
+}) => {
+  // 获取系统中所有供应商（基于 allModels，如果未提供则退化为 models）
+  const getAllVendors = React.useMemo(() => {
+    const vendors = new Set();
+    const vendorIcons = new Map();
+    let hasUnknownVendor = false;
+
+    (allModels.length > 0 ? allModels : models).forEach((model) => {
+      if (model.vendor_name) {
+        vendors.add(model.vendor_name);
+        if (model.vendor_icon && !vendorIcons.has(model.vendor_name)) {
+          vendorIcons.set(model.vendor_name, model.vendor_icon);
+        }
+      } else {
+        hasUnknownVendor = true;
+      }
+    });
+
+    return {
+      vendors: Array.from(vendors).sort(),
+      vendorIcons,
+      hasUnknownVendor,
+    };
+  }, [allModels, models]);
+
+  // 计算每个供应商的模型数量（基于当前过滤后的 models）
+  const getVendorCount = React.useCallback(
+    (vendor) => {
+      if (vendor === 'all') {
+        return models.length;
+      }
+      if (vendor === 'unknown') {
+        return models.filter((model) => !model.vendor_name).length;
+      }
+      return models.filter((model) => model.vendor_name === vendor).length;
+    },
+    [models],
+  );
+
+  // 生成供应商选项
+  const items = React.useMemo(() => {
+    const result = [
+      {
+        value: 'all',
+        label: t('全部供应商'),
+        tagCount: getVendorCount('all'),
+      },
+    ];
+
+    // 添加所有已知供应商
+    getAllVendors.vendors.forEach((vendor) => {
+      const count = getVendorCount(vendor);
+      const icon = getAllVendors.vendorIcons.get(vendor);
+      result.push({
+        value: vendor,
+        label: vendor,
+        icon: icon ? getLobeHubIcon(icon, 16) : null,
+        tagCount: count,
+      });
+    });
+
+    // 如果系统中存在未知供应商，添加"未知供应商"选项
+    if (getAllVendors.hasUnknownVendor) {
+      const count = getVendorCount('unknown');
+      result.push({
+        value: 'unknown',
+        label: t('未知供应商'),
+        tagCount: count,
+      });
+    }
+
+    return result;
+  }, [getAllVendors, getVendorCount, t]);
+
+  return (
+    <SelectableButtonGroup
+      title={t('供应商')}
+      items={items}
+      activeValue={filterVendor}
+      onChange={setFilterVendor}
+      loading={loading}
+      variant='violet'
+      t={t}
+    />
+  );
+};
+
+export default PricingVendors;

web/classic/src/components/table/model-pricing/layout/PricingPage.jsx

@@ -0,0 +1,86 @@
+/*
+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 { Layout, ImagePreview } from '@douyinfe/semi-ui';
+import PricingSidebar from './PricingSidebar';
+import PricingContent from './content/PricingContent';
+import ModelDetailSideSheet from '../modal/ModelDetailSideSheet';
+import { useModelPricingData } from '../../../../hooks/model-pricing/useModelPricingData';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+
+const PricingPage = () => {
+  const pricingData = useModelPricingData();
+  const { Sider, Content } = Layout;
+  const isMobile = useIsMobile();
+  const [showRatio, setShowRatio] = React.useState(false);
+  const [viewMode, setViewMode] = React.useState('card');
+  const allProps = {
+    ...pricingData,
+    showRatio,
+    setShowRatio,
+    viewMode,
+    setViewMode,
+  };
+
+  return (
+    <div className='bg-white'>
+      <Layout className='pricing-layout'>
+        {!isMobile && (
+          <Sider className='pricing-scroll-hide pricing-sidebar'>
+            <PricingSidebar {...allProps} />
+          </Sider>
+        )}
+
+        <Content className='pricing-scroll-hide pricing-content'>
+          <PricingContent
+            {...allProps}
+            isMobile={isMobile}
+            sidebarProps={allProps}
+          />
+        </Content>
+      </Layout>
+
+      <ImagePreview
+        src={pricingData.modalImageUrl}
+        visible={pricingData.isModalOpenurl}
+        onVisibleChange={(visible) => pricingData.setIsModalOpenurl(visible)}
+      />
+
+      <ModelDetailSideSheet
+        visible={pricingData.showModelDetail}
+        onClose={pricingData.closeModelDetail}
+        modelData={pricingData.selectedModel}
+        groupRatio={pricingData.groupRatio}
+        usableGroup={pricingData.usableGroup}
+        currency={pricingData.currency}
+        siteDisplayType={pricingData.siteDisplayType}
+        tokenUnit={pricingData.tokenUnit}
+        displayPrice={pricingData.displayPrice}
+        showRatio={allProps.showRatio}
+        vendorsMap={pricingData.vendorsMap}
+        endpointMap={pricingData.endpointMap}
+        autoGroups={pricingData.autoGroups}
+        t={pricingData.t}
+      />
+    </div>
+  );
+};
+
+export default PricingPage;

web/classic/src/components/table/model-pricing/layout/PricingSidebar.jsx

@@ -0,0 +1,155 @@
+/*
+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 } from '@douyinfe/semi-ui';
+import PricingGroups from '../filter/PricingGroups';
+import PricingQuotaTypes from '../filter/PricingQuotaTypes';
+import PricingEndpointTypes from '../filter/PricingEndpointTypes';
+import PricingVendors from '../filter/PricingVendors';
+import PricingTags from '../filter/PricingTags';
+
+import { resetPricingFilters } from '../../../../helpers/utils';
+import { usePricingFilterCounts } from '../../../../hooks/model-pricing/usePricingFilterCounts';
+
+const PricingSidebar = ({
+  showWithRecharge,
+  setShowWithRecharge,
+  currency,
+  setCurrency,
+  handleChange,
+  setActiveKey,
+  showRatio,
+  setShowRatio,
+  viewMode,
+  setViewMode,
+  filterGroup,
+  setFilterGroup,
+  handleGroupClick,
+  filterQuotaType,
+  setFilterQuotaType,
+  filterEndpointType,
+  setFilterEndpointType,
+  filterVendor,
+  setFilterVendor,
+  filterTag,
+  setFilterTag,
+  currentPage,
+  setCurrentPage,
+  tokenUnit,
+  setTokenUnit,
+  loading,
+  t,
+  ...categoryProps
+}) => {
+  const {
+    quotaTypeModels,
+    endpointTypeModels,
+    vendorModels,
+    tagModels,
+    groupCountModels,
+  } = usePricingFilterCounts({
+    models: categoryProps.models,
+    filterGroup,
+    filterQuotaType,
+    filterEndpointType,
+    filterVendor,
+    filterTag,
+    searchValue: categoryProps.searchValue,
+  });
+
+  const handleResetFilters = () =>
+    resetPricingFilters({
+      handleChange,
+      setShowWithRecharge,
+      setCurrency,
+      setShowRatio,
+      setViewMode,
+      setFilterGroup,
+      setFilterQuotaType,
+      setFilterEndpointType,
+      setFilterVendor,
+      setFilterTag,
+      setCurrentPage,
+      setTokenUnit,
+    });
+
+  return (
+    <div className='p-2'>
+      <div className='flex items-center justify-between mb-6'>
+        <div className='text-lg font-semibold text-gray-800'>{t('筛选')}</div>
+        <Button
+          theme='outline'
+          type='tertiary'
+          onClick={handleResetFilters}
+          className='text-gray-500 hover:text-gray-700'
+        >
+          {t('重置')}
+        </Button>
+      </div>
+
+      <PricingVendors
+        filterVendor={filterVendor}
+        setFilterVendor={setFilterVendor}
+        models={vendorModels}
+        allModels={categoryProps.models}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingGroups
+        filterGroup={filterGroup}
+        setFilterGroup={handleGroupClick}
+        usableGroup={categoryProps.usableGroup}
+        groupRatio={categoryProps.groupRatio}
+        models={groupCountModels}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingQuotaTypes
+        filterQuotaType={filterQuotaType}
+        setFilterQuotaType={setFilterQuotaType}
+        models={quotaTypeModels}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingTags
+        filterTag={filterTag}
+        setFilterTag={setFilterTag}
+        models={tagModels}
+        allModels={categoryProps.models}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingEndpointTypes
+        filterEndpointType={filterEndpointType}
+        setFilterEndpointType={setFilterEndpointType}
+        models={endpointTypeModels}
+        allModels={categoryProps.models}
+        loading={loading}
+        t={t}
+      />
+    </div>
+  );
+};
+
+export default PricingSidebar;

web/classic/src/components/table/model-pricing/layout/content/PricingContent.jsx

@@ -0,0 +1,60 @@
+/*
+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 PricingTopSection from '../header/PricingTopSection';
+import PricingView from './PricingView';
+
+const PricingContent = ({ isMobile, sidebarProps, ...props }) => {
+  return (
+    <div
+      className={isMobile ? 'pricing-content-mobile' : 'pricing-scroll-hide'}
+    >
+      {/* 固定的顶部区域（分类介绍 + 搜索和操作） */}
+      <div className='pricing-search-header'>
+        <PricingTopSection
+          {...props}
+          isMobile={isMobile}
+          sidebarProps={sidebarProps}
+          showWithRecharge={sidebarProps.showWithRecharge}
+          setShowWithRecharge={sidebarProps.setShowWithRecharge}
+          currency={sidebarProps.currency}
+          setCurrency={sidebarProps.setCurrency}
+          showRatio={sidebarProps.showRatio}
+          setShowRatio={sidebarProps.setShowRatio}
+          viewMode={sidebarProps.viewMode}
+          setViewMode={sidebarProps.setViewMode}
+          tokenUnit={sidebarProps.tokenUnit}
+          setTokenUnit={sidebarProps.setTokenUnit}
+        />
+      </div>
+
+      {/* 可滚动的内容区域 */}
+      <div
+        className={
+          isMobile ? 'pricing-view-container-mobile' : 'pricing-view-container'
+        }
+      >
+        <PricingView {...props} viewMode={sidebarProps.viewMode} />
+      </div>
+    </div>
+  );
+};
+
+export default PricingContent;

web/classic/src/components/table/model-pricing/layout/content/PricingView.jsx

@@ -0,0 +1,32 @@
+/*
+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 PricingTable from '../../view/table/PricingTable';
+import PricingCardView from '../../view/card/PricingCardView';
+
+const PricingView = ({ viewMode = 'table', ...props }) => {
+  return viewMode === 'card' ? (
+    <PricingCardView {...props} />
+  ) : (
+    <PricingTable {...props} />
+  );
+};
+
+export default PricingView;

web/classic/src/components/table/model-pricing/layout/header/PricingTopSection.jsx

@@ -0,0 +1,124 @@
+/*
+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, memo } from 'react';
+import PricingFilterModal from '../../modal/PricingFilterModal';
+import PricingVendorIntroWithSkeleton from './PricingVendorIntroWithSkeleton';
+import SearchActions from './SearchActions';
+
+const PricingTopSection = memo(
+  ({
+    selectedRowKeys,
+    copyText,
+    handleChange,
+    handleCompositionStart,
+    handleCompositionEnd,
+    isMobile,
+    sidebarProps,
+    filterVendor,
+    models,
+    filteredModels,
+    loading,
+    searchValue,
+    showWithRecharge,
+    setShowWithRecharge,
+    currency,
+    setCurrency,
+    siteDisplayType,
+    showRatio,
+    setShowRatio,
+    viewMode,
+    setViewMode,
+    tokenUnit,
+    setTokenUnit,
+    t,
+  }) => {
+    const [showFilterModal, setShowFilterModal] = useState(false);
+
+    return (
+      <>
+        {isMobile ? (
+          <>
+            <div className='w-full'>
+              <SearchActions
+                selectedRowKeys={selectedRowKeys}
+                copyText={copyText}
+                handleChange={handleChange}
+                handleCompositionStart={handleCompositionStart}
+                handleCompositionEnd={handleCompositionEnd}
+                isMobile={isMobile}
+                searchValue={searchValue}
+                setShowFilterModal={setShowFilterModal}
+                showWithRecharge={showWithRecharge}
+                setShowWithRecharge={setShowWithRecharge}
+                currency={currency}
+                setCurrency={setCurrency}
+                siteDisplayType={siteDisplayType}
+                showRatio={showRatio}
+                setShowRatio={setShowRatio}
+                viewMode={viewMode}
+                setViewMode={setViewMode}
+                tokenUnit={tokenUnit}
+                setTokenUnit={setTokenUnit}
+                t={t}
+              />
+            </div>
+            <PricingFilterModal
+              visible={showFilterModal}
+              onClose={() => setShowFilterModal(false)}
+              sidebarProps={sidebarProps}
+              t={t}
+            />
+          </>
+        ) : (
+          <PricingVendorIntroWithSkeleton
+            loading={loading}
+            filterVendor={filterVendor}
+            models={filteredModels}
+            allModels={models}
+            t={t}
+            selectedRowKeys={selectedRowKeys}
+            copyText={copyText}
+            handleChange={handleChange}
+            handleCompositionStart={handleCompositionStart}
+            handleCompositionEnd={handleCompositionEnd}
+            isMobile={isMobile}
+            searchValue={searchValue}
+            setShowFilterModal={setShowFilterModal}
+            showWithRecharge={showWithRecharge}
+            setShowWithRecharge={setShowWithRecharge}
+            currency={currency}
+            setCurrency={setCurrency}
+            siteDisplayType={siteDisplayType}
+            showRatio={showRatio}
+            setShowRatio={setShowRatio}
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            tokenUnit={tokenUnit}
+            setTokenUnit={setTokenUnit}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+PricingTopSection.displayName = 'PricingTopSection';
+
+export default PricingTopSection;

web/classic/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx

@@ -0,0 +1,419 @@
+/*
+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, useCallback, memo } from 'react';
+import {
+  Card,
+  Tag,
+  Avatar,
+  Typography,
+  Tooltip,
+  Modal,
+} from '@douyinfe/semi-ui';
+import { getLobeHubIcon } from '../../../../../helpers';
+import SearchActions from './SearchActions';
+
+const { Paragraph } = Typography;
+
+const CONFIG = {
+  CAROUSEL_INTERVAL: 2000,
+  ICON_SIZE: 40,
+  UNKNOWN_VENDOR: 'unknown',
+};
+
+const THEME_COLORS = {
+  allVendors: {
+    primary: '37 99 235',
+    background: 'rgba(59, 130, 246, 0.08)',
+  },
+  specific: {
+    primary: '16 185 129',
+    background: 'rgba(16, 185, 129, 0.1)',
+  },
+};
+
+const COMPONENT_STYLES = {
+  tag: {
+    backgroundColor: 'rgba(255,255,255,0.95)',
+    color: '#1f2937',
+    border: '1px solid rgba(255,255,255,0.8)',
+    fontWeight: '500',
+  },
+  avatarContainer:
+    'w-16 h-16 rounded-2xl bg-white/90 shadow-md backdrop-blur-sm flex items-center justify-center',
+  titleText: { color: 'white' },
+  descriptionText: { color: 'rgba(255,255,255,0.9)' },
+};
+
+const CONTENT_TEXTS = {
+  unknown: {
+    displayName: (t) => t('未知供应商'),
+    description: (t) =>
+      t(
+        '包含来自未知或未标明供应商的AI模型，这些模型可能来自小型供应商或开源项目。',
+      ),
+  },
+  all: {
+    description: (t) =>
+      t('查看所有可用的AI模型供应商，包括众多知名供应商的模型。'),
+  },
+  fallback: {
+    description: (t) => t('该供应商提供多种AI模型，适用于不同的应用场景。'),
+  },
+};
+
+const getVendorDisplayName = (vendorName, t) => {
+  return vendorName === CONFIG.UNKNOWN_VENDOR
+    ? CONTENT_TEXTS.unknown.displayName(t)
+    : vendorName;
+};
+
+const createDefaultAvatar = () => (
+  <div className={COMPONENT_STYLES.avatarContainer}>
+    <Avatar size='large' color='transparent'>
+      AI
+    </Avatar>
+  </div>
+);
+
+const getAvatarBackgroundColor = (isAllVendors) =>
+  isAllVendors
+    ? THEME_COLORS.allVendors.background
+    : THEME_COLORS.specific.background;
+
+const getAvatarText = (vendorName) =>
+  vendorName === CONFIG.UNKNOWN_VENDOR
+    ? '?'
+    : vendorName.charAt(0).toUpperCase();
+
+const createAvatarContent = (vendor, isAllVendors) => {
+  if (vendor.icon) {
+    return getLobeHubIcon(vendor.icon, CONFIG.ICON_SIZE);
+  }
+
+  return (
+    <Avatar
+      size='large'
+      style={{ backgroundColor: getAvatarBackgroundColor(isAllVendors) }}
+    >
+      {getAvatarText(vendor.name)}
+    </Avatar>
+  );
+};
+
+const renderVendorAvatar = (vendor, t, isAllVendors = false) => {
+  if (!vendor) {
+    return createDefaultAvatar();
+  }
+
+  const displayName = getVendorDisplayName(vendor.name, t);
+  const avatarContent = createAvatarContent(vendor, isAllVendors);
+
+  return (
+    <Tooltip content={displayName} position='top'>
+      <div className={COMPONENT_STYLES.avatarContainer}>{avatarContent}</div>
+    </Tooltip>
+  );
+};
+
+const PricingVendorIntro = memo(
+  ({
+    filterVendor,
+    models = [],
+    allModels = [],
+    t,
+    selectedRowKeys = [],
+    copyText,
+    handleChange,
+    handleCompositionStart,
+    handleCompositionEnd,
+    isMobile = false,
+    searchValue = '',
+    setShowFilterModal,
+    showWithRecharge,
+    setShowWithRecharge,
+    currency,
+    setCurrency,
+    showRatio,
+    setShowRatio,
+    viewMode,
+    setViewMode,
+    tokenUnit,
+    setTokenUnit,
+  }) => {
+    const [currentOffset, setCurrentOffset] = useState(0);
+    const [descModalVisible, setDescModalVisible] = useState(false);
+    const [descModalContent, setDescModalContent] = useState('');
+
+    const handleOpenDescModal = useCallback((content) => {
+      setDescModalContent(content || '');
+      setDescModalVisible(true);
+    }, []);
+
+    const handleCloseDescModal = useCallback(() => {
+      setDescModalVisible(false);
+    }, []);
+
+    const renderDescriptionModal = useCallback(
+      () => (
+        <Modal
+          title={t('供应商介绍')}
+          visible={descModalVisible}
+          onCancel={handleCloseDescModal}
+          footer={null}
+          width={isMobile ? '95%' : 600}
+          bodyStyle={{
+            maxHeight: isMobile ? '70vh' : '60vh',
+            overflowY: 'auto',
+          }}
+        >
+          <div className='text-sm mb-4'>{descModalContent}</div>
+        </Modal>
+      ),
+      [descModalVisible, descModalContent, handleCloseDescModal, isMobile, t],
+    );
+
+    const vendorInfo = useMemo(() => {
+      const vendors = new Map();
+      let unknownCount = 0;
+
+      const sourceModels =
+        Array.isArray(allModels) && allModels.length > 0 ? allModels : models;
+
+      sourceModels.forEach((model) => {
+        if (model.vendor_name) {
+          const existing = vendors.get(model.vendor_name);
+          if (existing) {
+            existing.count++;
+          } else {
+            vendors.set(model.vendor_name, {
+              name: model.vendor_name,
+              icon: model.vendor_icon,
+              description: model.vendor_description,
+              count: 1,
+            });
+          }
+        } else {
+          unknownCount++;
+        }
+      });
+
+      const vendorList = Array.from(vendors.values()).sort((a, b) =>
+        a.name.localeCompare(b.name),
+      );
+
+      if (unknownCount > 0) {
+        vendorList.push({
+          name: CONFIG.UNKNOWN_VENDOR,
+          icon: null,
+          description: CONTENT_TEXTS.unknown.description(t),
+          count: unknownCount,
+        });
+      }
+
+      return vendorList;
+    }, [allModels, models, t]);
+
+    const currentModelCount = models.length;
+
+    useEffect(() => {
+      if (filterVendor !== 'all' || vendorInfo.length <= 1) {
+        setCurrentOffset(0);
+        return;
+      }
+
+      const interval = setInterval(() => {
+        setCurrentOffset((prev) => (prev + 1) % vendorInfo.length);
+      }, CONFIG.CAROUSEL_INTERVAL);
+
+      return () => clearInterval(interval);
+    }, [filterVendor, vendorInfo.length]);
+
+    const getVendorDescription = useCallback(
+      (vendorKey) => {
+        if (vendorKey === 'all') {
+          return CONTENT_TEXTS.all.description(t);
+        }
+        if (vendorKey === CONFIG.UNKNOWN_VENDOR) {
+          return CONTENT_TEXTS.unknown.description(t);
+        }
+        const vendor = vendorInfo.find((v) => v.name === vendorKey);
+        return vendor?.description || CONTENT_TEXTS.fallback.description(t);
+      },
+      [vendorInfo, t],
+    );
+
+    const createCoverStyle = useCallback(
+      (primaryColor) => ({
+        '--palette-primary-darkerChannel': primaryColor,
+        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',
+      }),
+      [],
+    );
+
+    const renderSearchActions = useCallback(
+      () => (
+        <SearchActions
+          selectedRowKeys={selectedRowKeys}
+          copyText={copyText}
+          handleChange={handleChange}
+          handleCompositionStart={handleCompositionStart}
+          handleCompositionEnd={handleCompositionEnd}
+          isMobile={isMobile}
+          searchValue={searchValue}
+          setShowFilterModal={setShowFilterModal}
+          showWithRecharge={showWithRecharge}
+          setShowWithRecharge={setShowWithRecharge}
+          currency={currency}
+          setCurrency={setCurrency}
+          showRatio={showRatio}
+          setShowRatio={setShowRatio}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          tokenUnit={tokenUnit}
+          setTokenUnit={setTokenUnit}
+          t={t}
+        />
+      ),
+      [
+        selectedRowKeys,
+        copyText,
+        handleChange,
+        handleCompositionStart,
+        handleCompositionEnd,
+        isMobile,
+        searchValue,
+        setShowFilterModal,
+        showWithRecharge,
+        setShowWithRecharge,
+        currency,
+        setCurrency,
+        showRatio,
+        setShowRatio,
+        viewMode,
+        setViewMode,
+        tokenUnit,
+        setTokenUnit,
+        t,
+      ],
+    );
+
+    const renderHeaderCard = useCallback(
+      ({ title, count, description, rightContent, primaryDarkerChannel }) => (
+        <Card
+          className='!rounded-2xl shadow-sm border-0'
+          cover={
+            <div
+              className='relative h-full'
+              style={createCoverStyle(primaryDarkerChannel)}
+            >
+              <div className='relative z-10 h-full flex items-center justify-between p-4'>
+                <div className='flex-1 min-w-0 mr-4'>
+                  <div className='flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2'>
+                    <h2
+                      className='text-lg sm:text-xl font-bold truncate'
+                      style={COMPONENT_STYLES.titleText}
+                    >
+                      {title}
+                    </h2>
+                    <Tag
+                      style={COMPONENT_STYLES.tag}
+                      shape='circle'
+                      size='small'
+                      className='self-center'
+                    >
+                      {t('共 {{count}} 个模型', { count })}
+                    </Tag>
+                  </div>
+                  <Paragraph
+                    className='text-xs sm:text-sm leading-relaxed !mb-0 cursor-pointer'
+                    style={COMPONENT_STYLES.descriptionText}
+                    ellipsis={{ rows: 2 }}
+                    onClick={() => handleOpenDescModal(description)}
+                  >
+                    {description}
+                  </Paragraph>
+                </div>
+
+                <div className='flex-shrink-0'>{rightContent}</div>
+              </div>
+            </div>
+          }
+        >
+          {renderSearchActions()}
+        </Card>
+      ),
+      [renderSearchActions, createCoverStyle, handleOpenDescModal, t],
+    );
+
+    const renderAllVendorsAvatar = useCallback(() => {
+      const currentVendor =
+        vendorInfo.length > 0
+          ? vendorInfo[currentOffset % vendorInfo.length]
+          : null;
+      return renderVendorAvatar(currentVendor, t, true);
+    }, [vendorInfo, currentOffset, t]);
+
+    if (filterVendor === 'all') {
+      const headerCard = renderHeaderCard({
+        title: t('全部供应商'),
+        count: currentModelCount,
+        description: getVendorDescription('all'),
+        rightContent: renderAllVendorsAvatar(),
+        primaryDarkerChannel: THEME_COLORS.allVendors.primary,
+      });
+      return (
+        <>
+          {headerCard}
+          {renderDescriptionModal()}
+        </>
+      );
+    }
+
+    const currentVendor = vendorInfo.find((v) => v.name === filterVendor);
+    if (!currentVendor) {
+      return null;
+    }
+
+    const vendorDisplayName = getVendorDisplayName(currentVendor.name, t);
+
+    const headerCard = renderHeaderCard({
+      title: vendorDisplayName,
+      count: currentModelCount,
+      description:
+        currentVendor.description || getVendorDescription(currentVendor.name),
+      rightContent: renderVendorAvatar(currentVendor, t, false),
+      primaryDarkerChannel: THEME_COLORS.specific.primary,
+    });
+
+    return (
+      <>
+        {headerCard}
+        {renderDescriptionModal()}
+      </>
+    );
+  },
+);
+
+PricingVendorIntro.displayName = 'PricingVendorIntro';
+
+export default PricingVendorIntro;

web/classic/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx

@@ -0,0 +1,212 @@
+/*
+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, { memo } from 'react';
+import { Card, Skeleton } from '@douyinfe/semi-ui';
+
+const THEME_COLORS = {
+  allVendors: {
+    primary: '37 99 235',
+    background: 'rgba(59, 130, 246, 0.1)',
+    border: 'rgba(59, 130, 246, 0.2)',
+  },
+  specific: {
+    primary: '16 185 129',
+    background: 'rgba(16, 185, 129, 0.1)',
+    border: 'rgba(16, 185, 129, 0.2)',
+  },
+  neutral: {
+    background: 'rgba(156, 163, 175, 0.1)',
+    border: 'rgba(156, 163, 175, 0.2)',
+  },
+};
+
+const SIZES = {
+  title: { width: { all: 120, specific: 100 }, height: 24 },
+  tag: { width: 80, height: 20 },
+  description: { height: 14 },
+  avatar: { width: 40, height: 40 },
+  searchInput: { height: 32 },
+  button: { width: 80, height: 32 },
+};
+
+const SKELETON_STYLES = {
+  cover: (primaryColor) => ({
+    '--palette-primary-darkerChannel': primaryColor,
+    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',
+  }),
+  title: {
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
+    borderRadius: 8,
+    backdropFilter: 'blur(4px)',
+  },
+  tag: {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: 9999,
+    backdropFilter: 'blur(4px)',
+    border: '1px solid rgba(255,255,255,0.3)',
+  },
+  description: {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: 4,
+    backdropFilter: 'blur(4px)',
+  },
+  avatar: (isAllVendors) => {
+    const colors = isAllVendors
+      ? THEME_COLORS.allVendors
+      : THEME_COLORS.specific;
+    return {
+      backgroundColor: colors.background,
+      borderRadius: 12,
+      border: `1px solid ${colors.border}`,
+    };
+  },
+  searchInput: {
+    backgroundColor: THEME_COLORS.neutral.background,
+    borderRadius: 8,
+    border: `1px solid ${THEME_COLORS.neutral.border}`,
+  },
+  button: {
+    backgroundColor: THEME_COLORS.neutral.background,
+    borderRadius: 8,
+    border: `1px solid ${THEME_COLORS.neutral.border}`,
+  },
+};
+
+const createSkeletonRect = (style = {}, key = null) => (
+  <div key={key} className='animate-pulse' style={style} />
+);
+
+const PricingVendorIntroSkeleton = memo(
+  ({ isAllVendors = false, isMobile = false }) => {
+    const placeholder = (
+      <Card
+        className='!rounded-2xl shadow-sm border-0'
+        cover={
+          <div
+            className='relative h-full'
+            style={SKELETON_STYLES.cover(
+              isAllVendors
+                ? THEME_COLORS.allVendors.primary
+                : THEME_COLORS.specific.primary,
+            )}
+          >
+            <div className='relative z-10 h-full flex items-center justify-between p-4'>
+              <div className='flex-1 min-w-0 mr-4'>
+                <div className='flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2'>
+                  {createSkeletonRect(
+                    {
+                      ...SKELETON_STYLES.title,
+                      width: isAllVendors
+                        ? SIZES.title.width.all
+                        : SIZES.title.width.specific,
+                      height: SIZES.title.height,
+                    },
+                    'title',
+                  )}
+                  {createSkeletonRect(
+                    {
+                      ...SKELETON_STYLES.tag,
+                      width: SIZES.tag.width,
+                      height: SIZES.tag.height,
+                    },
+                    'tag',
+                  )}
+                </div>
+                <div className='space-y-2'>
+                  {createSkeletonRect(
+                    {
+                      ...SKELETON_STYLES.description,
+                      width: '100%',
+                      height: SIZES.description.height,
+                    },
+                    'desc1',
+                  )}
+                  {createSkeletonRect(
+                    {
+                      ...SKELETON_STYLES.description,
+                      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                      width: '75%',
+                      height: SIZES.description.height,
+                    },
+                    'desc2',
+                  )}
+                </div>
+              </div>
+
+              <div className='flex-shrink-0 w-16 h-16 rounded-2xl bg-white/90 shadow-md backdrop-blur-sm flex items-center justify-center'>
+                {createSkeletonRect(
+                  {
+                    ...SKELETON_STYLES.avatar(isAllVendors),
+                    width: SIZES.avatar.width,
+                    height: SIZES.avatar.height,
+                  },
+                  'avatar',
+                )}
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <div className='flex items-center gap-2 w-full'>
+          <div className='flex-1'>
+            {createSkeletonRect(
+              {
+                ...SKELETON_STYLES.searchInput,
+                width: '100%',
+                height: SIZES.searchInput.height,
+              },
+              'search',
+            )}
+          </div>
+
+          {createSkeletonRect(
+            {
+              ...SKELETON_STYLES.button,
+              width: SIZES.button.width,
+              height: SIZES.button.height,
+            },
+            'copy-button',
+          )}
+
+          {isMobile &&
+            createSkeletonRect(
+              {
+                ...SKELETON_STYLES.button,
+                width: SIZES.button.width,
+                height: SIZES.button.height,
+              },
+              'filter-button',
+            )}
+        </div>
+      </Card>
+    );
+
+    return (
+      <Skeleton loading={true} active placeholder={placeholder}></Skeleton>
+    );
+  },
+);
+
+PricingVendorIntroSkeleton.displayName = 'PricingVendorIntroSkeleton';
+
+export default PricingVendorIntroSkeleton;

web/classic/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx

@@ -0,0 +1,44 @@
+/*
+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, { memo } from 'react';
+import PricingVendorIntro from './PricingVendorIntro';
+import PricingVendorIntroSkeleton from './PricingVendorIntroSkeleton';
+import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
+
+const PricingVendorIntroWithSkeleton = memo(
+  ({ loading = false, filterVendor, ...restProps }) => {
+    const showSkeleton = useMinimumLoadingTime(loading);
+
+    if (showSkeleton) {
+      return (
+        <PricingVendorIntroSkeleton
+          isAllVendors={filterVendor === 'all'}
+          isMobile={restProps.isMobile}
+        />
+      );
+    }
+
+    return <PricingVendorIntro filterVendor={filterVendor} {...restProps} />;
+  },
+);
+
+PricingVendorIntroWithSkeleton.displayName = 'PricingVendorIntroWithSkeleton';
+
+export default PricingVendorIntroWithSkeleton;

web/classic/src/components/table/model-pricing/layout/header/SearchActions.jsx

@@ -0,0 +1,163 @@
+/*
+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, { memo, useCallback } from 'react';
+import { Input, Button, Switch, Select, Divider } from '@douyinfe/semi-ui';
+import { IconSearch, IconCopy, IconFilter } from '@douyinfe/semi-icons';
+
+const SearchActions = memo(
+  ({
+    selectedRowKeys = [],
+    copyText,
+    handleChange,
+    handleCompositionStart,
+    handleCompositionEnd,
+    isMobile = false,
+    searchValue = '',
+    setShowFilterModal,
+    showWithRecharge,
+    setShowWithRecharge,
+    currency,
+    setCurrency,
+    siteDisplayType,
+    showRatio,
+    setShowRatio,
+    viewMode,
+    setViewMode,
+    tokenUnit,
+    setTokenUnit,
+    t,
+  }) => {
+    const supportsCurrencyDisplay = siteDisplayType !== 'TOKENS';
+
+    const handleCopyClick = useCallback(() => {
+      if (copyText && selectedRowKeys.length > 0) {
+        copyText(selectedRowKeys);
+      }
+    }, [copyText, selectedRowKeys]);
+
+    const handleFilterClick = useCallback(() => {
+      setShowFilterModal?.(true);
+    }, [setShowFilterModal]);
+
+    const handleViewModeToggle = useCallback(() => {
+      setViewMode?.(viewMode === 'table' ? 'card' : 'table');
+    }, [viewMode, setViewMode]);
+
+    const handleTokenUnitToggle = useCallback(() => {
+      setTokenUnit?.(tokenUnit === 'K' ? 'M' : 'K');
+    }, [tokenUnit, setTokenUnit]);
+
+    return (
+      <div className='flex items-center gap-2 w-full'>
+        <div className='flex-1'>
+          <Input
+            prefix={<IconSearch />}
+            placeholder={t('模糊搜索模型名称')}
+            value={searchValue}
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+            onChange={handleChange}
+            showClear
+          />
+        </div>
+
+        <Button
+          theme='outline'
+          type='primary'
+          icon={<IconCopy />}
+          onClick={handleCopyClick}
+          disabled={selectedRowKeys.length === 0}
+          className='!bg-blue-500 hover:!bg-blue-600 !text-white disabled:!bg-gray-300 disabled:!text-gray-500'
+        >
+          {t('复制')}
+        </Button>
+
+        {!isMobile && (
+          <>
+            <Divider layout='vertical' margin='8px' />
+
+            {/* 充值价格显示开关 */}
+            {supportsCurrencyDisplay && (
+              <div className='flex items-center gap-2'>
+                <span className='text-sm text-gray-600'>{t('充值价格显示')}</span>
+                <Switch
+                  checked={showWithRecharge}
+                  onChange={setShowWithRecharge}
+                />
+              </div>
+            )}
+
+            {/* 货币单位选择 */}
+            {supportsCurrencyDisplay && showWithRecharge && (
+              <Select
+                value={currency}
+                onChange={setCurrency}
+                optionList={[
+                  { value: 'USD', label: 'USD' },
+                  { value: 'CNY', label: 'CNY' },
+                  { value: 'CUSTOM', label: t('自定义货币') },
+                ]}
+              />
+            )}
+
+            {/* 显示倍率开关 */}
+            <div className='flex items-center gap-2'>
+              <span className='text-sm text-gray-600'>{t('倍率')}</span>
+              <Switch checked={showRatio} onChange={setShowRatio} />
+            </div>
+
+            {/* 视图模式切换按钮 */}
+            <Button
+              theme={viewMode === 'table' ? 'solid' : 'outline'}
+              type={viewMode === 'table' ? 'primary' : 'tertiary'}
+              onClick={handleViewModeToggle}
+            >
+              {t('表格视图')}
+            </Button>
+
+            {/* Token单位切换按钮 */}
+            <Button
+              theme={tokenUnit === 'K' ? 'solid' : 'outline'}
+              type={tokenUnit === 'K' ? 'primary' : 'tertiary'}
+              onClick={handleTokenUnitToggle}
+            >
+              {tokenUnit}
+            </Button>
+          </>
+        )}
+
+        {isMobile && (
+          <Button
+            theme='outline'
+            type='tertiary'
+            icon={<IconFilter />}
+            onClick={handleFilterClick}
+          >
+            {t('筛选')}
+          </Button>
+        )}
+      </div>
+    );
+  },
+);
+
+SearchActions.displayName = 'SearchActions';
+
+export default SearchActions;

web/classic/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx

@@ -0,0 +1,132 @@
+/*
+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 { SideSheet, Typography, Button, Divider } from '@douyinfe/semi-ui';
+import { IconClose } from '@douyinfe/semi-icons';
+
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+import ModelHeader from './components/ModelHeader';
+import ModelBasicInfo from './components/ModelBasicInfo';
+import ModelEndpoints from './components/ModelEndpoints';
+import ModelPricingTable from './components/ModelPricingTable';
+import DynamicPricingBreakdown from './components/DynamicPricingBreakdown';
+
+const { Text } = Typography;
+
+const ModelDetailSideSheet = ({
+  visible,
+  onClose,
+  modelData,
+  groupRatio,
+  currency,
+  siteDisplayType,
+  tokenUnit,
+  displayPrice,
+  showRatio,
+  usableGroup,
+  vendorsMap,
+  endpointMap,
+  autoGroups,
+  t,
+}) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <SideSheet
+      placement='right'
+      title={
+        <ModelHeader modelData={modelData} vendorsMap={vendorsMap} t={t} />
+      }
+      bodyStyle={{
+        padding: '0',
+        display: 'flex',
+        flexDirection: 'column',
+        borderBottom: '1px solid var(--semi-color-border)',
+      }}
+      visible={visible}
+      width={isMobile ? '100%' : 600}
+      closeIcon={
+        <Button
+          className='semi-button-tertiary semi-button-size-small semi-button-borderless'
+          type='button'
+          icon={<IconClose />}
+          onClick={onClose}
+        />
+      }
+      onCancel={onClose}
+    >
+      <div style={{ paddingTop: 16, paddingBottom: 16 }}>
+        {!modelData && (
+          <div className='flex justify-center items-center py-10'>
+            <Text type='secondary'>{t('加载中...')}</Text>
+          </div>
+        )}
+        {modelData && (
+          <>
+            <div style={{ padding: '0 24px' }}>
+              <ModelBasicInfo
+                modelData={modelData}
+                vendorsMap={vendorsMap}
+                t={t}
+              />
+            </div>
+            <Divider margin={16} />
+            <div style={{ padding: '0 24px' }}>
+              <ModelEndpoints
+                modelData={modelData}
+                endpointMap={endpointMap}
+                t={t}
+              />
+            </div>
+            {modelData.billing_mode === 'tiered_expr' && modelData.billing_expr && (
+              <>
+                <Divider margin={16} />
+                <div style={{ padding: '0 24px' }}>
+                  <DynamicPricingBreakdown
+                    billingExpr={modelData.billing_expr}
+                    t={t}
+                  />
+                </div>
+              </>
+            )}
+            <Divider margin={16} />
+            <div style={{ padding: '0 24px' }}>
+              <ModelPricingTable
+                modelData={modelData}
+                groupRatio={groupRatio}
+                currency={currency}
+                siteDisplayType={siteDisplayType}
+                tokenUnit={tokenUnit}
+                displayPrice={displayPrice}
+                showRatio={showRatio}
+                usableGroup={usableGroup}
+                autoGroups={autoGroups}
+                t={t}
+              />
+            </div>
+            <Divider margin={16} />
+          </>
+        )}
+      </div>
+    </SideSheet>
+  );
+};
+
+export default ModelDetailSideSheet;

web/classic/src/components/table/model-pricing/modal/PricingFilterModal.jsx

@@ -0,0 +1,67 @@
+/*
+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 { Modal } from '@douyinfe/semi-ui';
+import { resetPricingFilters } from '../../../../helpers/utils';
+import FilterModalContent from './components/FilterModalContent';
+import FilterModalFooter from './components/FilterModalFooter';
+
+const PricingFilterModal = ({ visible, onClose, sidebarProps, t }) => {
+  const handleResetFilters = () =>
+    resetPricingFilters({
+      handleChange: sidebarProps.handleChange,
+      setShowWithRecharge: sidebarProps.setShowWithRecharge,
+      setCurrency: sidebarProps.setCurrency,
+      setShowRatio: sidebarProps.setShowRatio,
+      setViewMode: sidebarProps.setViewMode,
+      setFilterGroup: sidebarProps.setFilterGroup,
+      setFilterQuotaType: sidebarProps.setFilterQuotaType,
+      setFilterEndpointType: sidebarProps.setFilterEndpointType,
+      setFilterVendor: sidebarProps.setFilterVendor,
+      setFilterTag: sidebarProps.setFilterTag,
+      setCurrentPage: sidebarProps.setCurrentPage,
+      setTokenUnit: sidebarProps.setTokenUnit,
+    });
+
+  const footer = (
+    <FilterModalFooter onReset={handleResetFilters} onConfirm={onClose} t={t} />
+  );
+
+  return (
+    <Modal
+      title={t('筛选')}
+      visible={visible}
+      onCancel={onClose}
+      footer={footer}
+      style={{ width: '100%', height: '100%', margin: 0 }}
+      bodyStyle={{
+        padding: 0,
+        height: 'calc(100vh - 160px)',
+        overflowY: 'auto',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+      }}
+    >
+      <FilterModalContent sidebarProps={sidebarProps} t={t} />
+    </Modal>
+  );
+};
+
+export default PricingFilterModal;

web/classic/src/components/table/model-pricing/modal/components/DynamicPricingBreakdown.jsx

@@ -0,0 +1,206 @@
+/*
+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, Tag, Table, Typography } from '@douyinfe/semi-ui';
+import { IconPriceTag } from '@douyinfe/semi-icons';
+import { parseTiersFromExpr, getCurrencyConfig } from '../../../../../helpers';
+import { BILLING_PRICING_VARS } from '../../../../../constants';
+import {
+  splitBillingExprAndRequestRules,
+  tryParseRequestRuleExpr,
+  SOURCE_TIME,
+  MATCH_RANGE,
+  MATCH_EQ,
+  MATCH_GTE,
+  MATCH_LT,
+  MATCH_CONTAINS,
+  MATCH_EXISTS,
+} from '../../../../../pages/Setting/Ratio/components/requestRuleExpr';
+
+const { Text } = Typography;
+
+const VAR_LABELS = { p: '输入', c: '输出' };
+const OP_LABELS = { '<': '<', '<=': '≤', '>': '>', '>=': '≥' };
+const TIME_FUNC_LABELS = { hour: '小时', minute: '分钟', weekday: '星期', month: '月份', day: '日期' };
+
+function formatTokenHint(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n) || n === 0) return '';
+  if (n >= 1000000) return `${(n / 1000000).toFixed(n % 1000000 === 0 ? 0 : 1)}M`;
+  if (n >= 1000) return `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}K`;
+  return String(n);
+}
+
+function formatConditionSummary(conditions, t) {
+  return conditions
+    .map((c) => {
+      if (c.var && c.op) {
+        const varLabel = t(VAR_LABELS[c.var] || c.var);
+        const hint = formatTokenHint(c.value);
+        return `${varLabel} ${OP_LABELS[c.op] || c.op} ${hint || c.value}`;
+      }
+      return '';
+    })
+    .filter(Boolean)
+    .join(' && ');
+}
+
+
+function describeCondition(cond, t) {
+  if (cond.source === SOURCE_TIME) {
+    const fn = t(TIME_FUNC_LABELS[cond.timeFunc] || cond.timeFunc);
+    const tz = cond.timezone || 'UTC';
+    if (cond.mode === MATCH_RANGE) {
+      return `${fn} ${cond.rangeStart}:00~${cond.rangeEnd}:00 (${tz})`;
+    }
+    const opMap = { [MATCH_EQ]: '=', [MATCH_GTE]: '≥', [MATCH_LT]: '<' };
+    return `${fn} ${opMap[cond.mode] || '='} ${cond.value} (${tz})`;
+  }
+  const src = cond.source === 'header' ? t('请求头') : t('请求参数');
+  const path = cond.path || '';
+  if (cond.mode === MATCH_EXISTS) return `${src} ${path} ${t('存在')}`;
+  if (cond.mode === MATCH_CONTAINS) return `${src} ${path} ${t('包含')} "${cond.value}"`;
+  const opMap = { eq: '=', gt: '>', gte: '≥', lt: '<', lte: '≤' };
+  return `${src} ${path} ${opMap[cond.mode] || '='} ${cond.value}`;
+}
+
+function describeGroup(group, t) {
+  const parts = (group.conditions || []).map((c) => describeCondition(c, t));
+  return parts.join(' && ');
+}
+
+export default function DynamicPricingBreakdown({ billingExpr, t }) {
+  const { symbol, rate } = getCurrencyConfig();
+  const { billingExpr: baseExpr, requestRuleExpr: ruleExpr } =
+    splitBillingExprAndRequestRules(billingExpr || '');
+
+  const tiers = parseTiersFromExpr(baseExpr);
+  const ruleGroups = tryParseRequestRuleExpr(ruleExpr || '');
+
+  const hasTiers = tiers && tiers.length > 0;
+  const hasRules = ruleGroups && ruleGroups.length > 0;
+
+  if (!hasTiers && !hasRules) {
+    return (
+      <div>
+        <div className='flex items-center mb-3'>
+          <Avatar size='small' color='amber' className='mr-2 shadow-md'>
+            <IconPriceTag size={16} />
+          </Avatar>
+          <Text className='text-lg font-medium'>{t('动态计费')}</Text>
+        </div>
+        <div className='text-sm text-gray-500'>
+          <code style={{ fontSize: 12, wordBreak: 'break-all' }}>{billingExpr}</code>
+        </div>
+      </div>
+    );
+  }
+
+  const priceFields = BILLING_PRICING_VARS.map((v) => [v.field, v.shortLabel]);
+
+  const tierColumns = [
+    {
+      title: t('档位'),
+      dataIndex: 'label',
+      render: (text, record) => (
+        <div>
+          <Tag color='blue' size='small'>{text || t('默认')}</Tag>
+          {record.condSummary && (
+            <div className='text-xs text-gray-500 mt-1'>{record.condSummary}</div>
+          )}
+        </div>
+      ),
+    },
+    ...priceFields
+      .filter(([field]) => hasTiers && tiers.some((tier) => tier[field] > 0))
+      .map(([field, label]) => ({
+        title: `${t(label)} (${symbol}/1M tokens)`,
+        dataIndex: field,
+        render: (v) => v > 0 ? <Text strong>{`${symbol}${(v * rate).toFixed(4)}`}</Text> : '-',
+      })),
+  ];
+
+  const tierData = hasTiers
+    ? tiers.map((tier, i) => ({
+        key: `tier-${i}`,
+        label: tier.label,
+        condSummary: formatConditionSummary(tier.conditions, t),
+        ...Object.fromEntries(priceFields.map(([field]) => [field, tier[field] || 0])),
+      }))
+    : [];
+
+  return (
+    <div>
+      <div className='flex items-center mb-4'>
+        <Avatar size='small' color='amber' className='mr-2 shadow-md'>
+          <IconPriceTag size={16} />
+        </Avatar>
+        <div>
+          <Text className='text-lg font-medium'>{t('动态计费')}</Text>
+          <div className='text-xs text-gray-600'>
+            {t('价格根据用量档位和请求条件动态调整')}
+          </div>
+        </div>
+      </div>
+
+      {hasTiers && (
+        <div style={{ marginBottom: 16 }}>
+          <Text strong className='text-sm' style={{ display: 'block', marginBottom: 8 }}>
+            {t('分档价格表')}
+          </Text>
+          <Table
+            dataSource={tierData}
+            columns={tierColumns}
+            pagination={false}
+            size='small'
+            bordered={false}
+            className='!rounded-lg'
+          />
+        </div>
+      )}
+
+      {hasRules && (
+        <div style={{ marginBottom: 16 }}>
+          <Text strong className='text-sm' style={{ display: 'block', marginBottom: 8 }}>
+            {t('条件乘数')}
+          </Text>
+          {ruleGroups.map((group, gi) => (
+            <div
+              key={`group-${gi}`}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '8px 12px',
+                borderRadius: 6,
+                background: 'var(--semi-color-fill-0)',
+                marginBottom: 4,
+              }}
+            >
+              <Text size='small'>{describeGroup(group, t)}</Text>
+              <Tag color='orange' size='small'>{group.multiplier}x</Tag>
+            </div>
+          ))}
+        </div>
+      )}
+
+    </div>
+  );
+}

web/classic/src/components/table/model-pricing/modal/components/FilterModalContent.jsx

@@ -0,0 +1,140 @@
+/*
+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 PricingDisplaySettings from '../../filter/PricingDisplaySettings';
+import PricingGroups from '../../filter/PricingGroups';
+import PricingQuotaTypes from '../../filter/PricingQuotaTypes';
+import PricingEndpointTypes from '../../filter/PricingEndpointTypes';
+import PricingVendors from '../../filter/PricingVendors';
+import PricingTags from '../../filter/PricingTags';
+import { usePricingFilterCounts } from '../../../../../hooks/model-pricing/usePricingFilterCounts';
+
+const FilterModalContent = ({ sidebarProps, t }) => {
+  const {
+    showWithRecharge,
+    setShowWithRecharge,
+    currency,
+    setCurrency,
+    siteDisplayType,
+    handleChange,
+    setActiveKey,
+    showRatio,
+    setShowRatio,
+    viewMode,
+    setViewMode,
+    filterGroup,
+    setFilterGroup,
+    filterQuotaType,
+    setFilterQuotaType,
+    filterEndpointType,
+    setFilterEndpointType,
+    filterVendor,
+    setFilterVendor,
+    filterTag,
+    setFilterTag,
+    tokenUnit,
+    setTokenUnit,
+    loading,
+    ...categoryProps
+  } = sidebarProps;
+
+  const {
+    quotaTypeModels,
+    endpointTypeModels,
+    vendorModels,
+    tagModels,
+    groupCountModels,
+  } = usePricingFilterCounts({
+    models: categoryProps.models,
+    filterGroup,
+    filterQuotaType,
+    filterEndpointType,
+    filterVendor,
+    filterTag,
+    searchValue: sidebarProps.searchValue,
+  });
+
+  return (
+    <>
+      <PricingDisplaySettings
+        showWithRecharge={showWithRecharge}
+        setShowWithRecharge={setShowWithRecharge}
+        currency={currency}
+        setCurrency={setCurrency}
+        siteDisplayType={siteDisplayType}
+        showRatio={showRatio}
+        setShowRatio={setShowRatio}
+        viewMode={viewMode}
+        setViewMode={setViewMode}
+        tokenUnit={tokenUnit}
+        setTokenUnit={setTokenUnit}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingVendors
+        filterVendor={filterVendor}
+        setFilterVendor={setFilterVendor}
+        models={vendorModels}
+        allModels={categoryProps.models}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingGroups
+        filterGroup={filterGroup}
+        setFilterGroup={setFilterGroup}
+        usableGroup={categoryProps.usableGroup}
+        groupRatio={categoryProps.groupRatio}
+        models={groupCountModels}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingQuotaTypes
+        filterQuotaType={filterQuotaType}
+        setFilterQuotaType={setFilterQuotaType}
+        models={quotaTypeModels}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingTags
+        filterTag={filterTag}
+        setFilterTag={setFilterTag}
+        models={tagModels}
+        allModels={categoryProps.models}
+        loading={loading}
+        t={t}
+      />
+
+      <PricingEndpointTypes
+        filterEndpointType={filterEndpointType}
+        setFilterEndpointType={setFilterEndpointType}
+        models={endpointTypeModels}
+        allModels={categoryProps.models}
+        loading={loading}
+        t={t}
+      />
+    </>
+  );
+};
+
+export default FilterModalContent;

web/classic/src/components/table/model-pricing/modal/components/FilterModalFooter.jsx

@@ -0,0 +1,36 @@
+/*
+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 } from '@douyinfe/semi-ui';
+
+const FilterModalFooter = ({ onReset, onConfirm, t }) => {
+  return (
+    <div className='flex justify-end'>
+      <Button theme='outline' type='tertiary' onClick={onReset}>
+        {t('重置')}
+      </Button>
+      <Button theme='solid' type='primary' onClick={onConfirm}>
+        {t('确定')}
+      </Button>
+    </div>
+  );
+};
+
+export default FilterModalFooter;

web/classic/src/components/table/model-pricing/modal/components/ModelBasicInfo.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 from 'react';
+import { Avatar, Typography, Tag, Space } from '@douyinfe/semi-ui';
+import { IconInfoCircle } from '@douyinfe/semi-icons';
+import { stringToColor } from '../../../../../helpers';
+
+const { Text } = Typography;
+
+const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
+  // 获取模型描述（使用后端真实数据）
+  const getModelDescription = () => {
+    if (!modelData) return t('暂无模型描述');
+
+    // 优先使用后端提供的描述
+    if (modelData.description) {
+      return modelData.description;
+    }
+
+    // 如果没有描述但有供应商描述，显示供应商信息
+    if (modelData.vendor_description) {
+      return t('供应商信息：') + modelData.vendor_description;
+    }
+
+    return t('暂无模型描述');
+  };
+
+  // 获取模型标签
+  const getModelTags = () => {
+    const tags = [];
+
+    if (modelData?.tags) {
+      const customTags = modelData.tags.split(',').filter((tag) => tag.trim());
+      customTags.forEach((tag) => {
+        const tagText = tag.trim();
+        tags.push({ text: tagText, color: stringToColor(tagText) });
+      });
+    }
+
+    return tags;
+  };
+
+  return (
+    <div>
+      <div className='flex items-center mb-4'>
+        <Avatar size='small' color='blue' className='mr-2 shadow-md'>
+          <IconInfoCircle size={16} />
+        </Avatar>
+        <div>
+          <Text className='text-lg font-medium'>{t('基本信息')}</Text>
+          <div className='text-xs text-gray-600'>
+            {t('模型的详细描述和基本特性')}
+          </div>
+        </div>
+      </div>
+      <div className='text-gray-600'>
+        <p className='mb-4'>{getModelDescription()}</p>
+        {getModelTags().length > 0 && (
+          <Space wrap>
+            {getModelTags().map((tag, index) => (
+              <Tag key={index} color={tag.color} shape='circle' size='small'>
+                {tag.text}
+              </Tag>
+            ))}
+          </Space>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModelBasicInfo;

web/classic/src/components/table/model-pricing/modal/components/ModelEndpoints.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 from 'react';
+import { Avatar, Typography, Badge } from '@douyinfe/semi-ui';
+import { IconLink } from '@douyinfe/semi-icons';
+
+const { Text } = Typography;
+
+const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
+  const renderAPIEndpoints = () => {
+    if (!modelData) return null;
+
+    const mapping = endpointMap;
+    const types = modelData.supported_endpoint_types || [];
+
+    return types.map((type) => {
+      const info = mapping[type] || {};
+      let path = info.path || '';
+      // 如果路径中包含 {model} 占位符，替换为真实模型名称
+      if (path.includes('{model}')) {
+        const modelName = modelData.model_name || modelData.modelName || '';
+        path = path.replaceAll('{model}', modelName);
+      }
+      const method = info.method || 'POST';
+      return (
+        <div
+          key={type}
+          className='flex justify-between border-b border-dashed last:border-0 py-2 last:pb-0'
+          style={{ borderColor: 'var(--semi-color-border)' }}
+        >
+          <span className='flex items-center pr-5'>
+            <Badge dot type='success' className='mr-2' />
+            {type}
+            {path && '：'}
+            {path && (
+              <span className='text-gray-500 md:ml-1 break-all'>{path}</span>
+            )}
+          </span>
+          {path && (
+            <span className='text-gray-500 text-xs md:ml-1'>{method}</span>
+          )}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div>
+      <div className='flex items-center mb-4'>
+        <Avatar size='small' color='purple' className='mr-2 shadow-md'>
+          <IconLink size={16} />
+        </Avatar>
+        <div>
+          <Text className='text-lg font-medium'>{t('API端点')}</Text>
+          <div className='text-xs text-gray-600'>
+            {t('模型支持的接口端点信息')}
+          </div>
+        </div>
+      </div>
+      {renderAPIEndpoints()}
+    </div>
+  );
+};
+
+export default ModelEndpoints;

web/classic/src/components/table/model-pricing/modal/components/ModelHeader.jsx

@@ -0,0 +1,96 @@
+/*
+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 { Typography, Toast, Avatar } from '@douyinfe/semi-ui';
+import { getLobeHubIcon } from '../../../../../helpers';
+
+const { Paragraph } = Typography;
+
+const CARD_STYLES = {
+  container:
+    'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md',
+  icon: 'w-8 h-8 flex items-center justify-center',
+};
+
+const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
+  // 获取模型图标（优先模型图标，其次供应商图标）
+  const getModelIcon = () => {
+    // 1) 优先使用模型自定义图标
+    if (modelData?.icon) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <div className={CARD_STYLES.icon}>
+            {getLobeHubIcon(modelData.icon, 32)}
+          </div>
+        </div>
+      );
+    }
+    // 2) 退化为供应商图标
+    if (modelData?.vendor_icon) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <div className={CARD_STYLES.icon}>
+            {getLobeHubIcon(modelData.vendor_icon, 32)}
+          </div>
+        </div>
+      );
+    }
+
+    // 如果没有供应商图标，使用模型名称的前两个字符
+    const avatarText = modelData?.model_name?.slice(0, 2).toUpperCase() || 'AI';
+    return (
+      <div className={CARD_STYLES.container}>
+        <Avatar
+          size='large'
+          style={{
+            width: 48,
+            height: 48,
+            borderRadius: 16,
+            fontSize: 16,
+            fontWeight: 'bold',
+          }}
+        >
+          {avatarText}
+        </Avatar>
+      </div>
+    );
+  };
+
+  return (
+    <div className='flex items-center'>
+      {getModelIcon()}
+      <div className='ml-3 font-normal'>
+        <Paragraph
+          className='!mb-0 !text-lg !font-medium'
+          copyable={{
+            content: modelData?.model_name || '',
+            onCopy: () => Toast.success({ content: t('已复制模型名称') }),
+          }}
+        >
+          <span className='truncate max-w-60 font-bold'>
+            {modelData?.model_name || t('未知模型')}
+          </span>
+        </Paragraph>
+      </div>
+    </div>
+  );
+};
+
+export default ModelHeader;

web/classic/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx

@@ -0,0 +1,201 @@
+/*
+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, Typography, Table, Tag } from '@douyinfe/semi-ui';
+import { IconCoinMoneyStroked } from '@douyinfe/semi-icons';
+import { calculateModelPrice, getModelPriceItems } from '../../../../../helpers';
+
+const { Text } = Typography;
+
+const ModelPricingTable = ({
+  modelData,
+  groupRatio,
+  currency,
+  siteDisplayType,
+  tokenUnit,
+  displayPrice,
+  showRatio,
+  usableGroup,
+  autoGroups = [],
+  t,
+}) => {
+  const modelEnableGroups = Array.isArray(modelData?.enable_groups)
+    ? modelData.enable_groups
+    : [];
+  const autoChain = autoGroups.filter((g) => modelEnableGroups.includes(g));
+  const renderGroupPriceTable = () => {
+    // 仅展示模型可用的分组：模型 enable_groups 与用户可用分组的交集
+
+    const availableGroups = Object.keys(usableGroup || {})
+      .filter((g) => g !== '')
+      .filter((g) => g !== 'auto')
+      .filter((g) => modelEnableGroups.includes(g));
+
+    // 准备表格数据
+    const tableData = availableGroups.map((group) => {
+      const priceData = modelData
+        ? calculateModelPrice({
+            record: modelData,
+            selectedGroup: group,
+            groupRatio,
+            tokenUnit,
+            displayPrice,
+            currency,
+            quotaDisplayType: siteDisplayType,
+          })
+        : { inputPrice: '-', outputPrice: '-', price: '-' };
+
+      // 获取分组倍率
+      const groupRatioValue =
+        groupRatio && groupRatio[group] ? groupRatio[group] : 1;
+
+      return {
+        key: group,
+        group: group,
+        ratio: groupRatioValue,
+        billingType:
+          modelData?.billing_mode === 'tiered_expr'
+            ? t('动态计费')
+            : modelData?.quota_type === 0
+              ? t('按量计费')
+              : modelData?.quota_type === 1
+                ? t('按次计费')
+                : '-',
+        priceItems: getModelPriceItems(priceData, t, siteDisplayType),
+      };
+    });
+
+    // 定义表格列
+    const columns = [
+      {
+        title: t('分组'),
+        dataIndex: 'group',
+        render: (text) => (
+          <Tag color='white' size='small' shape='circle'>
+            {text}
+            {t('分组')}
+          </Tag>
+        ),
+      },
+    ];
+
+    const isDynamic = modelData?.billing_mode === 'tiered_expr';
+
+    // 动态计费时始终显示倍率列，否则根据设置
+    if (showRatio || isDynamic) {
+      columns.push({
+        title: t('分组倍率'),
+        dataIndex: 'ratio',
+        render: (text) => (
+          <Tag color='blue' size='small' shape='circle'>
+            {text}x
+          </Tag>
+        ),
+      });
+    }
+
+    columns.push({
+      title: t('计费类型'),
+      dataIndex: 'billingType',
+      render: (text) => {
+        let color = 'white';
+        if (text === t('按量计费')) color = 'violet';
+        else if (text === t('按次计费')) color = 'teal';
+        else if (text === t('动态计费')) color = 'amber';
+        return (
+          <Tag color={color} size='small' shape='circle'>
+            {text || '-'}
+          </Tag>
+        );
+      },
+    });
+
+    columns.push({
+      title: siteDisplayType === 'TOKENS' ? t('计费摘要') : t('价格摘要'),
+      dataIndex: 'priceItems',
+      render: (items) => {
+        if (items.length === 1 && items[0].isDynamic) {
+          return (
+            <Text type='tertiary' size='small'>
+              {t('见上方动态计费详情')}
+            </Text>
+          );
+        }
+        return (
+          <div className='space-y-1'>
+            {items.map((item) => (
+              <div key={item.key}>
+                <div className='font-semibold text-orange-600'>
+                  {item.label} {item.value}
+                </div>
+                <div className='text-xs text-gray-500'>{item.suffix}</div>
+              </div>
+            ))}
+          </div>
+        );
+      },
+    });
+
+    return (
+      <Table
+        dataSource={tableData}
+        columns={columns}
+        pagination={false}
+        size='small'
+        bordered={false}
+        className='!rounded-lg'
+      />
+    );
+  };
+
+  return (
+    <div>
+      <div className='flex items-center mb-4'>
+        <Avatar size='small' color='orange' className='mr-2 shadow-md'>
+          <IconCoinMoneyStroked size={16} />
+        </Avatar>
+        <div>
+          <Text className='text-lg font-medium'>{t('分组价格')}</Text>
+          <div className='text-xs text-gray-600'>
+            {t('不同用户分组的价格信息')}
+          </div>
+        </div>
+      </div>
+      {autoChain.length > 0 && (
+        <div className='flex flex-wrap items-center gap-1 mb-4'>
+          <span className='text-sm text-gray-600'>{t('auto分组调用链路')}</span>
+          <span className='text-sm'>→</span>
+          {autoChain.map((g, idx) => (
+            <React.Fragment key={g}>
+              <Tag color='white' size='small' shape='circle'>
+                {g}
+                {t('分组')}
+              </Tag>
+              {idx < autoChain.length - 1 && <span className='text-sm'>→</span>}
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+      {renderGroupPriceTable()}
+    </div>
+  );
+};
+
+export default ModelPricingTable;

web/classic/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx

@@ -0,0 +1,144 @@
+/*
+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 { Card, Skeleton } from '@douyinfe/semi-ui';
+
+const PricingCardSkeleton = ({
+  skeletonCount = 100,
+  rowSelection = false,
+  showRatio = false,
+}) => {
+  const placeholder = (
+    <div className='px-2 pt-2'>
+      <div className='grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4'>
+        {Array.from({ length: skeletonCount }).map((_, index) => (
+          <Card
+            key={index}
+            className='!rounded-2xl border border-gray-200'
+            bodyStyle={{ padding: '24px' }}
+          >
+            {/* 头部：图标 + 模型名称 + 操作按钮 */}
+            <div className='flex items-start justify-between mb-3'>
+              <div className='flex items-start space-x-3 flex-1 min-w-0'>
+                {/* 模型图标骨架 */}
+                <div className='w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm'>
+                  <Skeleton.Avatar
+                    size='large'
+                    style={{ width: 48, height: 48, borderRadius: 16 }}
+                  />
+                </div>
+                {/* 模型名称和价格区域 */}
+                <div className='flex-1 min-w-0'>
+                  {/* 模型名称骨架 */}
+                  <Skeleton.Title
+                    style={{
+                      width: `${120 + (index % 3) * 30}px`,
+                      height: 20,
+                      marginBottom: 8,
+                    }}
+                  />
+                  {/* 价格信息骨架 */}
+                  <Skeleton.Title
+                    style={{
+                      width: `${160 + (index % 4) * 20}px`,
+                      height: 20,
+                      marginBottom: 0,
+                    }}
+                  />
+                </div>
+              </div>
+
+              <div className='flex items-center space-x-2 ml-3'>
+                {/* 复制按钮骨架 */}
+                <Skeleton.Button
+                  size='small'
+                  style={{ width: 16, height: 16, borderRadius: 4 }}
+                />
+                {/* 勾选框骨架 */}
+                {rowSelection && (
+                  <Skeleton.Button
+                    size='small'
+                    style={{ width: 16, height: 16, borderRadius: 2 }}
+                  />
+                )}
+              </div>
+            </div>
+
+            {/* 模型描述骨架 */}
+            <div className='mb-4'>
+              <Skeleton.Paragraph
+                rows={2}
+                style={{ marginBottom: 0 }}
+                title={false}
+              />
+            </div>
+
+            {/* 标签区域骨架 */}
+            <div className='flex flex-wrap gap-2'>
+              {Array.from({ length: 2 + (index % 3) }).map((_, tagIndex) => (
+                <Skeleton.Button
+                  key={tagIndex}
+                  size='small'
+                  style={{
+                    width: 64,
+                    height: 18,
+                    borderRadius: 10,
+                  }}
+                />
+              ))}
+            </div>
+
+            {/* 倍率信息骨架（可选） */}
+            {showRatio && (
+              <div className='mt-4 pt-3 border-t border-gray-100'>
+                <div className='flex items-center space-x-1 mb-2'>
+                  <Skeleton.Title
+                    style={{ width: 60, height: 12, marginBottom: 0 }}
+                  />
+                  <Skeleton.Button
+                    size='small'
+                    style={{ width: 14, height: 14, borderRadius: 7 }}
+                  />
+                </div>
+                <div className='grid grid-cols-3 gap-2'>
+                  {Array.from({ length: 3 }).map((_, ratioIndex) => (
+                    <Skeleton.Title
+                      key={ratioIndex}
+                      style={{ width: '100%', height: 12, marginBottom: 0 }}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </Card>
+        ))}
+      </div>
+
+      {/* 分页骨架 */}
+      <div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
+        <Skeleton.Button style={{ width: 300, height: 32 }} />
+      </div>
+    </div>
+  );
+
+  return <Skeleton loading={true} active placeholder={placeholder}></Skeleton>;
+};
+
+export default PricingCardSkeleton;

web/classic/src/components/table/model-pricing/view/card/PricingCardView.jsx

@@ -0,0 +1,389 @@
+/*
+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 {
+  Card,
+  Tag,
+  Tooltip,
+  Checkbox,
+  Empty,
+  Pagination,
+  Button,
+  Avatar,
+} from '@douyinfe/semi-ui';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
+import { Copy } from 'lucide-react';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import {
+  stringToColor,
+  calculateModelPrice,
+  formatPriceInfo,
+  formatDynamicPriceSummary,
+  getLobeHubIcon,
+} from '../../../../../helpers';
+import PricingCardSkeleton from './PricingCardSkeleton';
+import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
+import { renderLimitedItems } from '../../../../common/ui/RenderUtils';
+import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
+
+const CARD_STYLES = {
+  container:
+    'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md',
+  icon: 'w-8 h-8 flex items-center justify-center',
+  selected: 'border-blue-500 bg-blue-50',
+  default: 'border-gray-200 hover:border-gray-300',
+};
+
+const PricingCardView = ({
+  filteredModels,
+  loading,
+  rowSelection,
+  pageSize,
+  setPageSize,
+  currentPage,
+  setCurrentPage,
+  selectedGroup,
+  groupRatio,
+  copyText,
+  setModalImageUrl,
+  setIsModalOpenurl,
+  currency,
+  siteDisplayType,
+  tokenUnit,
+  displayPrice,
+  showRatio,
+  t,
+  selectedRowKeys = [],
+  setSelectedRowKeys,
+  openModelDetail,
+}) => {
+  const showSkeleton = useMinimumLoadingTime(loading);
+  const startIndex = (currentPage - 1) * pageSize;
+  const paginatedModels = filteredModels.slice(
+    startIndex,
+    startIndex + pageSize,
+  );
+  const getModelKey = (model) => model.key ?? model.model_name ?? model.id;
+  const isMobile = useIsMobile();
+
+  const handleCheckboxChange = (model, checked) => {
+    if (!setSelectedRowKeys) return;
+    const modelKey = getModelKey(model);
+    const newKeys = checked
+      ? Array.from(new Set([...selectedRowKeys, modelKey]))
+      : selectedRowKeys.filter((key) => key !== modelKey);
+    setSelectedRowKeys(newKeys);
+    rowSelection?.onChange?.(newKeys, null);
+  };
+
+  // 获取模型图标
+  const getModelIcon = (model) => {
+    if (!model || !model.model_name) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <Avatar size='large'>?</Avatar>
+        </div>
+      );
+    }
+    // 1) 优先使用模型自定义图标
+    if (model.icon) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <div className={CARD_STYLES.icon}>
+            {getLobeHubIcon(model.icon, 32)}
+          </div>
+        </div>
+      );
+    }
+    // 2) 退化为供应商图标
+    if (model.vendor_icon) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <div className={CARD_STYLES.icon}>
+            {getLobeHubIcon(model.vendor_icon, 32)}
+          </div>
+        </div>
+      );
+    }
+
+    // 如果没有供应商图标，使用模型名称生成头像
+
+    const avatarText = model.model_name.slice(0, 2).toUpperCase();
+    return (
+      <div className={CARD_STYLES.container}>
+        <Avatar
+          size='large'
+          style={{
+            width: 48,
+            height: 48,
+            borderRadius: 16,
+            fontSize: 16,
+            fontWeight: 'bold',
+          }}
+        >
+          {avatarText}
+        </Avatar>
+      </div>
+    );
+  };
+
+  // 获取模型描述
+  const getModelDescription = (record) => {
+    return record.description || '';
+  };
+
+  // 渲染标签
+  const renderTags = (record) => {
+    // 计费类型标签（左边）
+    let billingTag = (
+      <Tag key='billing' shape='circle' color='white' size='small'>
+        -
+      </Tag>
+    );
+    if (record.quota_type === 1) {
+      billingTag = (
+        <Tag key='billing' shape='circle' color='teal' size='small'>
+          {t('按次计费')}
+        </Tag>
+      );
+    } else if (record.quota_type === 0) {
+      billingTag = (
+        <Tag key='billing' shape='circle' color='violet' size='small'>
+          {t('按量计费')}
+        </Tag>
+      );
+    }
+
+    // 自定义标签（右边）
+    const customTags = [];
+    if (record.tags) {
+      const tagArr = record.tags.split(',').filter(Boolean);
+      tagArr.forEach((tg, idx) => {
+        customTags.push(
+          <Tag
+            key={`custom-${idx}`}
+            shape='circle'
+            color={stringToColor(tg)}
+            size='small'
+          >
+            {tg}
+          </Tag>,
+        );
+      });
+    }
+
+    return (
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-2'>{billingTag}</div>
+        <div className='flex items-center gap-1'>
+          {customTags.length > 0 &&
+            renderLimitedItems({
+              items: customTags.map((tag, idx) => ({
+                key: `custom-${idx}`,
+                element: tag,
+              })),
+              renderItem: (item, idx) => item.element,
+              maxDisplay: 3,
+            })}
+        </div>
+      </div>
+    );
+  };
+
+  // 显示骨架屏
+  if (showSkeleton) {
+    return (
+      <PricingCardSkeleton
+        rowSelection={!!rowSelection}
+        showRatio={showRatio}
+      />
+    );
+  }
+
+  if (!filteredModels || filteredModels.length === 0) {
+    return (
+      <div className='flex justify-center items-center py-20'>
+        <Empty
+          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+          darkModeImage={
+            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+          }
+          description={t('搜索无结果')}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className='px-2 pt-2'>
+      <div className='grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4'>
+        {paginatedModels.map((model, index) => {
+          const modelKey = getModelKey(model);
+          const isSelected = selectedRowKeys.includes(modelKey);
+
+          const priceData = calculateModelPrice({
+            record: model,
+            selectedGroup,
+            groupRatio,
+            tokenUnit,
+            displayPrice,
+            currency,
+            quotaDisplayType: siteDisplayType,
+          });
+
+          return (
+            <Card
+              key={modelKey || index}
+              className={`!rounded-2xl transition-all duration-200 hover:shadow-lg border cursor-pointer ${isSelected ? CARD_STYLES.selected : CARD_STYLES.default}`}
+              bodyStyle={{ height: '100%' }}
+              onClick={() => openModelDetail && openModelDetail(model)}
+            >
+              <div className='flex flex-col h-full'>
+                {/* 头部：图标 + 模型名称 + 操作按钮 */}
+                <div className='flex items-start justify-between mb-3'>
+                  <div className='flex items-start space-x-3 flex-1 min-w-0'>
+                    {getModelIcon(model)}
+                    <div className='flex-1 min-w-0'>
+                      <h3 className='text-lg font-bold text-gray-900 truncate'>
+                        {model.model_name}
+                      </h3>
+                      <div className='flex flex-col gap-1 text-xs mt-1'>
+                        {priceData.isDynamicPricing ? (
+                          formatDynamicPriceSummary(priceData.billingExpr, t, priceData.usedGroupRatio)
+                        ) : (
+                          formatPriceInfo(priceData, t, siteDisplayType)
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className='flex items-center space-x-2 ml-3'>
+                    {/* 复制按钮 */}
+                    <Button
+                      size='small'
+                      theme='outline'
+                      type='tertiary'
+                      icon={<Copy size={12} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        copyText(model.model_name);
+                      }}
+                    />
+
+                    {/* 选择框 */}
+                    {rowSelection && (
+                      <Checkbox
+                        checked={isSelected}
+                        onChange={(e) => {
+                          e.stopPropagation();
+                          handleCheckboxChange(model, e.target.checked);
+                        }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 模型描述 - 占据剩余空间 */}
+                <div className='flex-1 mb-4'>
+                  <p
+                    className='text-xs line-clamp-2 leading-relaxed'
+                    style={{ color: 'var(--semi-color-text-2)' }}
+                  >
+                    {getModelDescription(model)}
+                  </p>
+                </div>
+
+                {/* 底部区域 */}
+                <div className='mt-auto'>
+                  {/* 标签区域 */}
+                  {renderTags(model)}
+
+                  {/* 倍率信息（可选） */}
+                  {showRatio && (
+                    <div className='pt-3'>
+                      <div className='flex items-center space-x-1 mb-2'>
+                        <span className='text-xs font-medium text-gray-700'>
+                          {t('倍率信息')}
+                        </span>
+                        <Tooltip
+                          content={t('倍率是为了方便换算不同价格的模型')}
+                        >
+                          <IconHelpCircle
+                            className='text-blue-500 cursor-pointer'
+                            size='small'
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setModalImageUrl('/ratio.png');
+                              setIsModalOpenurl(true);
+                            }}
+                          />
+                        </Tooltip>
+                      </div>
+                      <div className='grid grid-cols-3 gap-2 text-xs text-gray-600'>
+                        <div>
+                          {t('模型')}:{' '}
+                          {model.quota_type === 0 ? model.model_ratio : t('无')}
+                        </div>
+                        <div>
+                          {t('补全')}:{' '}
+                          {model.quota_type === 0
+                            ? parseFloat(model.completion_ratio.toFixed(3))
+                            : t('无')}
+                        </div>
+                        <div>
+                          {t('分组')}: {priceData?.usedGroupRatio ?? '-'}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* 分页 */}
+      {filteredModels.length > 0 && (
+        <div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
+          <Pagination
+            currentPage={currentPage}
+            pageSize={pageSize}
+            total={filteredModels.length}
+            showSizeChanger={true}
+            pageSizeOptions={[10, 20, 50, 100]}
+            size={isMobile ? 'small' : 'default'}
+            showQuickJumper={isMobile}
+            onPageChange={(page) => setCurrentPage(page)}
+            onPageSizeChange={(size) => {
+              setPageSize(size);
+              setCurrentPage(1);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PricingCardView;

web/classic/src/components/table/model-pricing/view/table/PricingTable.jsx

@@ -0,0 +1,147 @@
+/*
+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, { useMemo } from 'react';
+import { Card, Table, Empty } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import { getPricingTableColumns } from './PricingTableColumns';
+
+const PricingTable = ({
+  filteredModels,
+  loading,
+  rowSelection,
+  pageSize,
+  setPageSize,
+  selectedGroup,
+  groupRatio,
+  copyText,
+  setModalImageUrl,
+  setIsModalOpenurl,
+  currency,
+  siteDisplayType,
+  tokenUnit,
+  displayPrice,
+  searchValue,
+  showRatio,
+  compactMode = false,
+  openModelDetail,
+  t,
+}) => {
+  const columns = useMemo(() => {
+    return getPricingTableColumns({
+      t,
+      selectedGroup,
+      groupRatio,
+      copyText,
+      setModalImageUrl,
+      setIsModalOpenurl,
+      currency,
+      siteDisplayType,
+      tokenUnit,
+      displayPrice,
+      showRatio,
+    });
+  }, [
+    t,
+    selectedGroup,
+    groupRatio,
+    copyText,
+    setModalImageUrl,
+    setIsModalOpenurl,
+    currency,
+    siteDisplayType,
+    tokenUnit,
+    displayPrice,
+    showRatio,
+  ]);
+
+  // 更新列定义中的 searchValue
+  const processedColumns = useMemo(() => {
+    const cols = columns.map((column) => {
+      if (column.dataIndex === 'model_name') {
+        return {
+          ...column,
+          filteredValue: searchValue ? [searchValue] : [],
+        };
+      }
+      return column;
+    });
+
+    // Remove fixed property when in compact mode (mobile view)
+    if (compactMode) {
+      return cols.map(({ fixed, ...rest }) => rest);
+    }
+    return cols;
+  }, [columns, searchValue, compactMode]);
+
+  const ModelTable = useMemo(
+    () => (
+      <Card className='!rounded-xl overflow-hidden' bordered={false}>
+        <Table
+          columns={processedColumns}
+          dataSource={filteredModels}
+          loading={loading}
+          rowSelection={rowSelection}
+          scroll={compactMode ? undefined : { x: 'max-content' }}
+          onRow={(record) => ({
+            onClick: () => openModelDetail && openModelDetail(record),
+            style: { cursor: 'pointer' },
+          })}
+          empty={
+            <Empty
+              image={
+                <IllustrationNoResult style={{ width: 150, height: 150 }} />
+              }
+              darkModeImage={
+                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+              }
+              description={t('搜索无结果')}
+              style={{ padding: 30 }}
+            />
+          }
+          pagination={{
+            defaultPageSize: 20,
+            pageSize: pageSize,
+            showSizeChanger: true,
+            pageSizeOptions: [10, 20, 50, 100],
+            onPageSizeChange: (size) => setPageSize(size),
+          }}
+        />
+      </Card>
+    ),
+    [
+      filteredModels,
+      loading,
+      processedColumns,
+      rowSelection,
+      pageSize,
+      setPageSize,
+      openModelDetail,
+      t,
+      compactMode,
+    ],
+  );
+
+  return ModelTable;
+};
+
+export default PricingTable;

web/classic/src/components/table/model-pricing/view/table/PricingTableColumns.jsx

@@ -0,0 +1,259 @@
+/*
+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 { Tag, Space, Tooltip } from '@douyinfe/semi-ui';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
+import {
+  renderModelTag,
+  stringToColor,
+  calculateModelPrice,
+  getModelPriceItems,
+  getLobeHubIcon,
+} from '../../../../../helpers';
+import {
+  renderLimitedItems,
+  renderDescription,
+} from '../../../../common/ui/RenderUtils';
+import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
+
+function renderQuotaType(type, t) {
+  switch (type) {
+    case 1:
+      return (
+        <Tag color='teal' shape='circle'>
+          {t('按次计费')}
+        </Tag>
+      );
+    case 0:
+      return (
+        <Tag color='violet' shape='circle'>
+          {t('按量计费')}
+        </Tag>
+      );
+    default:
+      return t('未知');
+  }
+}
+
+// Render vendor name
+const renderVendor = (vendorName, vendorIcon, t) => {
+  if (!vendorName) return '-';
+  return (
+    <Tag
+      color='white'
+      shape='circle'
+      prefixIcon={getLobeHubIcon(vendorIcon || 'Layers', 14)}
+    >
+      {vendorName}
+    </Tag>
+  );
+};
+
+// Render tags list using RenderUtils
+const renderTags = (text) => {
+  if (!text) return '-';
+  const tagsArr = text.split(',').filter((tag) => tag.trim());
+  return renderLimitedItems({
+    items: tagsArr,
+    renderItem: (tag, idx) => (
+      <Tag
+        key={idx}
+        color={stringToColor(tag.trim())}
+        shape='circle'
+        size='small'
+      >
+        {tag.trim()}
+      </Tag>
+    ),
+    maxDisplay: 3,
+  });
+};
+
+function renderSupportedEndpoints(endpoints) {
+  if (!endpoints || endpoints.length === 0) {
+    return null;
+  }
+  return (
+    <Space wrap>
+      {endpoints.map((endpoint, idx) => (
+        <Tag key={endpoint} color={stringToColor(endpoint)} shape='circle'>
+          {endpoint}
+        </Tag>
+      ))}
+    </Space>
+  );
+}
+
+export const getPricingTableColumns = ({
+  t,
+  selectedGroup,
+  groupRatio,
+  copyText,
+  setModalImageUrl,
+  setIsModalOpenurl,
+  currency,
+  siteDisplayType,
+  tokenUnit,
+  displayPrice,
+  showRatio,
+}) => {
+  const isMobile = useIsMobile();
+  const priceDataCache = new WeakMap();
+
+  const getPriceData = (record) => {
+    let cache = priceDataCache.get(record);
+    if (!cache) {
+      cache = calculateModelPrice({
+        record,
+        selectedGroup,
+        groupRatio,
+        tokenUnit,
+        displayPrice,
+        currency,
+        quotaDisplayType: siteDisplayType,
+      });
+      priceDataCache.set(record, cache);
+    }
+    return cache;
+  };
+
+  const endpointColumn = {
+    title: t('可用端点类型'),
+    dataIndex: 'supported_endpoint_types',
+    render: (text, record, index) => {
+      return renderSupportedEndpoints(text);
+    },
+  };
+
+  const modelNameColumn = {
+    title: t('模型名称'),
+    dataIndex: 'model_name',
+    render: (text, record, index) => {
+      return renderModelTag(text, {
+        onClick: () => {
+          copyText(text);
+        },
+      });
+    },
+    onFilter: (value, record) =>
+      record.model_name.toLowerCase().includes(value.toLowerCase()),
+  };
+
+  const quotaColumn = {
+    title: t('计费类型'),
+    dataIndex: 'quota_type',
+    render: (text, record, index) => {
+      return renderQuotaType(parseInt(text), t);
+    },
+    sorter: (a, b) => a.quota_type - b.quota_type,
+  };
+
+  const descriptionColumn = {
+    title: t('描述'),
+    dataIndex: 'description',
+    render: (text) => renderDescription(text, 200),
+  };
+
+  const tagsColumn = {
+    title: t('标签'),
+    dataIndex: 'tags',
+    render: renderTags,
+  };
+
+  const vendorColumn = {
+    title: t('供应商'),
+    dataIndex: 'vendor_name',
+    render: (text, record) => renderVendor(text, record.vendor_icon, t),
+  };
+
+  const baseColumns = [
+    modelNameColumn,
+    vendorColumn,
+    descriptionColumn,
+    tagsColumn,
+    quotaColumn,
+  ];
+
+  const ratioColumn = {
+    title: () => (
+      <div className='flex items-center space-x-1'>
+        <span>{t('倍率')}</span>
+        <Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
+          <IconHelpCircle
+            className='text-blue-500 cursor-pointer'
+            onClick={() => {
+              setModalImageUrl('/ratio.png');
+              setIsModalOpenurl(true);
+            }}
+          />
+        </Tooltip>
+      </div>
+    ),
+    dataIndex: 'model_ratio',
+    render: (text, record, index) => {
+      const completionRatio = parseFloat(record.completion_ratio.toFixed(3));
+      const priceData = getPriceData(record);
+
+      return (
+        <div className='space-y-1'>
+          <div className='text-gray-700'>
+            {t('模型倍率')}：{record.quota_type === 0 ? text : t('无')}
+          </div>
+          <div className='text-gray-700'>
+            {t('补全倍率')}：
+            {record.quota_type === 0 ? completionRatio : t('无')}
+          </div>
+          <div className='text-gray-700'>
+            {t('分组倍率')}：{priceData?.usedGroupRatio ?? '-'}
+          </div>
+        </div>
+      );
+    },
+  };
+
+  const priceColumn = {
+    title: siteDisplayType === 'TOKENS' ? t('计费摘要') : t('模型价格'),
+    dataIndex: 'model_price',
+    ...(isMobile ? {} : { fixed: 'right' }),
+    render: (text, record, index) => {
+      const priceData = getPriceData(record);
+      const priceItems = getModelPriceItems(priceData, t, siteDisplayType);
+
+      return (
+        <div className='space-y-1'>
+          {priceItems.map((item) => (
+            <div key={item.key} className='text-gray-700'>
+              {item.label} {item.value}
+              {item.suffix}
+            </div>
+          ))}
+        </div>
+      );
+    },
+  };
+
+  const columns = [...baseColumns];
+  columns.push(endpointColumn);
+  if (showRatio) {
+    columns.push(ratioColumn);
+  }
+  columns.push(priceColumn);
+  return columns;
+};