refactor(console/dashboard): replace Card with HeroUI Pro Widget

.cursor/rules/project.mdc

@@ -12,7 +12,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 18, Vite, Semi Design UI (@douyinfe/semi-ui)
+- **Frontend**: React 18, Vite, Hero UI (@heroui/react) with compatibility wrappers
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)

.gitignore

@@ -22,6 +22,12 @@ tiktoken_cache
 web/bun.lock
 plans
 .claude
+.playwright-mcp
+*.png
+*.jpg
+*.jpeg
+!web/public/**/*.png
+!web/public/**/*.jpg
 
 electron/node_modules
 electron/dist

AGENTS.md

@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 18, Vite, Semi Design UI (@douyinfe/semi-ui)
+- **Frontend**: React 18, Vite, Hero UI (@heroui/react) with compatibility wrappers
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)

CLAUDE.md

@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 18, Vite, Semi Design UI (@douyinfe/semi-ui)
+- **Frontend**: React 18, Vite, Hero UI (@heroui/react) with compatibility wrappers
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)

web/hero-ui-migration-inventory.json

@@ -0,0 +1,146 @@
+{
+  "compatShimFiles": {
+    "description": "These compatibility files re-export Semi-style components backed by HeroUI v3. They allow incremental migration without breaking pages that still use the legacy props (`checked`, `onChange`, `xs/sm/md/lg/xl`, render-prop Form, `Spin spinning`, etc.).",
+    "files": [
+      "web/src/components/common/ui/HeroCompat.jsx",
+      "web/src/components/common/ui/HeroIconsCompat.jsx",
+      "web/src/components/common/ui/HeroIllustrationsCompat.jsx",
+      "web/src/components/ui/semi.js",
+      "web/src/components/ui/semi-icons.js",
+      "web/src/components/common/ui/TableFilterForm.jsx"
+    ]
+  },
+  "sharedV3Components": [
+    "web/src/components/common/ui/ConfirmDialog.jsx — HeroUI v3 Modal-based confirm dialog (replaces Semi Popconfirm and Modal.confirm).",
+    "web/src/components/common/ui/HoverPanel.jsx — Hover-triggered popover (replaces Semi Popover trigger='hover').",
+    "web/src/components/common/ui/ClickMenu.jsx — Click-triggered dropdown menu (replaces Semi Dropdown trigger='click')."
+  ],
+  "compatBugsFixed": [
+    "Spin: now wraps children with overlay; previously returned null when spinning=false hiding everything inside.",
+    "Switch: now renders Switch.Control + Switch.Thumb anatomy; previously rendered a bare role=\"switch\" input with no visible toggle.",
+    "Col: now honors xs/sm/md/lg/xl/xxl breakpoint props via Tailwind responsive classes; previously fell back to span=24 (full width) ignoring all breakpoints.",
+    "Form: stable api ref, no more infinite update loop when controlled `values` is provided.",
+    "Form: supports render-prop children `({ values, formApi, formState }) => ...` used by SystemSetting.",
+    "useFormField: only backfills `initValue` once per field and skips it entirely in controlled mode (was the source of the infinite re-render).",
+    "Radio: added `Radio.Group` alias for legacy callers.",
+    "useTableFilterForm: stabilized `api` ref so freshly-allocated `initValues` literals from parents no longer trigger an infinite re-render loop on /console/token (and any other table using the hook).",
+    "Banner: now honors `description`, `title`, `closeIcon`, `fullMode`, `bordered` props from Semi UI; previously only rendered `children`, dropping the actual message text on every page that used the description prop.",
+    "withIcon (semi-icons): maps Semi-style string sizes (`small`, `default`, `large`, `extra-large`) to numeric pixel values; previously the literal string was forwarded to lucide-react which serialized it as a width/height attribute, blowing up the icon to e.g. 600+ pixels (caused the giant warning triangle on /console/models)."
+  ],
+  "filesStillImportingHeroCompat": 37,
+  "rewrittenToHeroUIv3": [
+    "web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx",
+    "web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx",
+    "web/src/pages/Setting/Operation/SettingsCheckin.jsx",
+    "web/src/pages/Setting/Operation/SettingsCreditLimit.jsx",
+    "web/src/pages/Setting/Operation/SettingsLog.jsx",
+    "web/src/pages/Setting/Operation/SettingsSensitiveWords.jsx",
+    "web/src/pages/Setting/Operation/SettingsMonitoring.jsx",
+    "web/src/pages/Setting/Operation/SettingsGeneral.jsx",
+    "web/src/components/settings/HttpStatusCodeRulesInput.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsDataDashboard.jsx",
+    "web/src/pages/Setting/Drawing/SettingsDrawing.jsx",
+    "web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.jsx",
+    "web/src/pages/Setting/Payment/SettingsGeneralPayment.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGateway.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.jsx",
+    "web/src/pages/Setting/Model/SettingGlobalModel.jsx",
+    "web/src/pages/Setting/Model/SettingGeminiModel.jsx",
+    "web/src/pages/Setting/Model/SettingClaudeModel.jsx",
+    "web/src/pages/Setting/Model/SettingGrokModel.jsx",
+    "web/src/pages/Setting/Model/SettingModelDeployment.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelHeader.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx",
+    "web/src/components/table/channels/modals/BatchTagModal.jsx",
+    "web/src/components/table/channels/ChannelsTabs.jsx",
+    "web/src/components/table/channels/index.jsx",
+    "web/src/components/table/models/ModelsTabs.jsx",
+    "web/src/components/table/models/components/SelectionNotification.jsx",
+    "web/src/components/table/models/index.jsx",
+    "web/src/components/table/models/modals/SyncWizardModal.jsx",
+    "web/src/components/table/models/modals/MissingModelsModal.jsx",
+    "web/src/components/table/models/modals/EditVendorModal.jsx",
+    "web/src/components/table/model-deployments/modals/ConfirmationDialog.jsx",
+    "web/src/components/table/model-pricing/modal/PricingFilterModal.jsx",
+    "web/src/components/table/subscriptions/index.jsx",
+    "web/src/pages/Setting/Ratio/components/AutoGroupList.jsx",
+    "web/src/pages/Setting/Ratio/components/GroupTable.jsx",
+    "web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx",
+    "web/src/components/table/model-pricing/view/table/PricingTable.jsx",
+    "web/src/components/table/channels/modals/CodexOAuthModal.jsx",
+    "web/src/components/table/channels/modals/SingleModelSelectModal.jsx",
+    "web/src/components/table/model-deployments/modals/EditDeploymentModal.jsx",
+    "web/src/components/table/models/modals/PrefillGroupManagement.jsx",
+    "web/src/pages/Setting/Ratio/components/GroupGroupRatioRules.jsx",
+    "web/src/pages/Setting/Ratio/components/GroupSpecialUsableRules.jsx",
+    "web/src/components/table/users/modals/AddUserModal.jsx",
+    "web/src/components/table/models/ModelsActions.jsx",
+    "web/src/helpers/utils.jsx",
+    "web/src/helpers/render.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx",
+    "web/src/components/table/channels/ChannelsActions.jsx",
+    "web/src/components/table/users/UsersColumnDefs.jsx",
+    "web/src/components/table/subscriptions/SubscriptionsColumnDefs.jsx",
+    "web/src/components/table/models/ModelsColumnDefs.jsx",
+    "web/src/pages/Setting/Ratio/ModelRatioSettings.jsx",
+    "web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx",
+    "web/src/components/table/channels/modals/ChannelUpstreamUpdateModal.jsx",
+    "web/src/components/table/models/modals/UpstreamConflictModal.jsx",
+    "web/src/components/table/models/modals/EditPrefillGroupModal.jsx",
+    "web/src/components/table/users/modals/UserBindingManagementModal.jsx",
+    "web/src/components/table/users/modals/UserSubscriptionsModal.jsx",
+    "web/src/components/settings/personal/cards/CheckinCalendar.jsx",
+    "web/src/components/table/redemptions/modals/EditRedemptionModal.jsx",
+    "web/src/components/settings/ChannelSelectorModal.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsFAQ.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsUptimeKuma.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsAPIInfo.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsAnnouncements.jsx",
+    "web/src/components/table/task-logs/TaskLogsColumnDefs.jsx",
+    "web/src/components/table/mj-logs/MjLogsColumnDefs.jsx"
+  ],
+  "v3ApiNotes": {
+    "Switch": "Compound component — needs <Switch.Control><Switch.Thumb /></Switch.Control>; uses isSelected + onChange(value) (NOT onValueChange).",
+    "Input": "Thin wrapper over react-aria-components Input — accepts standard HTML props (value, onChange={(e) => ...}, disabled). Does NOT support onValueChange or isDisabled.",
+    "TextArea": "Same as Input — wrapper over react-aria-components TextArea. Use rows attr instead of minRows/maxRows. For complex layouts use a plain <textarea> with Tailwind classes.",
+    "Button": "Wrapper over react-aria-components Button. Loading prop is isPending (NOT isLoading). Uses onPress (not onClick), color, variant, size, isDisabled, isIconOnly, fullWidth.",
+    "Modal": "Uses compound Modal/ModalBackdrop/ModalContainer/ModalDialog/ModalHeader/ModalBody/ModalFooter + useOverlayState({ isOpen, onOpenChange }) — see ConfirmDialog.jsx for the canonical example."
+  },
+  "verifiedRendering": [
+    "/console (Dashboard)",
+    "/console/personal",
+    "/console/topup",
+    "/console/channel",
+    "/console/token",
+    "/console/log",
+    "/console/midjourney",
+    "/console/task",
+    "/console/redemption",
+    "/console/user",
+    "/console/playground",
+    "/console/models",
+    "/console/deployment",
+    "/console/subscription",
+    "/console/setting?tab=operation",
+    "/console/setting?tab=dashboard",
+    "/console/setting?tab=chats",
+    "/console/setting?tab=drawing",
+    "/console/setting?tab=payment",
+    "/console/setting?tab=ratio",
+    "/console/setting?tab=ratelimit",
+    "/console/setting?tab=models",
+    "/console/setting?tab=model-deployment",
+    "/console/setting?tab=performance",
+    "/console/setting?tab=system",
+    "/console/setting?tab=other",
+    "/pricing"
+  ],
+  "summary": {
+    "remainingHeroCompatImporters": 37,
+    "compatShimFunctional": true,
+    "criticalRenderBugsFixed": true
+  }
+}

