Migrate Dashboard module from hardcoded text to full internationalization
support with Chinese and English translations.
## Changes Made
### Dashboard Components i18n Implementation
- **Dashboard main page** (`index.tsx`): Added i18n for page title, welcome message,
search button, tab labels, and toast notifications
- **StatsCards** (`stats-cards.tsx`): Implemented i18n for 4 grouped cards with
8 data metrics (account data, usage stats, resource consumption, performance metrics)
- **Overview** (`overview.tsx`): Added i18n for chart titles, tooltips, and error states
- **ModelUsageChart** (`model-usage-chart.tsx`): Implemented i18n for chart content
and status messages
- **ModelMonitoringStats** (`model-monitoring-stats.tsx`): Added i18n for monitoring
statistics cards and descriptions
- **ModelMonitoringTable** (`model-monitoring-table.tsx`): Implemented i18n for table
headers, pagination, search functionality, and action menus
### Language Files Updates
- **Chinese** (`zh.json`): Added comprehensive Dashboard translations with proper
key structure and interpolation support
- **English** (`en.json`): Added complete English translations with consistent
terminology and interpolation variables
### Key Structure Improvements
- Organized i18n keys in logical hierarchy: `dashboard.stats.*`, `dashboard.overview.*`,
`dashboard.model_usage.*`, `dashboard.monitoring.*`, `dashboard.search.*`
- Added common UI elements to `common.*` namespace for reusability
- Support for interpolation variables (e.g., `{{name}}`, `{{count}}`, `{{percentage}}`)
### Bug Fixes
- **Fixed duplicate JSON keys**: Resolved conflicts between `dashboard.search` (string)
and `dashboard.search` (object) by renaming to `dashboard.search_button`
- **Fixed duplicate overview keys**: Resolved conflicts between `dashboard.overview`
(string) and `dashboard.overview` (object) by renaming to `dashboard.overview_tab`
- Updated component references to use corrected i18n keys
### Technical Features
- Full React i18next integration with `useTranslation` hook
- Maintains accessibility standards and semantic HTML structure
- Consistent error handling and loading states across all components
- Support for plural forms and complex interpolation scenarios
## Breaking Changes
None - All changes are additive and maintain backward compatibility.
## Testing
- ✅ JSON validation for both language files
- ✅ No linter errors in Dashboard components
- ✅ No duplicate keys in translation files
- ✅ All i18n keys properly referenced in components
Closes: Dashboard i18n migration task
- Move LanguageSwitch into the header action toolbar beside ThemeSwitch on all pages:
- web/src/features/dashboard/index.tsx
- web/src/features/users/index.tsx
- web/src/features/tasks/index.tsx
- web/src/features/apps/index.tsx
- web/src/features/settings/index.tsx
- web/src/features/chats/index.tsx
- web/src/routes/clerk/_authenticated/user-management.tsx
- web/src/routes/_authenticated/errors/$error.tsx
- Remove the previous left-side Language button from Header to avoid duplication:
- web/src/components/layout/header.tsx
- Keep user menu language controls consistent with other items (LanguageMenuItems).
UI/UX:
- Same placement and visual style as Theme switch (ghost, icon-only, rounded, a11y sr-only label).
- Consistent look across all headers and in user menu.
Chore:
- Updated imports accordingly.
- No linter errors.
This commit introduces a complete model monitoring system that provides
real-time insights into model performance and usage statistics.
## ✨ Features Added
### Core Components
- **ModelMonitoringStats**: Four key metric cards displaying total models,
active models, total requests, and average success rate
- **ModelMonitoringTable**: Interactive table with search, filtering, and
pagination for detailed model data
- **useModelMonitoring**: Custom hook for data fetching and state management
### Dashboard Integration
- Added new "模型观测" (Model Monitoring) tab to main dashboard
- Integrated monitoring components with existing dashboard layout
- Maintained consistent UI/UX with shadcn/ui design system
### Data Processing
- Smart data aggregation from existing `/api/data/` endpoints
- Automatic calculation of success rates and average metrics
- Support for both admin and user-specific data views
### Interactive Features
- Real-time search by model name
- Business group filtering
- Pagination with 10 items per page
- Color-coded success rate indicators (green >95%, yellow 90-95%, red <90%)
- Refresh capability for up-to-date data
## 🔧 Technical Implementation
### Type Safety
- Added comprehensive TypeScript interfaces in `@/types/api.ts`
- Defined `ModelInfo`, `ModelMonitoringStats`, and related types
### Utility Functions
- Enhanced color utilities with `modelToColor()` for consistent model identification
- Improved formatters for quota, tokens, and percentage display
- Maintained existing utility function architecture
### Architecture
- Follows established patterns from dashboard components
- Reuses existing HTTP client and authentication utilities
- Consistent error handling and loading states
### Code Quality
- All components pass linter checks
- Proper import organization and formatting
- Responsive design for mobile compatibility
## 🎯 User Experience
### Visual Design
- Color-coded model indicators for quick identification
- Success rate visualization with icons and colors
- Clean table layout with proper spacing and typography
- Skeleton loading states for smooth UX
### Functionality
- Search models by name with instant filtering
- Filter by business groups for organized viewing
- Navigate through paginated results efficiently
- Refresh data manually when needed
## 📋 Files Modified
- `web/src/types/api.ts`: Added model monitoring type definitions
- `web/src/features/dashboard/hooks/use-model-monitoring.ts`: Core data hook
- `web/src/features/dashboard/components/model-monitoring-stats.tsx`: Stats cards
- `web/src/features/dashboard/components/model-monitoring-table.tsx`: Data table
- `web/src/features/dashboard/index.tsx`: Dashboard integration
- Various formatting and import organization improvements
This implementation provides a comprehensive solution for model monitoring
that aligns with the existing codebase architecture while delivering
powerful insights into model performance and usage patterns.
- Call `auth.fetchSelf()` inside a one-time `useEffect` in `web/src/routes/_authenticated/route.tsx`
to avoid re-render triggered loops that spam `/api/user/self`.
- Make the sign-out flow await `auth.logout()`, close the dialog, then navigate to `/sign-in`
with the current location as `redirect` in `web/src/components/sign-out-dialog.tsx`,
guaranteeing the guard and redirect work reliably.
- No changes to old Semi UI archive; no linter errors introduced.
Test plan:
- Click “Sign out”: only one `/api/user/logout` request, no repeated `/api/user/self`,
then redirected to `/sign-in?redirect=<previous_url>`.
- Refresh authenticated pages: at most one `/api/user/self` fetch occurs.
- Added useRef to manage dropdown positioning in UserArea component.
- Wrapped Dropdown in a div with a ref to ensure correct popup container.
- Minor adjustments to maintain existing functionality and styling.
