♻️ refactor(web): migrate React modules from .js to .jsx and align entrypoint

- Rename React components/pages/utilities that contain JSX to `.jsx` across `web/src` - Update import paths and re-exports to match new `.jsx` extensions - Fix Vite entry by switching `web/index.html` from `/src/index.js` to `/src/index.jsx` - Verified remaining `.js` files are plain JS (hooks/helpers/constants) and do not require JSX - No runtime behavior changes; extension and reference alignment only Context: Resolves the Vite pre-transform error caused by the stale `/src/index.js` entry after migrating to `.jsx`.

♻️ refactor(web): migrate React modules from .js to .jsx and align entrypoint
- Rename React components/pages/utilities that contain JSX to `.jsx` across `web/src` - Update import paths and re-exports to match new `.jsx` extensions - Fix Vite entry by switching `web/index.html` from `/src/index.js` to `/src/index.jsx` - Verified remaining `.js` files are plain JS (hooks/helpers/constants) and do not require JSX - No runtime behavior changes; extension and reference alignment only Context: Resolves the Vite pre-transform error caused by the stale `/src/index.js` entry after migrating to `.jsx`.
ba6ed31a · t0ng7u · 4f22ab64 · ba6ed31a · ba6ed31a · ba6ed31a
Commit ba6ed31a authored Aug 18, 2025 by t0ng7u
173 changed files
--- a/web/index.html
+++ b/web/index.html
 <!doctype html>
 <html lang="zh">
-  <head>
+<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#ffffff" />
-    <meta
+  <meta name="description" content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用" />
-      name="description"
-      content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用"
-    />
  <title>New API</title>
-  </head>
+</head>
-  <body>
+<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
-    <script type="module" src="/src/index.js"></script>
+  <script type="module" src="/src/index.jsx"></script>
-  </body>
+</body>
 </html>
\ No newline at end of file
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -19,17 +19,17 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { lazy, Suspense } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
-import Loading from './components/common/ui/Loading.js';
+import Loading from './components/common/ui/Loading';
 import User from './pages/User';
 import { AuthRedirect, PrivateRoute, AdminRoute } from './helpers';
-import RegisterForm from './components/auth/RegisterForm.js';
+import RegisterForm from './components/auth/RegisterForm';
-import LoginForm from './components/auth/LoginForm.js';
+import LoginForm from './components/auth/LoginForm';
 import NotFound from './pages/NotFound';
 import Forbidden from './pages/Forbidden';
 import Setting from './pages/Setting';
-import PasswordResetForm from './components/auth/PasswordResetForm.js';
+import PasswordResetForm from './components/auth/PasswordResetForm';
-import PasswordResetConfirm from './components/auth/PasswordResetConfirm.js';
+import PasswordResetConfirm from './components/auth/PasswordResetConfirm';
 import Channel from './pages/Channel';
 import Token from './pages/Token';
 import Redemption from './pages/Redemption';
@@ -38,14 +38,14 @@ import Log from './pages/Log';
 import Chat from './pages/Chat';
 import Chat2Link from './pages/Chat2Link';
 import Midjourney from './pages/Midjourney';
-import Pricing from './pages/Pricing/index.js';
+import Pricing from './pages/Pricing';
-import Task from './pages/Task/index.js';
+import Task from './pages/Task';
-import ModelPage from './pages/Model/index.js';
+import ModelPage from './pages/Model';
-import Playground from './pages/Playground/index.js';
+import Playground from './pages/Playground';
-import OAuth2Callback from './components/auth/OAuth2Callback.js';
+import OAuth2Callback from './components/auth/OAuth2Callback';
-import PersonalSetting from './components/settings/PersonalSetting.js';
+import PersonalSetting from './components/settings/PersonalSetting';
-import Setup from './pages/Setup/index.js';
+import Setup from './pages/Setup';
-import SetupCheck from './components/layout/SetupCheck.js';
+import SetupCheck from './components/layout/SetupCheck';
 const Home = lazy(() => import('./pages/Home'));
 const Dashboard = lazy(() => import('./pages/Dashboard'));