web/package.json

@@ -4,40 +4,52 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@douyinfe/semi-icons": "^2.63.1",
-    "@douyinfe/semi-ui": "^2.69.1",
+    "@gravity-ui/icons": "^2.18.0",
+    "@heroui-pro/react": "^1.0.0-beta.1",
+    "@heroui/react": ">=3.0.0",
+    "@heroui/styles": ">=3.0.0",
     "@lobehub/icons": "^2.0.0",
+    "@number-flow/react": ">=0.5.0",
     "@visactor/react-vchart": "~1.8.8",
     "@visactor/vchart": "~1.8.8",
-    "@visactor/vchart-semi-theme": "~1.8.8",
     "axios": "1.15.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
+    "embla-carousel": ">=8.6.0",
+    "embla-carousel-react": ">=8.6.0",
+    "geist": "^1.7.0",
+    "heroui-native": "^1.0.2",
+    "heroui-native-pro": "^1.0.0-beta.1",
     "history": "^5.3.0",
     "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^7.2.0",
     "katex": "^0.16.22",
     "lucide-react": "^0.511.0",
     "marked": "^4.1.1",
     "mermaid": "^11.6.0",
+    "motion": ">=12.12.0",
     "qrcode.react": "^4.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-aria-components": ">=1.17.0",
