feat: add claude code channel - #1444
Closed
seefs001 wants to merge 99 commits into
Closed
Conversation
…ll layout Summary Implement a dedicated, reusable scrolling mechanism for all console-table pages while keeping header and sidebar fixed, plus related layout improvements. Key Changes • Added `.table-scroll-card` utility class – Provides flex column layout and internal vertical scrolling – Desktop height: `calc(100vh - 110px)`; Mobile (<768 px) height: `calc(100vh - 77px)` – Hides scrollbars cross-browser (`-ms-overflow-style`, `scrollbar-width`, `::-webkit-scrollbar`) • Replaced global `.semi-card` scrolling rules with `.table-scroll-card` to avoid affecting non-table cards • Updated table components (Channels, Tokens, Users, Logs, MjLogs, TaskLogs, Redemptions) to use the new class • PageLayout – Footer is now suppressed for all `/console` routes – Confirmed only central content area scrolls; header & sidebar remain fixed • Restored hidden scrollbar rules for `.semi-layout-content` and removed unnecessary global overrides • Minor CSS cleanup & comment improvements for readability Result Console table pages now fill the viewport with smooth, internal scrolling and no visible scrollbars, while other cards and pages remain unaffected.
…anguage support
Add Semi UI internationalization to the project by wrapping the root
component tree with `LocaleProvider`. A new `SemiLocaleWrapper`
component maps the current `i18next` language code to the corresponding
Semi locale (currently `zh_CN` and `en_GB`) and falls back to Chinese
when no match is found.
Key changes
-----------
1. web/src/index.js
• Import `LocaleProvider`, `useTranslation`, and Semi locale files.
• Introduce `SemiLocaleWrapper` to determine `semiLocale` from
`i18next.language` using a concise prefix-based mapping.
• Wrap `PageLayout` with `SemiLocaleWrapper` inside the existing
`ThemeProvider`.
2. Ensures that all Semi components automatically display the correct
language when the app language is switched via i18next.
BREAKING CHANGE
---------------
Applications embedding this project must now ensure that `i18next`
initialization occurs before React render so that `LocaleProvider`
receives the correct initial language.
…ponents
Eliminated the manual `formatPageText` function that previously rendered
pagination text (e.g. “第 {{start}} - {{end}} 条，共 {{total}} 条”) in each
Table. Pagination now relies on the default Semi UI text or the global
i18n configuration, reducing duplication and making future language
updates centralized.
Why
---
* Keeps table components cleaner and more maintainable.
* Ensures pagination text automatically respects the app-wide i18n
settings without per-component overrides.
1. Split monolithic `ChannelsTable` (2200+ LOC) into focused components
• `channels/index.jsx` – composition entry
• `ChannelsTable.jsx` – pure `<Table>` rendering
• `ChannelsActions.jsx` – bulk & settings toolbar
• `ChannelsFilters.jsx` – search / create / column-settings form
• `ChannelsTabs.jsx` – type tabs
• `ChannelsColumnDefs.js` – column definitions & render helpers
• `modals/` – BatchTag, ColumnSelector, ModelTest modals
2. Extract domain hook
• Moved `useChannelsData.js` → `src/hooks/channels/useChannelsData.js`
– centralises state, API calls, pagination, filters, batch ops
– now exports `setActivePage`, fixing tab / status switch errors
3. Update wiring
• All sub-components consume data via `useChannelsData` props
• Adjusted import paths after hook relocation
4. Clean legacy file
• Legacy `components/table/ChannelsTable.js` now re-exports new module
5. Bug fixes
• Tab switching, status filter & tag aggregation restored
• Column selector & batch actions operate via unified hook
This commit completes the first phase of modularising the Channels feature, laying groundwork for consistent, maintainable table architecture across the app.
Refactor the monolithic LogsTable component (1453 lines) into a modular,
maintainable architecture following the channels table pattern.
## What Changed
### 🏗️ Architecture
- Split single large file into focused, single-responsibility components
- Introduced custom hook `useLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented modal components for user interactions
### 📁 New Structure
```
web/src/components/table/usage-logs/
├── index.jsx # Main page component orchestrator
├── LogsTable.jsx # Pure table rendering component
├── LogsActions.jsx # Actions area (stats + compact mode)
├── LogsFilters.jsx # Search form component
├── LogsColumnDefs.js # Column definitions and renderers
└── modals/
├── ColumnSelectorModal.jsx # Column visibility settings
└── UserInfoModal.jsx # User information display
web/src/hooks/logs/
└── useLogsData.js # Custom hook for state & logic
```
### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability
### 🔧 Technical Details
- Preserved all existing functionality and user experience
- Maintained backward compatibility through existing import path
- Centralized all business logic in `useLogsData` custom hook
- Extracted column definitions to separate module with render functions
- Split complex UI into focused components (table, actions, filters, modals)
### 🐛 Fixes
- Fixed Semi UI component import issues (`Typography.Paragraph`)
- Resolved module export dependencies
- Maintained consistent prop passing patterns
## Breaking Changes
None - all existing imports and functionality preserved.
Refactor the monolithic MjLogsTable component (971 lines) into a modular,
maintainable architecture following the same pattern as LogsTable refactor.
## What Changed
### 🏗️ Architecture
- Split large single file into focused, single-responsibility components
- Introduced custom hook `useMjLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented specialized modal components for Midjourney-specific features
### 📁 New Structure
```
web/src/components/table/mj-logs/
├── index.jsx # Main page component orchestrator
├── MjLogsTable.jsx # Pure table rendering component
├── MjLogsActions.jsx # Actions area (banner + compact mode)
├── MjLogsFilters.jsx # Search form component
├── MjLogsColumnDefs.js # Column definitions and renderers
└── modals/
├── ColumnSelectorModal.jsx # Column visibility settings
└── ContentModal.jsx # Content viewer (text + image preview)
web/src/hooks/mj-logs/
└── useMjLogsData.js # Custom hook for state & logic
```
### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability
### 🎨 Midjourney-Specific Features Preserved
- All task type rendering with icons (IMAGINE, UPSCALE, VARIATION, etc.)
- Status rendering with appropriate colors and icons
- Image preview functionality for generated artwork
- Progress indicators for task completion
- Admin-only columns for channel and submission results
- Banner notification system for callback settings
### 🔧 Technical Details
- Centralized all business logic in `useMjLogsData` custom hook
- Extracted comprehensive column definitions with Lucide React icons
- Split complex UI into focused components (table, actions, filters, modals)
- Maintained responsive design patterns for mobile compatibility
- Preserved admin permission handling for restricted features
### 🐛 Fixes
- Improved component prop passing patterns
- Enhanced type safety through better state management
- Optimized rendering performance with proper memoization
## Breaking Changes
None - all existing imports and functionality preserved.
…cture
Refactor the monolithic TaskLogsTable component (802 lines) into a modular,
maintainable architecture following the established pattern from LogsTable
and MjLogsTable refactors.
## What Changed
### 🏗️ Architecture
- Split large single file into focused, single-responsibility components
- Introduced custom hook `useTaskLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented modal components for user interactions
### 📁 New Structure
```
web/src/components/table/task-logs/
├── index.jsx # Main page component orchestrator
├── TaskLogsTable.jsx # Pure table rendering component
├── TaskLogsActions.jsx # Actions area (task records + compact mode)
├── TaskLogsFilters.jsx # Search form component
├── TaskLogsColumnDefs.js # Column definitions and renderers
└── modals/
├── ColumnSelectorModal.jsx # Column visibility settings
└── ContentModal.jsx # Content viewer for JSON data
web/src/hooks/task-logs/
└── useTaskLogsData.js # Custom hook for state & logic
```
### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability
### 🎨 Task-Specific Features Preserved
- All task type rendering with icons (MUSIC, LYRICS, video generation)
- Platform-specific rendering (Suno, Kling, Jimeng) with distinct colors
- Progress indicators for task completion status
- Video preview links for successful video generation tasks
- Admin-only columns for channel information
- Status rendering with appropriate colors and icons
### 🔧 Technical Details
- Centralized all business logic in `useTaskLogsData` custom hook
- Extracted comprehensive column definitions with Lucide React icons
- Split complex UI into focused components (table, actions, filters, modals)
- Maintained responsive design patterns for mobile compatibility
- Preserved admin permission handling for restricted features
- Optimized spacing and layout (reduced gap from 4 to 2 for better density)
### 🎮 Platform Support
- **Suno**: Music and lyrics generation with music icons
- **Kling**: Video generation with video icons
- **Jimeng**: Video generation with distinct purple styling
### 🐛 Fixes
- Improved component prop passing patterns
- Enhanced type safety through better state management
- Optimized rendering performance with proper memoization
- Streamlined export pattern using `export { default }`
## Breaking Changes
None - all existing imports and functionality preserved.
…tecture - Split monolithic 922-line TokensTable.js into modular components: * useTokensData.js: Custom hook for centralized state and logic management * TokensColumnDefs.js: Column definitions and rendering functions * TokensTable.jsx: Pure table component for rendering * TokensActions.jsx: Actions area (add, copy, delete tokens) * TokensFilters.jsx: Search form component with keyword and token filters * TokensDescription.jsx: Description area with compact mode toggle * index.jsx: Main orchestrator component - Features preserved: * Token status management with switch controls * Quota progress bars and visual indicators * Model limitations display with vendor avatars * IP restrictions handling and display * Chat integrations with dropdown menu * Batch operations (copy, delete) with confirmations * Key visibility toggle and copy functionality * Compact mode for responsive layouts * Search and filtering capabilities * Pagination and loading states - Improvements: * Better separation of concerns * Enhanced reusability and testability * Simplified maintenance and debugging * Consistent modular architecture pattern * Performance optimizations with useMemo * Backward compatibility maintained This refactoring follows the same successful pattern used for LogsTable, MjLogsTable, and TaskLogsTable, significantly improving code maintainability while preserving all existing functionality.
…itecture Refactor the monolithic RedemptionsTable component (614 lines) into a clean, modular structure following the established tokens component pattern. ### Changes Made: **New Components:** - `RedemptionsColumnDefs.js` - Extract table column definitions and render logic - `RedemptionsActions.jsx` - Extract action buttons (add, batch copy, clear invalid) - `RedemptionsFilters.jsx` - Extract search and filter form components - `RedemptionsDescription.jsx` - Extract description area component - `redemptions/index.jsx` - Main container component managing state and composition **New Hook:** - `useRedemptionsData.js` - Extract all data management, CRUD operations, and business logic **New Constants:** - `redemption.constants.js` - Extract redemption status, actions, and form constants **Architecture Changes:** - Transform RedemptionsTable.jsx into pure table rendering component - Move state management and component composition to index.jsx - Implement consistent prop drilling pattern matching tokens module - Add memoization for performance optimization - Centralize translation function distribution ### Benefits: - **Maintainability**: Each component has single responsibility - **Reusability**: Components and hooks can be used elsewhere - **Testability**: Individual modules can be unit tested - **Team Collaboration**: Multiple developers can work on different modules - **Consistency**: Follows established architectural patterns ### File Structure: ``` redemptions/ ├── index.jsx # Main container (state + composition) ├── RedemptionsTable.jsx # Pure table component ├── RedemptionsActions.jsx # Action buttons ├── RedemptionsFilters.jsx # Search/filter form ├── RedemptionsDescription.jsx # Description area └── RedemptionsColumnDefs.js # Column definitions
…nt architecture BREAKING CHANGE: Removed standalone user edit routes (/console/user/edit, /console/user/edit/:id) - Decompose 673-line monolithic UsersTable.js into 8 specialized components - Extract column definitions to UsersColumnDefs.js with render functions - Create dedicated UsersActions.jsx for action buttons - Create UsersFilters.jsx for search and filtering logic - Create UsersDescription.jsx for description area - Extract all data management logic to useUsersData.js hook - Move AddUser.js and EditUser.js to users/modals/ folder as modal components - Create 4 new confirmation modal components (Promote, Demote, EnableDisable, Delete) - Implement pure UsersTable.jsx component for table rendering only - Create main container component users/index.jsx to compose all subcomponents - Update import paths in pages/User/index.js to use new modular structure - Remove obsolete EditUser imports and routes from App.js - Delete original monolithic files: UsersTable.js, AddUser.js, EditUser.js The new architecture follows the same modular pattern as tokens and redemptions modules: - Consistent file organization across all table modules - Better separation of concerns and maintainability - Enhanced reusability and testability - Unified modal management approach All existing functionality preserved with improved code organization.
BREAKING CHANGE: Removed standalone user edit routes and intermediate export files ## Major Refactoring - Decompose 673-line monolithic UsersTable.js into 8 specialized components - Extract column definitions to UsersColumnDefs.js with render functions - Create dedicated UsersActions.jsx for action buttons - Create UsersFilters.jsx for search and filtering logic - Create UsersDescription.jsx for description area - Extract all data management logic to useUsersData.js hook - Move AddUser.js and EditUser.js to users/modals/ folder as modal components - Create 4 new confirmation modal components (Promote, Demote, EnableDisable, Delete) - Implement pure UsersTable.jsx component for table rendering only - Create main container component users/index.jsx to compose all subcomponents ## Import Path Optimization - Remove 6 intermediate re-export files: ChannelsTable.js, TokensTable.js, RedemptionsTable.js, UsageLogsTable.js, MjLogsTable.js, TaskLogsTable.js - Update all pages to import directly from module folders (e.g., '../../components/table/tokens') - Standardize naming convention: all pages import as XxxTable while internal components use XxxPage ## Route Cleanup - Remove obsolete EditUser imports and routes from App.js (/console/user/edit, /console/user/edit/:id) - Delete original monolithic files: UsersTable.js, AddUser.js, EditUser.js ## Architecture Benefits - Unified modular pattern across all table modules (tokens, redemptions, users, channels, logs) - Consistent file organization and naming conventions - Better separation of concerns and maintainability - Enhanced reusability and testability - Eliminated unnecessary intermediate layers - Improved import clarity and performance All existing functionality preserved with significantly improved code organization.
Move EditChannel and EditTagModal from standalone pages to modal components within the channels module structure for consistency with other table modules. Changes: - Move EditChannel.js → components/table/channels/modals/EditChannelModal.jsx - Move EditTagModal.js → components/table/channels/modals/EditTagModal.jsx - Update import paths in channels/index.jsx - Remove standalone routes for EditChannel from App.js - Delete original files from pages/Channel/ This change aligns the channels module with the established modular pattern used by tokens, users, redemptions, and other table modules, centralizing all channel management functionality within integrated modal components instead of separate page routes. BREAKING CHANGE: EditChannel standalone routes (/console/channel/edit/:id and /console/channel/add) have been removed. All channel editing is now handled through modal components within the main channels page.
Summary ------- Introduce a reusable compact-mode toggle component and greatly improve the CardPro header for small screens. Removes duplicated code, adds i18n support, and refines overall responsiveness. Details ------- 🎨 UI / Components • Create `common/ui/CompactModeToggle.js` – Provides a single source of truth for switching between “Compact list” and “Adaptive list” – Automatically hides itself on mobile devices via `useIsMobile()` • Refactor table modules to use the new component – `Users`, `Tokens`, `Redemptions`, `Channels`, `TaskLogs`, `MjLogs`, `UsageLogs` – Deletes legacy in-file toggle buttons & reduces repetition 📱 CardPro improvements • Hide `actionsArea` and `searchArea` on mobile, showing a single “Show Actions / Hide Actions” toggle button • Add i18n: texts are now pulled from injected `t()` function (`显示操作项` / `隐藏操作项` etc.) • Extend PropTypes to accept the `t` prop; supply a safe fallback • Minor cleanup: remove legacy DOM observers & flag CSS, simplify logic 🔧 Integration • Pass the `t` translation function to every `CardPro` usage across table pages • Remove temporary custom class hooks after logic simplification Benefits -------- ✓ Consistent, DRY compact-mode handling across the entire dashboard ✓ Better mobile experience with decluttered headers ✓ Full translation support for newly added strings ✓ Easier future maintenance (single compact toggle, unified CardPro API)
…ynamic skeletons & pagination 1. Add `web/src/components/common/ui/CardTable.js` • Renders Semi-UI `Table` on desktop; on mobile, transforms each row into a rounded `Card`. • Supports all standard `Table` props, including `rowSelection`, `scroll`, `pagination`, etc. • Adds mobile pagination via Semi-UI `Pagination`. • Implements a 500 ms minimum, active Skeleton loader that mimics real column layout (including operation-button row). 2. Replace legacy `Table` with `CardTable` • Updated all major data pages: Channels, MJ-Logs, Redemptions, Tokens, Task-Logs, Usage-Logs and Users. • Removed unused `Table` imports; kept behaviour on desktop unchanged. 3. UI polish • Right-aligned operation buttons and sensitive fields (e.g., token keys) inside mobile cards. • Improved Skeleton placeholders to better reflect actual UI hierarchy and preserve the active animation. These changes dramatically improve the mobile experience while retaining full functionality on larger screens.
…ility on mobile • Imported Semi-UI `Empty` component. • Detect when `dataSource` is empty on mobile card view: – Renders supplied `empty` placeholder (`tableProps.empty`) or a default `<Empty description="No Data" />`. – Suppresses the mobile `Pagination` component to avoid blank pages. • Pagination now renders only when `dataSource.length > 0`, preserving UX parity with desktop tables.
…order variable for consistent theming Detailed changes 1. Removed `border-gray-200` Tailwind utility from two `<div>` elements in `web/src/components/common/ui/CardTable.js`. 2. Added inline style `borderColor: 'var(--semi-color-border)'` while keeping existing `border-b border-dashed` classes. 3. Ensures all borders use Semi UI’s design token, keeping visual consistency across light/dark themes and custom palettes. Why • Aligns component styling with Semi UI’s design system. • Avoids hard-coded colors and prevents theme mismatch issues on future updates. No breaking changes; visual update only.
• Added `.eslintrc.cjs` - Enables `header` + `react-hooks` plugins - Inserts standardized AGPL-3.0 license banner for © 2025 QuantumNous - JS/JSX parsing & JSX support configured • Installed dev-deps: `eslint`, `eslint-plugin-header`, `eslint-plugin-react-hooks` • Updated `web/package.json` scripts - `eslint` → lint with cache - `eslint:fix` → auto-insert/repair license headers • Executed `eslint --fix` to prepend license banner to all JS/JSX files • Ignored runtime cache - Added `.eslintcache` to `.gitignore` & `.dockerignore` Result: consistent AGPL-3.0 license headers, reproducible linting across local dev & CI.
…-load RPM/TPM This commit addresses an issue where RPM and TPM statistics did not load automatically on mobile devices. Key changes • Replaced conditional rendering with persistent rendering of `actionsArea` and `searchArea` in `CardPro` and applied the `hidden` CSS class when the sections should be concealed. • Ensures internal hooks (e.g. `useUsageLogsData`) always run, allowing stats to be fetched without requiring the user to tap “Show Actions”. • Maintains existing desktop behaviour; only mobile handling is affected. Files updated • `web/src/components/common/ui/CardPro.js` Result Mobile users now see up-to-date RPM/TPM (and other statistics) immediately after page load, improving usability and consistency with the desktop experience.
…correctly Previously the component unmounted the Modal as soon as `showModelTestModal` became false, preventing Semi UI from running its cleanup routine. This left `body` stuck with `overflow: hidden`, disabling page scroll after the dialog closed. Changes made – Removed the early `return null` and always keep the Modal mounted; visibility is now controlled solely via the `visible` prop. – Introduced a `hasChannel` guard to safely skip data processing/rendering when no channel is selected. – Added defensive checks for table data, footer and title to avoid undefined access when the Modal is hidden. This fix ensures that closing the test-model dialog correctly restores the page’s scroll behaviour on both desktop and mobile.
• Accept an array for `actionsArea`, enabling multiple action blocks in one card • Automatically insert a `Divider` between consecutive action blocks • Add a `Divider` between `actionsArea` and `searchArea` when both exist • Standardize `Divider` spacing by removing custom `margin` props • Update `PropTypes`: `actionsArea` now supports `arrayOf(node)` These changes improve visual separation and usability for complex table cards (e.g., Channels), making the UI cleaner and more consistent.
This patch standardises how all “model” (and related) `<Select>` components handle searching.
Highlights
• Added a shared helper `modelSelectFilter` to `helpers/utils.js` – performs case-insensitive value-based matching, independent of ReactNode labels.
• Removed the temporary `helpers/selectFilter.js`; all components now import from the core helpers barrel.
• Updated Selects to use the new filter *and* set `autoClearSearchValue={false}` so the query text is preserved after a choice is made.
Affected components
• Channel editor (EditChannelModal) – channel type & model lists
• Tag editor (EditTagModal) – model list
• Token editor (EditTokenModal) – model-limit list
• Playground SettingsPanel – model selector
Benefits
✓ Consistent search behaviour across the app
✓ Better user experience when selecting multiple items
✓ Cleaner codebase with one canonical filter implementation
Provide a consistent UX by ensuring the status column tooltip is shown for all tokens, including those with unlimited quota. Details: • Removed early‐return that skipped tooltip rendering when `record.unlimited_quota` was true. • Refactored tooltip content: – Unlimited quota: shows only “used quota”. – Limited quota: continues to show used, remaining (with percentage) and total. • Leaves existing tag, switch and progress-bar behaviour unchanged. This prevents missing hover information for unlimited tokens and avoids meaningless “remaining / total” figures (e.g. Infinity), improving clarity for administrators.
Summary • Swapped out the obsolete `<Spin>` loader for a modern, animated Semi-UI `<Skeleton>` implementation in `UsageLogsActions.jsx`. Details 1. Added animated Skeleton placeholders mirroring real Tag sizes (108 × 26, 65 × 26, 64 × 26). 2. Introduced `showSkeleton` state with 500 ms minimum display to eliminate flicker. 3. Leveraged existing `showStat` flag to decide when real data is ready. 4. Ensured only the three Tags are under loading state - `CompactModeToggle` renders immediately. 5. Adopted CardTable‐style `Skeleton` pattern (`loading` + `placeholder`) for consistency. 6. Removed all references to the original `Spin` component. Outcome A smoother and more consistent loading experience across devices, aligning UI behaviour with the project’s latest Skeleton standards.
Summary 1. CardTable • Added collapsible “Details / Collapse” section on mobile cards using Semi-UI Button + Collapsible with chevron icons. • Integrated i18n (`useTranslation`) for the toggle labels. • Restored original variable-width skeleton placeholders (50 % / 60 % / 70 % …) for more natural loading states. 2. UsageLogsColumnDefs • Wrapped each `Tag` inside a native `<span>` when used as Tooltip trigger, removing `findDOMNode` deprecation warnings in React StrictMode. Impact • Cleaner, shorter rows on small screens with optional expansion. • Fully translated UI controls. • No more console noise in development & CI caused by StrictMode warnings.
… fields - Redesign modal layout from single column to responsive two-column grid - Add new user information fields: display name, user group, invitation code, invitation count, invitation quota, and remarks - Implement Badge components with color-coded categories for better visual hierarchy: * Primary (blue): basic identity info (username, display name) * Success (green): positive/earning info (balance, invitation quota) * Warning (orange): usage/consumption info (used quota, request count) * Tertiary (gray): supplementary info (user group, invitation details, remarks) - Optimize spacing and typography for better readability: * Reduce row spacing from 24px to 16px * Decrease font size from 16px to 14px for values * Adjust label margins from 4px to 2px - Implement conditional rendering for optional fields - Add proper text wrapping for long remarks content - Reduce overall modal height while maintaining information clarity This update significantly improves the user experience by presenting comprehensive user information in a more organized and visually appealing format.
Summary of changes
1. UI clean-up
• Removed all `prefixIcon` props from `Tag` components in `UsersColumnDefs.js`.
• Corrected i18n string in invite info (`${t('邀请人')}: …`).
2. “Statistics” column overhaul
• Added a Switch (enable / disable) and quota Progress bar, mirroring the Tokens table design.
• Moved enable / disable action out of the “More” dropdown; user status is now toggled directly via the Switch.
• Disabled the Switch for deleted (注销) users.
• Restored column title to “Statistics” to avoid duplication.
3. State consistency / refresh
• Updated `manageUser` in `useUsersData.js` to:
– set `loading` while processing actions;
– update users list immutably (new objects & array) to trigger React re-render.
4. Imports / plumbing
• Added `Progress` and `Switch` to UI imports in `UsersColumnDefs.js`.
These changes streamline the user table’s appearance, align interaction patterns with the token table, and ensure immediate visual feedback after user status changes.
- Add left-right pagination layout for desktop (total info on left, controls on right) - Keep mobile layout centered with pagination controls only - Implement proper i18n support for pagination text using react-i18next - Add pagination translations for Chinese and English - Standardize t function usage across all table components to use xxxData.t pattern - Update CardPro footer layout to support justify-between on desktop - Use CSS variable --semi-color-text-2 for consistent text styling - Disable built-in Pagination showTotal to avoid duplication Components updated: - CardPro: Enhanced footer layout with responsive design - createCardProPagination: Added i18n support and custom total text - All table components: Unified t function usage pattern - i18n files: Added pagination-related translations The pagination now displays "Showing X to Y of Z items" on desktop and maintains existing centered layout on mobile devices.
chore: opt video channel and platform
…Ark/Doubao (type 45) The VolcEngine Ark/Doubao channel now has a hard-coded base URL inside the backend, so it no longer requires any API-address settings on the front-end side. Previously, the input field was hidden but the surrounding “API Config” card still rendered, leaving a blank, confusing section. Changes made • Added `showApiConfigCard` flag (true when `inputs.type !== 45`) right after the state declarations. • Wrapped the entire “API Config” card in a conditional render driven by this flag. • Removed the duplicate declaration of `showApiConfigCard` further down in the component to avoid shadowing and improve readability. Scope verification • Checked all other channel types: every remaining type either displays a dedicated API-related input/banner (3, 8, 22, 36, 37, 40, …) or falls back to the generic “custom API address” field. • Therefore, only type 45 requires the card to be fully hidden. Result The “Edit Channel” modal now shows no empty card for the VolcEngine Ark/Doubao channel, leading to a cleaner and more intuitive UI while preserving behaviour for all other channels.
…ge. (close #1419)
feat: add vidu video channel
Merge pull request #1424 from feitianbubu/pr/fix-playground-chat-vip-group
Ensure non-admin users cannot enable columns reserved for administrators across the following hooks: * web/src/hooks/usage-logs/useUsageLogsData.js - Force-hide CHANNEL, USERNAME and RETRY columns for non-admins. * web/src/hooks/mj-logs/useMjLogsData.js - Force-hide CHANNEL and SUBMIT_RESULT columns for non-admins. * web/src/hooks/task-logs/useTaskLogsData.js - Force-hide CHANNEL column for non-admins. The checks run when loading column preferences from localStorage, overriding any tampered settings to keep sensitive information hidden from unauthorized users.
…and relay components
feat: 支持渠道级透传选项，支持设置渠道系统提示词
…lModal - Extract channel extra settings into a dedicated Card component for better visual hierarchy - Replace custom gray background container with consistent Form component styling - Simplify layout structure by removing complex Row/Col grid layout in favor of native Form component layout - Unify help text styling by using extraText prop consistently across all form fields - Move "Settings Documentation" link to card header subtitle for better accessibility - Improve visual consistency with other setting cards by using matching design patterns The channel extra settings (force format, thinking content conversion, pass-through body, proxy address, and system prompt) now follow the same design language as other configuration sections, providing a more cohesive user experience. Affected settings: - Force Format (OpenAI channels only) - Thinking Content Conversion - Pass-through Body - Proxy Address - System Prompt
判断兑换码名称长度，改为按字符长度计算
feat: Claude to gemini （适配claude格式调用gemini渠道模型）
- Introduced Claude Code as a new channel type with ID 53. - Implemented OAuth authorization flow for Claude Code, including URL generation and code exchange. - Updated UI components to handle access and refresh tokens specific to Claude Code. - Enhanced the EditChannelModal to support OAuth token management and fixed system prompt for Claude Code. - Updated go.mod and go.sum to include golang.org/x/oauth2 dependency.
Contributor
|
Caution Review failedThe pull request is closed. WalkthroughThis update introduces a new dual licensing policy, adds channel types and adaptors for Claude Code and Vidu, implements OAuth2 support and token refresh for Claude, and enhances channel settings with pass-through and system prompt options. It also refactors error handling, request body processing, and video task handling, and adds new UI dashboard components and ESLint configuration. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebUI
participant API
participant ClaudeOAuthService
participant ClaudeAPI
User->>WebUI: Click "Connect Claude"
WebUI->>API: GET /channel/claude/oauth/url
API->>ClaudeOAuthService: GenerateOAuthParams()
ClaudeOAuthService-->>API: Auth URL + PKCE params
API-->>WebUI: Return OAuth URL
WebUI->>User: Redirect to Claude OAuth URL
User->>ClaudeAPI: Authorize, receive code
User->>WebUI: Paste/redirect with code
WebUI->>API: POST /channel/claude/oauth/exchange {code, verifier, state}
API->>ClaudeOAuthService: ExchangeCode()
ClaudeOAuthService->>ClaudeAPI: Token request
ClaudeAPI-->>ClaudeOAuthService: Access/refresh token
ClaudeOAuthService-->>API: Return tokens
API-->>WebUI: Success response
sequenceDiagram
participant Scheduler
participant ClaudeTokenRefreshService
participant DB
participant ClaudeAPI
loop Every 5 min
Scheduler->>ClaudeTokenRefreshService: Start refresh
ClaudeTokenRefreshService->>DB: Query ClaudeCode channels
DB-->>ClaudeTokenRefreshService: List of channels
ClaudeTokenRefreshService->>ClaudeAPI: Refresh token (per channel)
ClaudeAPI-->>ClaudeTokenRefreshService: New tokens
ClaudeTokenRefreshService->>DB: Update channel key
end
sequenceDiagram
participant User
participant WebUI
participant API
participant ViduAdaptor
User->>WebUI: Submit video task (text/image)
WebUI->>API: POST /video/task
API->>ViduAdaptor: Build request, send to Vidu
ViduAdaptor->>ViduAPI: Submit task
ViduAPI-->>ViduAdaptor: Task ID response
ViduAdaptor-->>API: Return task ID
API-->>WebUI: Show task status
User->>WebUI: Poll GET /video/task/:id
WebUI->>API: GET /video/task/:id
API->>ViduAdaptor: Fetch status
ViduAdaptor->>ViduAPI: Query task
ViduAPI-->>ViduAdaptor: Status/result
ViduAdaptor-->>API: Return status/result
API-->>WebUI: Show result
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Improvements
Bug Fixes
Documentation
Chores
Refactor
Tests
Style