--- a/web/src/components/auth/LoginForm.js
+++ b/web/src/components/auth/LoginForm.js
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useContext, useEffect, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
-import { UserContext } from '../../context/User/index.js';
+import { UserContext } from '../../context/User';
 import {
  API,
  getLogo,
@@ -32,7 +32,7 @@ import {
  onGitHubOAuthClicked,
  onOIDCClicked,
  onLinuxDOOAuthClicked
-} from '../../helpers/index.js';
+} from '../../helpers';
 import Turnstile from 'react-turnstile';
 import {
  Button,
@@ -47,10 +47,10 @@ import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import TelegramLoginButton from 'react-telegram-login';
 import { IconGithubLogo, IconMail, IconLock } from '@douyinfe/semi-icons';
-import OIDCIcon from '../common/logo/OIDCIcon.js';
+import OIDCIcon from '../common/logo/OIDCIcon';
-import WeChatIcon from '../common/logo/WeChatIcon.js';
+import WeChatIcon from '../common/logo/WeChatIcon';
-import LinuxDoIcon from '../common/logo/LinuxDoIcon.js';
+import LinuxDoIcon from '../common/logo/LinuxDoIcon';
-import TwoFAVerification from './TwoFAVerification.js';
+import TwoFAVerification from './TwoFAVerification';
 import { useTranslation } from 'react-i18next';
 const LoginForm = () => {

--- a/web/src/components/auth/OAuth2Callback.js
+++ b/web/src/components/auth/OAuth2Callback.js
--- a/web/src/components/auth/PasswordResetConfirm.js
+++ b/web/src/components/auth/PasswordResetConfirm.js
--- a/web/src/components/auth/PasswordResetForm.js
+++ b/web/src/components/auth/PasswordResetForm.js
--- a/web/src/components/auth/RegisterForm.js
+++ b/web/src/components/auth/RegisterForm.js
@@ -28,7 +28,7 @@ import {
  updateAPI,
  getSystemName,
  setUserData
-} from '../../helpers/index.js';
+} from '../../helpers';
 import Turnstile from 'react-turnstile';
 import {
  Button,
@@ -45,12 +45,12 @@ import {
  onGitHubOAuthClicked,
  onLinuxDOOAuthClicked,
  onOIDCClicked,
-} from '../../helpers/index.js';
+} from '../../helpers';
-import OIDCIcon from '../common/logo/OIDCIcon.js';
+import OIDCIcon from '../common/logo/OIDCIcon';
-import LinuxDoIcon from '../common/logo/LinuxDoIcon.js';
+import LinuxDoIcon from '../common/logo/LinuxDoIcon';
-import WeChatIcon from '../common/logo/WeChatIcon.js';
+import WeChatIcon from '../common/logo/WeChatIcon';
 import TelegramLoginButton from 'react-telegram-login/src';
-import { UserContext } from '../../context/User/index.js';
+import { UserContext } from '../../context/User';
 import { useTranslation } from 'react-i18next';
 const RegisterForm = () => {

--- a/web/src/components/auth/TwoFAVerification.js
+++ b/web/src/components/auth/TwoFAVerification.js
--- a/web/src/components/common/logo/LinuxDoIcon.js
+++ b/web/src/components/common/logo/LinuxDoIcon.js
--- a/web/src/components/common/logo/OIDCIcon.js
+++ b/web/src/components/common/logo/OIDCIcon.js
--- a/web/src/components/common/logo/WeChatIcon.js
+++ b/web/src/components/common/logo/WeChatIcon.js
--- a/web/src/components/common/markdown/MarkdownRenderer.js
+++ b/web/src/components/common/markdown/MarkdownRenderer.js
--- a/web/src/components/common/ui/CardPro.js
+++ b/web/src/components/common/ui/CardPro.js
--- a/web/src/components/common/ui/CardTable.js
+++ b/web/src/components/common/ui/CardTable.js
--- a/web/src/components/common/ui/CompactModeToggle.js
+++ b/web/src/components/common/ui/CompactModeToggle.js
--- a/web/src/components/common/ui/JSONEditor.js
+++ b/web/src/components/common/ui/JSONEditor.js
--- a/web/src/components/common/ui/Loading.js
+++ b/web/src/components/common/ui/Loading.js
--- a/web/src/components/common/ui/ScrollableContainer.js
+++ b/web/src/components/common/ui/ScrollableContainer.js
--- a/web/src/components/dashboard/index.jsx
+++ b/web/src/components/dashboard/index.jsx
@@ -19,8 +19,8 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useContext, useEffect } from 'react';
 import { getRelativeTime } from '../../helpers';
-import { UserContext } from '../../context/User/index.js';
+import { UserContext } from '../../context/User';
-import { StatusContext } from '../../context/Status/index.js';
+import { StatusContext } from '../../context/Status';
 import DashboardHeader from './DashboardHeader';
 import StatsCards from './StatsCards';

--- a/web/src/components/layout/Footer.js
+++ b/web/src/components/layout/Footer.js
--- a/web/src/components/layout/HeaderBar.js
+++ b/web/src/components/layout/HeaderBar.js
@@ -17,4 +17,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
-export { default } from './HeaderBar/index.js';
+export { default } from './HeaderBar/index';
--- a/web/src/components/layout/HeaderBar/ActionButtons.js
+++ b/web/src/components/layout/HeaderBar/ActionButtons.js
@@ -18,11 +18,11 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import React from 'react';
-import NewYearButton from './NewYearButton.js';
+import NewYearButton from './NewYearButton';
-import NotificationButton from './NotificationButton.js';
+import NotificationButton from './NotificationButton';
-import ThemeToggle from './ThemeToggle.js';
+import ThemeToggle from './ThemeToggle';
-import LanguageSelector from './LanguageSelector.js';
+import LanguageSelector from './LanguageSelector';
-import UserArea from './UserArea.js';
+import UserArea from './UserArea';
 const ActionButtons = ({
  isNewYear,

--- a/web/src/components/layout/HeaderBar/HeaderLogo.js
+++ b/web/src/components/layout/HeaderBar/HeaderLogo.js
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Typography, Tag } from '@douyinfe/semi-ui';
-import SkeletonWrapper from './SkeletonWrapper.js';
+import SkeletonWrapper from './SkeletonWrapper';
 const HeaderLogo = ({
  isMobile,

--- a/web/src/components/layout/HeaderBar/LanguageSelector.js
+++ b/web/src/components/layout/HeaderBar/LanguageSelector.js
--- a/web/src/components/layout/HeaderBar/MobileMenuButton.js
+++ b/web/src/components/layout/HeaderBar/MobileMenuButton.js
--- a/web/src/components/layout/HeaderBar/Navigation.js
+++ b/web/src/components/layout/HeaderBar/Navigation.js
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Link } from 'react-router-dom';
-import SkeletonWrapper from './SkeletonWrapper.js';
+import SkeletonWrapper from './SkeletonWrapper';
 const Navigation = ({
  mainNavLinks,

--- a/web/src/components/layout/HeaderBar/NewYearButton.js
+++ b/web/src/components/layout/HeaderBar/NewYearButton.js
--- a/web/src/components/layout/HeaderBar/NotificationButton.js
+++ b/web/src/components/layout/HeaderBar/NotificationButton.js
--- a/web/src/components/layout/HeaderBar/SkeletonWrapper.js
+++ b/web/src/components/layout/HeaderBar/SkeletonWrapper.js
--- a/web/src/components/layout/HeaderBar/ThemeToggle.js
+++ b/web/src/components/layout/HeaderBar/ThemeToggle.js
--- a/web/src/components/layout/HeaderBar/UserArea.js
+++ b/web/src/components/layout/HeaderBar/UserArea.js
@@ -32,8 +32,8 @@ import {
  IconCreditCard,
  IconKey,
 } from '@douyinfe/semi-icons';
-import { stringToColor } from '../../../helpers/index.js';
+import { stringToColor } from '../../../helpers';
-import SkeletonWrapper from './SkeletonWrapper.js';
+import SkeletonWrapper from './SkeletonWrapper';
 const UserArea = ({
  userState,

--- a/web/src/components/layout/HeaderBar/index.js
+++ b/web/src/components/layout/HeaderBar/index.js
@@ -18,14 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import React from 'react';
-import { useHeaderBar } from '../../../hooks/common/useHeaderBar.js';
+import { useHeaderBar } from '../../../hooks/common/useHeaderBar';
-import { useNotifications } from '../../../hooks/common/useNotifications.js';
+import { useNotifications } from '../../../hooks/common/useNotifications';
-import { useNavigation } from '../../../hooks/common/useNavigation.js';
+import { useNavigation } from '../../../hooks/common/useNavigation';
-import NoticeModal from '../NoticeModal.js';
+import NoticeModal from '../NoticeModal';
-import MobileMenuButton from './MobileMenuButton.js';
+import MobileMenuButton from './MobileMenuButton';
-import HeaderLogo from './HeaderLogo.js';
+import HeaderLogo from './HeaderLogo';
-import Navigation from './Navigation.js';
+import Navigation from './Navigation';
-import ActionButtons from './ActionButtons.js';
+import ActionButtons from './ActionButtons';
 const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const {

--- a/web/src/components/layout/NoticeModal.js
+++ b/web/src/components/layout/NoticeModal.js
@@ -23,7 +23,7 @@ import { useTranslation } from 'react-i18next';
 import { API, showError, getRelativeTime } from '../../helpers';
 import { marked } from 'marked';
 import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
-import { StatusContext } from '../../context/Status/index.js';
+import { StatusContext } from '../../context/Status';
 import { Bell, Megaphone } from 'lucide-react';
 const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadKeys = [] }) => {

--- a/web/src/components/layout/PageLayout.js
+++ b/web/src/components/layout/PageLayout.js
@@ -17,19 +17,19 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
-import HeaderBar from './HeaderBar.js';
+import HeaderBar from './HeaderBar';
 import { Layout } from '@douyinfe/semi-ui';
-import SiderBar from './SiderBar.js';
+import SiderBar from './SiderBar';
-import App from '../../App.js';
+import App from '../../App';
-import FooterBar from './Footer.js';
+import FooterBar from './Footer';
 import { ToastContainer } from 'react-toastify';
 import React, { useContext, useEffect, useState } from 'react';
-import { useIsMobile } from '../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../hooks/common/useIsMobile';
-import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed.js';
+import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
 import { useTranslation } from 'react-i18next';
-import { API, getLogo, getSystemName, showError, setStatusData } from '../../helpers/index.js';
+import { API, getLogo, getSystemName, showError, setStatusData } from '../../helpers';
-import { UserContext } from '../../context/User/index.js';
+import { UserContext } from '../../context/User';
-import { StatusContext } from '../../context/Status/index.js';
+import { StatusContext } from '../../context/Status';
 import { useLocation } from 'react-router-dom';
 const { Sider, Content, Header } = Layout;

--- a/web/src/components/layout/SiderBar.js
+++ b/web/src/components/layout/SiderBar.js
@@ -20,14 +20,14 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { getLucideIcon } from '../../helpers/render.js';
+import { getLucideIcon } from '../../helpers/render';
 import { ChevronLeft } from 'lucide-react';
-import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed.js';
+import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
 import {
  isAdmin,
  isRoot,
  showError
-} from '../../helpers/index.js';
+} from '../../helpers';
 import {
  Nav,

--- a/web/src/components/playground/ChatArea.js
+++ b/web/src/components/playground/ChatArea.js
--- a/web/src/components/playground/CodeViewer.js
+++ b/web/src/components/playground/CodeViewer.js
--- a/web/src/components/playground/ConfigManager.js
+++ b/web/src/components/playground/ConfigManager.js
--- a/web/src/components/playground/CustomInputRender.js
+++ b/web/src/components/playground/CustomInputRender.js
--- a/web/src/components/playground/CustomRequestEditor.js
+++ b/web/src/components/playground/CustomRequestEditor.js
--- a/web/src/components/playground/DebugPanel.js
+++ b/web/src/components/playground/DebugPanel.js
--- a/web/src/components/playground/FloatingButtons.js
+++ b/web/src/components/playground/FloatingButtons.js
--- a/web/src/components/playground/ImageUrlInput.js
+++ b/web/src/components/playground/ImageUrlInput.js
--- a/web/src/components/playground/MessageActions.js
+++ b/web/src/components/playground/MessageActions.js
--- a/web/src/components/playground/MessageContent.js
+++ b/web/src/components/playground/MessageContent.js
--- a/web/src/components/playground/ParameterControl.js
+++ b/web/src/components/playground/ParameterControl.js
--- a/web/src/components/playground/SettingsPanel.js
+++ b/web/src/components/playground/SettingsPanel.js
--- a/web/src/components/playground/ThinkingContent.js
+++ b/web/src/components/playground/ThinkingContent.js
--- a/web/src/components/settings/ChannelSelectorModal.js
+++ b/web/src/components/settings/ChannelSelectorModal.js
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { useIsMobile } from '../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../hooks/common/useIsMobile';
 import {
  Modal,
  Table,

--- a/web/src/components/settings/ChatsSetting.js
+++ b/web/src/components/settings/ChatsSetting.js
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
-import SettingsChats from '../../pages/Setting/Chat/SettingsChats.js';
+import SettingsChats from '../../pages/Setting/Chat/SettingsChats';
 import { API, showError, toBoolean } from '../../helpers';
 const ChatsSetting = () => {

--- a/web/src/components/settings/DashboardSetting.js
+++ b/web/src/components/settings/DashboardSetting.js
@@ -20,11 +20,11 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState, useMemo } from 'react';
 import { Card, Spin, Button, Modal } from '@douyinfe/semi-ui';
 import { API, showError, showSuccess, toBoolean } from '../../helpers';
-import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo.js';
+import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo';
-import SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements.js';
+import SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements';
-import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ.js';
+import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ';
-import SettingsUptimeKuma from '../../pages/Setting/Dashboard/SettingsUptimeKuma.js';
+import SettingsUptimeKuma from '../../pages/Setting/Dashboard/SettingsUptimeKuma';
-import SettingsDataDashboard from '../../pages/Setting/Dashboard/SettingsDataDashboard.js';
+import SettingsDataDashboard from '../../pages/Setting/Dashboard/SettingsDataDashboard';
 const DashboardSetting = () => {
  let [inputs, setInputs] = useState({

--- a/web/src/components/settings/DrawingSetting.js
+++ b/web/src/components/settings/DrawingSetting.js
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
-import SettingsDrawing from '../../pages/Setting/Drawing/SettingsDrawing.js';
+import SettingsDrawing from '../../pages/Setting/Drawing/SettingsDrawing';
 import { API, showError, toBoolean } from '../../helpers';
 const DrawingSetting = () => {

--- a/web/src/components/settings/ModelSetting.js
+++ b/web/src/components/settings/ModelSetting.js
@@ -22,9 +22,9 @@ import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
 import { API, showError, showSuccess, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
-import SettingGeminiModel from '../../pages/Setting/Model/SettingGeminiModel.js';
+import SettingGeminiModel from '../../pages/Setting/Model/SettingGeminiModel';
-import SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel.js';
+import SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel';
-import SettingGlobalModel from '../../pages/Setting/Model/SettingGlobalModel.js';
+import SettingGlobalModel from '../../pages/Setting/Model/SettingGlobalModel';
 const ModelSetting = () => {
  const { t } = useTranslation();

--- a/web/src/components/settings/OperationSetting.js
+++ b/web/src/components/settings/OperationSetting.js
@@ -19,11 +19,11 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
-import SettingsGeneral from '../../pages/Setting/Operation/SettingsGeneral.js';
+import SettingsGeneral from '../../pages/Setting/Operation/SettingsGeneral';
-import SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensitiveWords.js';
+import SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensitiveWords';
-import SettingsLog from '../../pages/Setting/Operation/SettingsLog.js';
+import SettingsLog from '../../pages/Setting/Operation/SettingsLog';
-import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring.js';
+import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring';
-import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit.js';
+import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit';
 import { API, showError, toBoolean } from '../../helpers';
 const OperationSetting = () => {

--- a/web/src/components/settings/OtherSetting.js
+++ b/web/src/components/settings/OtherSetting.js
@@ -31,7 +31,7 @@ import {
 import { API, showError, showSuccess, timestamp2string } from '../../helpers';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
-import { StatusContext } from '../../context/Status/index.js';
+import { StatusContext } from '../../context/Status';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 const OtherSetting = () => {

--- a/web/src/components/settings/PaymentSetting.js
+++ b/web/src/components/settings/PaymentSetting.js
@@ -19,9 +19,9 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
-import SettingsGeneralPayment from '../../pages/Setting/Payment/SettingsGeneralPayment.js';
+import SettingsGeneralPayment from '../../pages/Setting/Payment/SettingsGeneralPayment';
-import SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway.js';
+import SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway';
-import SettingsPaymentGatewayStripe from '../../pages/Setting/Payment/SettingsPaymentGatewayStripe.js';
+import SettingsPaymentGatewayStripe from '../../pages/Setting/Payment/SettingsPaymentGatewayStripe';
 import { API, showError, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';

--- a/web/src/components/settings/PersonalSetting.js
+++ b/web/src/components/settings/PersonalSetting.js
--- a/web/src/components/settings/RateLimitSetting.js
+++ b/web/src/components/settings/RateLimitSetting.js
@@ -20,9 +20,9 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
-import { API, showError, toBoolean } from '../../helpers/index.js';
+import { API, showError, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
-import RequestRateLimit from '../../pages/Setting/RateLimit/SettingsRequestRateLimit.js';
+import RequestRateLimit from '../../pages/Setting/RateLimit/SettingsRequestRateLimit';
 const RateLimitSetting = () => {
  const { t } = useTranslation();

--- a/web/src/components/settings/RatioSetting.js
+++ b/web/src/components/settings/RatioSetting.js
@@ -21,11 +21,11 @@ import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
-import GroupRatioSettings from '../../pages/Setting/Ratio/GroupRatioSettings.js';
+import GroupRatioSettings from '../../pages/Setting/Ratio/GroupRatioSettings';
-import ModelRatioSettings from '../../pages/Setting/Ratio/ModelRatioSettings.js';
+import ModelRatioSettings from '../../pages/Setting/Ratio/ModelRatioSettings';
-import ModelSettingsVisualEditor from '../../pages/Setting/Ratio/ModelSettingsVisualEditor.js';
+import ModelSettingsVisualEditor from '../../pages/Setting/Ratio/ModelSettingsVisualEditor';
-import ModelRatioNotSetEditor from '../../pages/Setting/Ratio/ModelRationNotSetEditor.js';
+import ModelRatioNotSetEditor from '../../pages/Setting/Ratio/ModelRationNotSetEditor';
-import UpstreamRatioSync from '../../pages/Setting/Ratio/UpstreamRatioSync.js';
+import UpstreamRatioSync from '../../pages/Setting/Ratio/UpstreamRatioSync';
 import { API, showError, toBoolean } from '../../helpers';

--- a/web/src/components/settings/SystemSetting.js
+++ b/web/src/components/settings/SystemSetting.js
--- a/web/src/components/settings/personal/cards/AccountManagement.js
+++ b/web/src/components/settings/personal/cards/AccountManagement.js
--- a/web/src/components/settings/personal/cards/ModelsList.js
+++ b/web/src/components/settings/personal/cards/ModelsList.js
--- a/web/src/components/settings/personal/cards/NotificationSettings.js
+++ b/web/src/components/settings/personal/cards/NotificationSettings.js
--- a/web/src/components/settings/personal/components/TwoFASetting.js
+++ b/web/src/components/settings/personal/components/TwoFASetting.js
--- a/web/src/components/settings/personal/components/UserInfoHeader.js
+++ b/web/src/components/settings/personal/components/UserInfoHeader.js
--- a/web/src/components/settings/personal/modals/AccountDeleteModal.js
+++ b/web/src/components/settings/personal/modals/AccountDeleteModal.js
--- a/web/src/components/settings/personal/modals/ChangePasswordModal.js
+++ b/web/src/components/settings/personal/modals/ChangePasswordModal.js
--- a/web/src/components/settings/personal/modals/EmailBindModal.js
+++ b/web/src/components/settings/personal/modals/EmailBindModal.js
--- a/web/src/components/settings/personal/modals/WeChatBindModal.js
+++ b/web/src/components/settings/personal/modals/WeChatBindModal.js
--- a/web/src/components/table/channels/ChannelsColumnDefs.js
+++ b/web/src/components/table/channels/ChannelsColumnDefs.js
@@ -35,8 +35,8 @@ import {
  renderQuota,
  getChannelIcon,
  renderQuotaWithAmount
-} from '../../../helpers/index.js';
+} from '../../../helpers';
-import { CHANNEL_OPTIONS } from '../../../constants/index.js';
+import { CHANNEL_OPTIONS } from '../../../constants';
 import { IconTreeTriangleDown, IconMore } from '@douyinfe/semi-icons';
 import { FaRandom } from 'react-icons/fa';

--- a/web/src/components/table/channels/ChannelsTable.jsx
+++ b/web/src/components/table/channels/ChannelsTable.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo } from 'react';
 import { Empty } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark
 } from '@douyinfe/semi-illustrations';
-import { getChannelsColumns } from './ChannelsColumnDefs.js';
+import { getChannelsColumns } from './ChannelsColumnDefs';
 const ChannelsTable = (channelsData) => {
  const {

--- a/web/src/components/table/channels/ChannelsTabs.jsx
+++ b/web/src/components/table/channels/ChannelsTabs.jsx
@@ -19,8 +19,8 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Tabs, TabPane, Tag } from '@douyinfe/semi-ui';
-import { CHANNEL_OPTIONS } from '../../../constants/index.js';
+import { CHANNEL_OPTIONS } from '../../../constants';
-import { getChannelIcon } from '../../../helpers/index.js';
+import { getChannelIcon } from '../../../helpers';
 const ChannelsTabs = ({
  enableTagMode,

--- a/web/src/components/table/channels/index.jsx
+++ b/web/src/components/table/channels/index.jsx
@@ -18,19 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import React from 'react';
-import CardPro from '../../common/ui/CardPro.js';
+import CardPro from '../../common/ui/CardPro';
-import ChannelsTable from './ChannelsTable.jsx';
+import ChannelsTable from './ChannelsTable';
-import ChannelsActions from './ChannelsActions.jsx';
+import ChannelsActions from './ChannelsActions';
-import ChannelsFilters from './ChannelsFilters.jsx';
+import ChannelsFilters from './ChannelsFilters';
-import ChannelsTabs from './ChannelsTabs.jsx';
+import ChannelsTabs from './ChannelsTabs';
-import { useChannelsData } from '../../../hooks/channels/useChannelsData.js';
+import { useChannelsData } from '../../../hooks/channels/useChannelsData';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
-import BatchTagModal from './modals/BatchTagModal.jsx';
+import BatchTagModal from './modals/BatchTagModal';
-import ModelTestModal from './modals/ModelTestModal.jsx';
+import ModelTestModal from './modals/ModelTestModal';
-import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
-import EditChannelModal from './modals/EditChannelModal.jsx';
+import EditChannelModal from './modals/EditChannelModal';
-import EditTagModal from './modals/EditTagModal.jsx';
+import EditTagModal from './modals/EditTagModal';
-import MultiKeyManageModal from './modals/MultiKeyManageModal.jsx';
+import MultiKeyManageModal from './modals/MultiKeyManageModal';
 import { createCardProPagination } from '../../../helpers/utils';
 const ChannelsPage = () => {

--- a/web/src/components/table/channels/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/channels/modals/ColumnSelectorModal.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
-import { getChannelsColumns } from '../ChannelsColumnDefs.js';
+import { getChannelsColumns } from '../ChannelsColumnDefs';
 const ColumnSelectorModal = ({
  showColumnSelector,

--- a/web/src/components/table/channels/modals/EditChannelModal.jsx
+++ b/web/src/components/table/channels/modals/EditChannelModal.jsx
@@ -26,7 +26,7 @@ import {
  showSuccess,
  verifyJSON,
 } from '../../../../helpers';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import { CHANNEL_OPTIONS } from '../../../../constants';
 import {
  SideSheet,

--- a/web/src/components/table/channels/modals/ModelSelectModal.jsx
+++ b/web/src/components/table/channels/modals/ModelSelectModal.jsx
+/*
+Copyright (C) 2025 QuantumNous
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+For commercial licensing, please contact support@quantumnous.com
+*/
 import React, { useState, useEffect } from 'react';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import { Modal, Checkbox, Spin, Input, Typography, Empty, Tabs, Collapse } from '@douyinfe/semi-ui';
 import {
  IllustrationNoResult,

--- a/web/src/components/table/channels/modals/ModelTestModal.jsx
+++ b/web/src/components/table/channels/modals/ModelTestModal.jsx
@@ -27,8 +27,8 @@ import {
  Typography
 } from '@douyinfe/semi-ui';
 import { IconSearch } from '@douyinfe/semi-icons';
-import { copy, showError, showInfo, showSuccess } from '../../../../helpers/index.js';
+import { copy, showError, showInfo, showSuccess } from '../../../../helpers';
-import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants/index.js';
+import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
 const ModelTestModal = ({
  showModelTestModal,

--- a/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
+++ b/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
@@ -38,7 +38,7 @@ import {
  Card
 } from '@douyinfe/semi-ui';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
-import { API, showError, showSuccess, timestamp2string } from '../../../../helpers/index.js';
+import { API, showError, showSuccess, timestamp2string } from '../../../../helpers';
 const { Text } = Typography;

--- a/web/src/components/table/mj-logs/MjLogsColumnDefs.js
+++ b/web/src/components/table/mj-logs/MjLogsColumnDefs.js
--- a/web/src/components/table/mj-logs/MjLogsTable.jsx
+++ b/web/src/components/table/mj-logs/MjLogsTable.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo } from 'react';
 import { Empty } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark,
 } from '@douyinfe/semi-illustrations';
-import { getMjLogsColumns } from './MjLogsColumnDefs.js';
+import { getMjLogsColumns } from './MjLogsColumnDefs';
 const MjLogsTable = (mjLogsData) => {
  const {

--- a/web/src/components/table/mj-logs/index.jsx
+++ b/web/src/components/table/mj-logs/index.jsx
@@ -19,14 +19,14 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Layout } from '@douyinfe/semi-ui';
-import CardPro from '../../common/ui/CardPro.js';
+import CardPro from '../../common/ui/CardPro';
-import MjLogsTable from './MjLogsTable.jsx';
+import MjLogsTable from './MjLogsTable';
-import MjLogsActions from './MjLogsActions.jsx';
+import MjLogsActions from './MjLogsActions';
-import MjLogsFilters from './MjLogsFilters.jsx';
+import MjLogsFilters from './MjLogsFilters';
-import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
-import ContentModal from './modals/ContentModal.jsx';
+import ContentModal from './modals/ContentModal';
-import { useMjLogsData } from '../../../hooks/mj-logs/useMjLogsData.js';
+import { useMjLogsData } from '../../../hooks/mj-logs/useMjLogsData';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
 const MjLogsPage = () => {

--- a/web/src/components/table/mj-logs/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/mj-logs/modals/ColumnSelectorModal.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
-import { getMjLogsColumns } from '../MjLogsColumnDefs.js';
+import { getMjLogsColumns } from '../MjLogsColumnDefs';
 const ColumnSelectorModal = ({
  showColumnSelector,

--- a/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
+++ b/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
--- a/web/src/components/table/models/ModelsActions.jsx
+++ b/web/src/components/table/models/ModelsActions.jsx
@@ -18,13 +18,13 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import React, { useState } from 'react';
-import MissingModelsModal from './modals/MissingModelsModal.jsx';
+import MissingModelsModal from './modals/MissingModelsModal';
-import PrefillGroupManagement from './modals/PrefillGroupManagement.jsx';
+import PrefillGroupManagement from './modals/PrefillGroupManagement';
-import EditPrefillGroupModal from './modals/EditPrefillGroupModal.jsx';
+import EditPrefillGroupModal from './modals/EditPrefillGroupModal';
 import { Button, Modal } from '@douyinfe/semi-ui';
 import { showSuccess, showError, copy } from '../../../helpers';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
-import SelectionNotification from './components/SelectionNotification.jsx';
+import SelectionNotification from './components/SelectionNotification';
 const ModelsActions = ({
  selectedKeys,

--- a/web/src/components/table/models/ModelsColumnDefs.js
+++ b/web/src/components/table/models/ModelsColumnDefs.js
--- a/web/src/components/table/models/ModelsTable.jsx
+++ b/web/src/components/table/models/ModelsTable.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo } from 'react';
 import { Empty } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark,
 } from '@douyinfe/semi-illustrations';
-import { getModelsColumns } from './ModelsColumnDefs.js';
+import { getModelsColumns } from './ModelsColumnDefs';
 const ModelsTable = (modelsData) => {
  const {

--- a/web/src/components/table/models/index.jsx
+++ b/web/src/components/table/models/index.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import CardPro from '../../common/ui/CardPro';
-import ModelsTable from './ModelsTable.jsx';
+import ModelsTable from './ModelsTable';
-import ModelsActions from './ModelsActions.jsx';
+import ModelsActions from './ModelsActions';
-import ModelsFilters from './ModelsFilters.jsx';
+import ModelsFilters from './ModelsFilters';
-import ModelsTabs from './ModelsTabs.jsx';
+import ModelsTabs from './ModelsTabs';
-import EditModelModal from './modals/EditModelModal.jsx';
+import EditModelModal from './modals/EditModelModal';
-import EditVendorModal from './modals/EditVendorModal.jsx';
+import EditVendorModal from './modals/EditVendorModal';
 import { useModelsData } from '../../../hooks/models/useModelsData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';

--- a/web/src/components/table/redemptions/RedemptionsColumnDefs.js
+++ b/web/src/components/table/redemptions/RedemptionsColumnDefs.js
--- a/web/src/components/table/redemptions/RedemptionsTable.jsx
+++ b/web/src/components/table/redemptions/RedemptionsTable.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo, useState } from 'react';
 import { Empty } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark

--- a/web/src/components/table/redemptions/index.jsx
+++ b/web/src/components/table/redemptions/index.jsx
@@ -19,10 +19,10 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import CardPro from '../../common/ui/CardPro';
-import RedemptionsTable from './RedemptionsTable.jsx';
+import RedemptionsTable from './RedemptionsTable';
-import RedemptionsActions from './RedemptionsActions.jsx';
+import RedemptionsActions from './RedemptionsActions';
-import RedemptionsFilters from './RedemptionsFilters.jsx';
+import RedemptionsFilters from './RedemptionsFilters';
-import RedemptionsDescription from './RedemptionsDescription.jsx';
+import RedemptionsDescription from './RedemptionsDescription';
 import EditRedemptionModal from './modals/EditRedemptionModal';
 import { useRedemptionsData } from '../../../hooks/redemptions/useRedemptionsData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';

--- a/web/src/components/table/redemptions/modals/EditRedemptionModal.jsx
+++ b/web/src/components/table/redemptions/modals/EditRedemptionModal.jsx
@@ -27,7 +27,7 @@ import {
  renderQuota,
  renderQuotaWithPrompt,
 } from '../../../../helpers';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
  Button,
  Modal,

--- a/web/src/components/table/task-logs/TaskLogsColumnDefs.js
+++ b/web/src/components/table/task-logs/TaskLogsColumnDefs.js
--- a/web/src/components/table/task-logs/TaskLogsTable.jsx
+++ b/web/src/components/table/task-logs/TaskLogsTable.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo } from 'react';
 import { Empty } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark,
 } from '@douyinfe/semi-illustrations';
-import { getTaskLogsColumns } from './TaskLogsColumnDefs.js';
+import { getTaskLogsColumns } from './TaskLogsColumnDefs';
 const TaskLogsTable = (taskLogsData) => {
  const {

--- a/web/src/components/table/task-logs/index.jsx
+++ b/web/src/components/table/task-logs/index.jsx
@@ -19,14 +19,14 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Layout } from '@douyinfe/semi-ui';
-import CardPro from '../../common/ui/CardPro.js';
+import CardPro from '../../common/ui/CardPro';
-import TaskLogsTable from './TaskLogsTable.jsx';
+import TaskLogsTable from './TaskLogsTable';
-import TaskLogsActions from './TaskLogsActions.jsx';
+import TaskLogsActions from './TaskLogsActions';
-import TaskLogsFilters from './TaskLogsFilters.jsx';
+import TaskLogsFilters from './TaskLogsFilters';
-import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
-import ContentModal from './modals/ContentModal.jsx';
+import ContentModal from './modals/ContentModal';
-import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData.js';
+import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
 const TaskLogsPage = () => {

--- a/web/src/components/table/task-logs/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/task-logs/modals/ColumnSelectorModal.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
-import { getTaskLogsColumns } from '../TaskLogsColumnDefs.js';
+import { getTaskLogsColumns } from '../TaskLogsColumnDefs';
 const ColumnSelectorModal = ({
  showColumnSelector,

--- a/web/src/components/table/tokens/TokensColumnDefs.js
+++ b/web/src/components/table/tokens/TokensColumnDefs.js
--- a/web/src/components/table/tokens/TokensTable.jsx
+++ b/web/src/components/table/tokens/TokensTable.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo } from 'react';
 import { Empty } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark,
 } from '@douyinfe/semi-illustrations';
-import { getTokensColumns } from './TokensColumnDefs.js';
+import { getTokensColumns } from './TokensColumnDefs';
 const TokensTable = (tokensData) => {
  const {

--- a/web/src/components/table/tokens/index.jsx
+++ b/web/src/components/table/tokens/index.jsx
@@ -21,10 +21,10 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Notification, Button, Space, Toast, Typography, Select } from '@douyinfe/semi-ui';
 import { API, showError, getModelCategories, selectFilter } from '../../../helpers';
 import CardPro from '../../common/ui/CardPro';
-import TokensTable from './TokensTable.jsx';
+import TokensTable from './TokensTable';
-import TokensActions from './TokensActions.jsx';
+import TokensActions from './TokensActions';
-import TokensFilters from './TokensFilters.jsx';
+import TokensFilters from './TokensFilters';
-import TokensDescription from './TokensDescription.jsx';
+import TokensDescription from './TokensDescription';
 import EditTokenModal from './modals/EditTokenModal';
 import { useTokensData } from '../../../hooks/tokens/useTokensData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';

--- a/web/src/components/table/tokens/modals/EditTokenModal.jsx
+++ b/web/src/components/table/tokens/modals/EditTokenModal.jsx
@@ -28,7 +28,7 @@ import {
  getModelCategories,
  selectFilter,
 } from '../../../../helpers';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
  Button,
  SideSheet,

--- a/web/src/components/table/usage-logs/UsageLogsColumnDefs.js
+++ b/web/src/components/table/usage-logs/UsageLogsColumnDefs.js
--- a/web/src/components/table/usage-logs/UsageLogsTable.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsTable.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo } from 'react';
 import { Empty, Descriptions } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark,
 } from '@douyinfe/semi-illustrations';
-import { getLogsColumns } from './UsageLogsColumnDefs.js';
+import { getLogsColumns } from './UsageLogsColumnDefs';
 const LogsTable = (logsData) => {
  const {

--- a/web/src/components/table/usage-logs/index.jsx
+++ b/web/src/components/table/usage-logs/index.jsx
@@ -18,14 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import React from 'react';
-import CardPro from '../../common/ui/CardPro.js';
+import CardPro from '../../common/ui/CardPro';
-import LogsTable from './UsageLogsTable.jsx';
+import LogsTable from './UsageLogsTable';
-import LogsActions from './UsageLogsActions.jsx';
+import LogsActions from './UsageLogsActions';
-import LogsFilters from './UsageLogsFilters.jsx';
+import LogsFilters from './UsageLogsFilters';
-import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
-import UserInfoModal from './modals/UserInfoModal.jsx';
+import UserInfoModal from './modals/UserInfoModal';
-import { useLogsData } from '../../../hooks/usage-logs/useUsageLogsData.js';
+import { useLogsData } from '../../../hooks/usage-logs/useUsageLogsData';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
 const LogsPage = () => {

--- a/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
-import { getLogsColumns } from '../UsageLogsColumnDefs.js';
+import { getLogsColumns } from '../UsageLogsColumnDefs';
 const ColumnSelectorModal = ({
  showColumnSelector,

--- a/web/src/components/table/users/UsersColumnDefs.js
+++ b/web/src/components/table/users/UsersColumnDefs.js
--- a/web/src/components/table/users/UsersTable.jsx
+++ b/web/src/components/table/users/UsersTable.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useMemo, useState } from 'react';
 import { Empty } from '@douyinfe/semi-ui';
-import CardTable from '../../common/ui/CardTable.js';
+import CardTable from '../../common/ui/CardTable';
 import {
  IllustrationNoResult,
  IllustrationNoResultDark

--- a/web/src/components/table/users/index.jsx
+++ b/web/src/components/table/users/index.jsx
@@ -19,12 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import CardPro from '../../common/ui/CardPro';
-import UsersTable from './UsersTable.jsx';
+import UsersTable from './UsersTable';
-import UsersActions from './UsersActions.jsx';
+import UsersActions from './UsersActions';
-import UsersFilters from './UsersFilters.jsx';
+import UsersFilters from './UsersFilters';
-import UsersDescription from './UsersDescription.jsx';
+import UsersDescription from './UsersDescription';
-import AddUserModal from './modals/AddUserModal.jsx';
+import AddUserModal from './modals/AddUserModal';
-import EditUserModal from './modals/EditUserModal.jsx';
+import EditUserModal from './modals/EditUserModal';
 import { useUsersData } from '../../../hooks/users/useUsersData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';

--- a/web/src/components/table/users/modals/AddUserModal.jsx
+++ b/web/src/components/table/users/modals/AddUserModal.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useState, useRef } from 'react';
 import { API, showError, showSuccess } from '../../../../helpers';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
  Button,
  SideSheet,

--- a/web/src/components/table/users/modals/EditUserModal.jsx
+++ b/web/src/components/table/users/modals/EditUserModal.jsx
@@ -26,7 +26,7 @@ import {
  renderQuota,
  renderQuotaWithPrompt,
 } from '../../../../helpers';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
  Button,
  Modal,

--- a/web/src/components/topup/index.jsx
+++ b/web/src/components/topup/index.jsx
@@ -34,7 +34,7 @@ import {
 } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 import { UserContext } from '../../context/User';
-import { StatusContext } from '../../context/Status/index.js';
+import { StatusContext } from '../../context/Status';
 import RechargeCard from './RechargeCard';
 import InvitationCard from './InvitationCard';

--- a/web/src/context/Status/index.js
+++ b/web/src/context/Status/index.js
--- a/web/src/context/Theme/index.js
+++ b/web/src/context/Theme/index.js
--- a/web/src/context/User/index.js
+++ b/web/src/context/User/index.js
--- a/web/src/helpers/auth.js
+++ b/web/src/helpers/auth.js
--- a/web/src/helpers/dashboard.js
+++ b/web/src/helpers/dashboard.js
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import i18next from 'i18next';
 import { Modal, Tag, Typography, Avatar } from '@douyinfe/semi-ui';
 import { copy, showSuccess } from './utils';
-import { MOBILE_BREAKPOINT } from '../hooks/common/useIsMobile.js';
+import { MOBILE_BREAKPOINT } from '../hooks/common/useIsMobile';
 import { visit } from 'unist-util-visit';
 import * as LobeIcons from '@lobehub/icons';
 import {

--- a/web/src/helpers/utils.js
+++ b/web/src/helpers/utils.js
@@ -23,7 +23,7 @@ import React from 'react';
 import { toast } from 'react-toastify';
 import { THINK_TAG_REGEX, MESSAGE_ROLES } from '../constants/playground.constants';
 import { TABLE_COMPACT_MODES_KEY } from '../constants';
-import { MOBILE_BREAKPOINT } from '../hooks/common/useIsMobile.js';
+import { MOBILE_BREAKPOINT } from '../hooks/common/useIsMobile';
 const HTMLToastContent = ({ htmlContent }) => {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;

--- a/web/src/hooks/channels/useChannelsData.js
+++ b/web/src/hooks/channels/useChannelsData.js
@@ -26,10 +26,10 @@ import {
  showSuccess,
  loadChannelModels,
  copy
-} from '../../helpers/index.js';
+} from '../../helpers';
-import { CHANNEL_OPTIONS, ITEMS_PER_PAGE, MODEL_TABLE_PAGE_SIZE } from '../../constants/index.js';
+import { CHANNEL_OPTIONS, ITEMS_PER_PAGE, MODEL_TABLE_PAGE_SIZE } from '../../constants';
-import { useIsMobile } from '../common/useIsMobile.js';
+import { useIsMobile } from '../common/useIsMobile';
-import { useTableCompactMode } from '../common/useTableCompactMode.js';
+import { useTableCompactMode } from '../common/useTableCompactMode';
 import { Modal } from '@douyinfe/semi-ui';
 export const useChannelsData = () => {

--- a/web/src/hooks/common/useHeaderBar.js
+++ b/web/src/hooks/common/useHeaderBar.js
@@ -20,13 +20,13 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState, useEffect, useContext } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { UserContext } from '../../context/User/index.js';
+import { UserContext } from '../../context/User';
-import { StatusContext } from '../../context/Status/index.js';
+import { StatusContext } from '../../context/Status';
-import { useSetTheme, useTheme } from '../../context/Theme/index.js';
+import { useSetTheme, useTheme } from '../../context/Theme';
-import { getLogo, getSystemName, API, showSuccess } from '../../helpers/index.js';
+import { getLogo, getSystemName, API, showSuccess } from '../../helpers';
-import { useIsMobile } from './useIsMobile.js';
+import { useIsMobile } from './useIsMobile';
-import { useSidebarCollapsed } from './useSidebarCollapsed.js';
+import { useSidebarCollapsed } from './useSidebarCollapsed';
-import { useMinimumLoadingTime } from './useMinimumLoadingTime.js';
+import { useMinimumLoadingTime } from './useMinimumLoadingTime';
 export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const { t, i18n } = useTranslation();

--- a/web/src/hooks/dashboard/useDashboardCharts.js
+++ b/web/src/hooks/dashboard/useDashboardCharts.js
--- a/web/src/hooks/dashboard/useDashboardStats.js
+++ b/web/src/hooks/dashboard/useDashboardStats.js
--- a/web/src/hooks/model-pricing/useModelPricingData.js
+++ b/web/src/hooks/model-pricing/useModelPricingData.js
@@ -21,8 +21,8 @@ import { useState, useEffect, useContext, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { API, copy, showError, showInfo, showSuccess } from '../../helpers';
 import { Modal } from '@douyinfe/semi-ui';
-import { UserContext } from '../../context/User/index.js';
+import { UserContext } from '../../context/User';
-import { StatusContext } from '../../context/Status/index.js';
+import { StatusContext } from '../../context/Status';
 export const useModelPricingData = () => {
  const { t } = useTranslation();

--- a/web/src/hooks/models/useModelsData.js
+++ b/web/src/hooks/models/useModelsData.js
--- a/web/src/hooks/playground/useApiRequest.js
+++ b/web/src/hooks/playground/useApiRequest.js
--- a/web/src/hooks/playground/useMessageActions.js
+++ b/web/src/hooks/playground/useMessageActions.js
--- a/web/src/hooks/playground/useMessageEdit.js
+++ b/web/src/hooks/playground/useMessageEdit.js
--- a/web/src/hooks/redemptions/useRedemptionsData.js
+++ b/web/src/hooks/redemptions/useRedemptionsData.js
--- a/web/src/hooks/tokens/useTokensData.js
+++ b/web/src/hooks/tokens/useTokensData.js
--- a/web/src/hooks/usage-logs/useUsageLogsData.js
+++ b/web/src/hooks/usage-logs/useUsageLogsData.js
--- a/web/src/hooks/users/useUsersData.js
+++ b/web/src/hooks/users/useUsersData.js
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -25,8 +25,8 @@ import { UserProvider } from './context/User';
 import 'react-toastify/dist/ReactToastify.css';
 import { StatusProvider } from './context/Status';
 import { ThemeProvider } from './context/Theme';
-import PageLayout from './components/layout/PageLayout.js';
+import PageLayout from './components/layout/PageLayout';
-import './i18n/i18n.js';
+import './i18n/i18n';
 import './index.css';
 import { LocaleProvider } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';

--- a/web/src/pages/About/index.js
+++ b/web/src/pages/About/index.js
--- a/web/src/pages/Channel/index.js
+++ b/web/src/pages/Channel/index.js
--- a/web/src/pages/Chat/index.js
+++ b/web/src/pages/Chat/index.js
--- a/web/src/pages/Chat2Link/index.js
+++ b/web/src/pages/Chat2Link/index.js
--- a/web/src/pages/Dashboard/index.js
+++ b/web/src/pages/Dashboard/index.js
--- a/web/src/pages/Forbidden/index.js
+++ b/web/src/pages/Forbidden/index.js
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useContext, useEffect, useState } from 'react';
 import { Button, Typography, Tag, Input, ScrollList, ScrollItem } from '@douyinfe/semi-ui';
 import { API, showError, copy, showSuccess } from '../../helpers';
-import { useIsMobile } from '../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../hooks/common/useIsMobile';
 import { API_ENDPOINTS } from '../../constants/common.constant';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';

--- a/web/src/pages/Log/index.js
+++ b/web/src/pages/Log/index.js
--- a/web/src/pages/Midjourney/index.js
+++ b/web/src/pages/Midjourney/index.js
--- a/web/src/pages/Model/index.js
+++ b/web/src/pages/Model/index.js
--- a/web/src/pages/NotFound/index.js
+++ b/web/src/pages/NotFound/index.js
--- a/web/src/pages/Playground/index.js
+++ b/web/src/pages/Playground/index.js
@@ -23,22 +23,22 @@ import { useTranslation } from 'react-i18next';
 import { Layout, Toast, Modal } from '@douyinfe/semi-ui';
 // Context
-import { UserContext } from '../../context/User/index.js';
+import { UserContext } from '../../context/User';
-import { useIsMobile } from '../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../hooks/common/useIsMobile';
 // hooks
-import { usePlaygroundState } from '../../hooks/playground/usePlaygroundState.js';
+import { usePlaygroundState } from '../../hooks/playground/usePlaygroundState';
-import { useMessageActions } from '../../hooks/playground/useMessageActions.js';
+import { useMessageActions } from '../../hooks/playground/useMessageActions';
-import { useApiRequest } from '../../hooks/playground/useApiRequest.js';
+import { useApiRequest } from '../../hooks/playground/useApiRequest';
-import { useSyncMessageAndCustomBody } from '../../hooks/playground/useSyncMessageAndCustomBody.js';
+import { useSyncMessageAndCustomBody } from '../../hooks/playground/useSyncMessageAndCustomBody';
-import { useMessageEdit } from '../../hooks/playground/useMessageEdit.js';
+import { useMessageEdit } from '../../hooks/playground/useMessageEdit';
-import { useDataLoader } from '../../hooks/playground/useDataLoader.js';
+import { useDataLoader } from '../../hooks/playground/useDataLoader';
 // Constants and utils
 import {
  MESSAGE_ROLES,
  ERROR_MESSAGES
-} from '../../constants/playground.constants.js';
+} from '../../constants/playground.constants';
 import {
  getLogo,
  stringToColor,
@@ -55,9 +55,9 @@ import {
  OptimizedDebugPanel,
  OptimizedMessageContent,
  OptimizedMessageActions
-} from '../../components/playground/OptimizedComponents.js';
+} from '../../components/playground/OptimizedComponents';
-import ChatArea from '../../components/playground/ChatArea.js';
+import ChatArea from '../../components/playground/ChatArea';
-import FloatingButtons from '../../components/playground/FloatingButtons.js';
+import FloatingButtons from '../../components/playground/FloatingButtons';
 // 生成头像
 const generateAvatarDataUrl = (username) => {

--- a/web/src/pages/Pricing/index.js
+++ b/web/src/pages/Pricing/index.js
--- a/web/src/pages/Redemption/index.js
+++ b/web/src/pages/Redemption/index.js
--- a/web/src/pages/Setting/Chat/SettingsChats.js
+++ b/web/src/pages/Setting/Chat/SettingsChats.js
--- a/web/src/pages/Setting/Dashboard/SettingsAPIInfo.js
+++ b/web/src/pages/Setting/Dashboard/SettingsAPIInfo.js
--- a/web/src/pages/Setting/Dashboard/SettingsAnnouncements.js
+++ b/web/src/pages/Setting/Dashboard/SettingsAnnouncements.js
--- a/web/src/pages/Setting/Dashboard/SettingsDataDashboard.js
+++ b/web/src/pages/Setting/Dashboard/SettingsDataDashboard.js
--- a/web/src/pages/Setting/Dashboard/SettingsFAQ.js
+++ b/web/src/pages/Setting/Dashboard/SettingsFAQ.js
--- a/web/src/pages/Setting/Dashboard/SettingsUptimeKuma.js
+++ b/web/src/pages/Setting/Dashboard/SettingsUptimeKuma.js
--- a/web/src/pages/Setting/Drawing/SettingsDrawing.js
+++ b/web/src/pages/Setting/Drawing/SettingsDrawing.js
--- a/web/src/pages/Setting/Model/SettingClaudeModel.js
+++ b/web/src/pages/Setting/Model/SettingClaudeModel.js
--- a/web/src/pages/Setting/Model/SettingGeminiModel.js
+++ b/web/src/pages/Setting/Model/SettingGeminiModel.js
@@ -28,7 +28,7 @@ import {
  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text.js';
+import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 const GEMINI_SETTING_EXAMPLE = {
  default: 'OFF',

--- a/web/src/pages/Setting/Model/SettingGlobalModel.js
+++ b/web/src/pages/Setting/Model/SettingGlobalModel.js
--- a/web/src/pages/Setting/Operation/SettingsCreditLimit.js
+++ b/web/src/pages/Setting/Operation/SettingsCreditLimit.js
--- a/web/src/pages/Setting/Operation/SettingsGeneral.js
+++ b/web/src/pages/Setting/Operation/SettingsGeneral.js
--- a/web/src/pages/Setting/Operation/SettingsLog.js
+++ b/web/src/pages/Setting/Operation/SettingsLog.js
--- a/web/src/pages/Setting/Operation/SettingsMonitoring.js
+++ b/web/src/pages/Setting/Operation/SettingsMonitoring.js
--- a/web/src/pages/Setting/Operation/SettingsSensitiveWords.js
+++ b/web/src/pages/Setting/Operation/SettingsSensitiveWords.js
--- a/web/src/pages/Setting/Payment/SettingsGeneralPayment.js
+++ b/web/src/pages/Setting/Payment/SettingsGeneralPayment.js
--- a/web/src/pages/Setting/Payment/SettingsPaymentGateway.js
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGateway.js
--- a/web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.js
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.js
--- a/web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.js
+++ b/web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.js
--- a/web/src/pages/Setting/Ratio/GroupRatioSettings.js
+++ b/web/src/pages/Setting/Ratio/GroupRatioSettings.js
--- a/web/src/pages/Setting/Ratio/ModelRatioSettings.js
+++ b/web/src/pages/Setting/Ratio/ModelRatioSettings.js
--- a/web/src/pages/Setting/Ratio/ModelRationNotSetEditor.js
+++ b/web/src/pages/Setting/Ratio/ModelRationNotSetEditor.js
--- a/web/src/pages/Setting/Ratio/ModelSettingsVisualEditor.js
+++ b/web/src/pages/Setting/Ratio/ModelSettingsVisualEditor.js
--- a/web/src/pages/Setting/Ratio/UpstreamRatioSync.js
+++ b/web/src/pages/Setting/Ratio/UpstreamRatioSync.js
@@ -38,7 +38,7 @@ import {
  CheckCircle,
 } from 'lucide-react';
 import { API, showError, showSuccess, showWarning, stringToColor } from '../../../helpers';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { DEFAULT_ENDPOINT } from '../../../constants';
 import { useTranslation } from 'react-i18next';
 import {

--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -34,17 +34,17 @@ import {
  CreditCard
 } from 'lucide-react';
-import SystemSetting from '../../components/settings/SystemSetting.js';
+import SystemSetting from '../../components/settings/SystemSetting';
 import { isRoot } from '../../helpers';
 import OtherSetting from '../../components/settings/OtherSetting';
-import OperationSetting from '../../components/settings/OperationSetting.js';
+import OperationSetting from '../../components/settings/OperationSetting';
-import RateLimitSetting from '../../components/settings/RateLimitSetting.js';
+import RateLimitSetting from '../../components/settings/RateLimitSetting';
-import ModelSetting from '../../components/settings/ModelSetting.js';
+import ModelSetting from '../../components/settings/ModelSetting';
-import DashboardSetting from '../../components/settings/DashboardSetting.js';
+import DashboardSetting from '../../components/settings/DashboardSetting';
-import RatioSetting from '../../components/settings/RatioSetting.js';
+import RatioSetting from '../../components/settings/RatioSetting';
-import ChatsSetting from '../../components/settings/ChatsSetting.js';
+import ChatsSetting from '../../components/settings/ChatsSetting';
-import DrawingSetting from '../../components/settings/DrawingSetting.js';
+import DrawingSetting from '../../components/settings/DrawingSetting';
-import PaymentSetting from '../../components/settings/PaymentSetting.js';
+import PaymentSetting from '../../components/settings/PaymentSetting';
 const Setting = () => {
  const { t } = useTranslation();

--- a/web/src/pages/Setup/index.js
+++ b/web/src/pages/Setup/index.js
--- a/web/src/pages/Task/index.js
+++ b/web/src/pages/Task/index.js
--- a/web/src/pages/Token/index.js
+++ b/web/src/pages/Token/index.js
--- a/web/src/pages/User/index.js
+++ b/web/src/pages/User/index.js