+    "react-dom": "^19.1.0",
     "react-dropzone": "^14.2.3",
     "react-fireworks": "^1.0.4",
     "react-i18next": "^13.0.0",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": ">=4.10.0",
     "react-router-dom": "^6.3.0",
     "react-telegram-login": "^1.1.2",
-    "react-toastify": "^9.0.8",
     "react-turnstile": "^1.0.5",
+    "recharts": ">=2.0.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "sse.js": "^2.6.0",
+    "tailwind-merge": ">=3.4.0",
+    "tailwind-variants": ">=3.2.0",
     "unist-util-visit": "^5.0.0",
     "use-debounce": "^10.0.4"
   },
@@ -73,24 +85,30 @@
     ]
   },
   "devDependencies": {
-    "@douyinfe/vite-plugin-semi": "^2.74.0-alpha.6",
     "@so1ve/prettier-config": "^3.1.0",
+    "@tailwindcss/postcss": "^4.1.5",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.21",
+    "bcryptjs": "^3.0.3",
     "code-inspector-plugin": "^1.3.3",
     "eslint": "8.57.0",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "i18next-cli": "^1.10.3",
     "postcss": "^8.5.3",
     "prettier": "^3.0.0",
-    "tailwindcss": "^3",
+    "tailwindcss": "^4.1.5",
     "typescript": "4.4.2",
     "vite": "^5.2.0"
   },
   "prettier": {
     "singleQuote": true,
     "jsxSingleQuote": true
   },
-  "proxy": "http://localhost:3000"
+  "proxy": "http://localhost:3000",
+  "trustedDependencies": [
+    "heroui-pro",
+    "@heroui-pro/react",
+    "heroui-native-pro"
+  ]
 }

web/postcss.config.js

@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };

web/src/App.jsx

@@ -64,6 +64,9 @@ function DynamicOAuth2Callback() {
 function App() {
   const location = useLocation();
   const [statusState] = useContext(StatusContext);
+  const routesKey = location.pathname.startsWith('/console')
+    ? `${location.pathname}${location.search}`
+    : 'public-routes';
 
   // 获取模型广场权限配置
   const pricingRequireAuth = useMemo(() => {
@@ -89,7 +92,7 @@ function App() {
 
   return (
     <SetupCheck>
-      <Routes>
+      <Routes key={routesKey}>
         <Route
           path='/'
           element={