♻️ 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`.

web/index.html

@@ -1,19 +1,19 @@
 <!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
-      name="description"
-      content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用"
-    />
+  <meta name="description" content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用" />
   <title>New API</title>
-  </head>
-  <body>
+</head>
+
+<body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
-    <script type="module" src="/src/index.js"></script>
-  </body>
+  <script type="module" src="/src/index.jsx"></script>
+</body>
+
 </html>

web/src/App.jsx

@@ -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 LoginForm from './components/auth/LoginForm.js';
+import RegisterForm from './components/auth/RegisterForm';
+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 PasswordResetConfirm from './components/auth/PasswordResetConfirm.js';
+import PasswordResetForm from './components/auth/PasswordResetForm';
+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 Task from './pages/Task/index.js';
-import ModelPage from './pages/Model/index.js';
-import Playground from './pages/Playground/index.js';
-import OAuth2Callback from './components/auth/OAuth2Callback.js';
-import PersonalSetting from './components/settings/PersonalSetting.js';
-import Setup from './pages/Setup/index.js';
-import SetupCheck from './components/layout/SetupCheck.js';
+import Pricing from './pages/Pricing';
+import Task from './pages/Task';
+import ModelPage from './pages/Model';
+import Playground from './pages/Playground';
+import OAuth2Callback from './components/auth/OAuth2Callback';
+import PersonalSetting from './components/settings/PersonalSetting';
+import Setup from './pages/Setup';
+import SetupCheck from './components/layout/SetupCheck';
 
 const Home = lazy(() => import('./pages/Home'));
 const Dashboard = lazy(() => import('./pages/Dashboard'));

web/src/components/auth/LoginForm.jsx

@@ -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 WeChatIcon from '../common/logo/WeChatIcon.js';
-import LinuxDoIcon from '../common/logo/LinuxDoIcon.js';
-import TwoFAVerification from './TwoFAVerification.js';
+import OIDCIcon from '../common/logo/OIDCIcon';
+import WeChatIcon from '../common/logo/WeChatIcon';
+import LinuxDoIcon from '../common/logo/LinuxDoIcon';
+import TwoFAVerification from './TwoFAVerification';
 import { useTranslation } from 'react-i18next';
 
 const LoginForm = () => {

web/src/components/auth/RegisterForm.jsx

@@ -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';
-import OIDCIcon from '../common/logo/OIDCIcon.js';
-import LinuxDoIcon from '../common/logo/LinuxDoIcon.js';
-import WeChatIcon from '../common/logo/WeChatIcon.js';
+} from '../../helpers';
+import OIDCIcon from '../common/logo/OIDCIcon';
+import LinuxDoIcon from '../common/logo/LinuxDoIcon';
+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 = () => {

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 { StatusContext } from '../../context/Status/index.js';
+import { UserContext } from '../../context/User';
+import { StatusContext } from '../../context/Status';
 
 import DashboardHeader from './DashboardHeader';
 import StatsCards from './StatsCards';

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';

web/src/components/layout/HeaderBar/ActionButtons.jsx

@@ -18,11 +18,11 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import NewYearButton from './NewYearButton.js';
-import NotificationButton from './NotificationButton.js';
-import ThemeToggle from './ThemeToggle.js';
-import LanguageSelector from './LanguageSelector.js';
-import UserArea from './UserArea.js';
+import NewYearButton from './NewYearButton';
+import NotificationButton from './NotificationButton';
+import ThemeToggle from './ThemeToggle';
+import LanguageSelector from './LanguageSelector';
+import UserArea from './UserArea';
 
 const ActionButtons = ({
   isNewYear,

web/src/components/layout/HeaderBar/HeaderLogo.jsx

@@ -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,

web/src/components/layout/HeaderBar/Navigation.jsx

@@ -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,

web/src/components/layout/HeaderBar/UserArea.jsx

@@ -32,8 +32,8 @@ import {
   IconCreditCard,
   IconKey,
 } from '@douyinfe/semi-icons';
-import { stringToColor } from '../../../helpers/index.js';
-import SkeletonWrapper from './SkeletonWrapper.js';
+import { stringToColor } from '../../../helpers';
+import SkeletonWrapper from './SkeletonWrapper';
 
 const UserArea = ({
   userState,

web/src/components/layout/HeaderBar/index.jsx

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

web/src/components/layout/NoticeModal.jsx

@@ -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 = [] }) => {

web/src/components/layout/PageLayout.jsx

@@ -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 App from '../../App.js';
-import FooterBar from './Footer.js';
+import SiderBar from './SiderBar';
+import App from '../../App';
+import FooterBar from './Footer';
 import { ToastContainer } from 'react-toastify';
 import React, { useContext, useEffect, useState } from 'react';
-import { useIsMobile } from '../../hooks/common/useIsMobile.js';
-import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed.js';
+import { useIsMobile } from '../../hooks/common/useIsMobile';
+import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
 import { useTranslation } from 'react-i18next';
-import { API, getLogo, getSystemName, showError, setStatusData } from '../../helpers/index.js';
-import { UserContext } from '../../context/User/index.js';
-import { StatusContext } from '../../context/Status/index.js';
+import { API, getLogo, getSystemName, showError, setStatusData } from '../../helpers';
+import { UserContext } from '../../context/User';
+import { StatusContext } from '../../context/Status';
 import { useLocation } from 'react-router-dom';
 const { Sider, Content, Header } = Layout;
 

web/src/components/layout/SiderBar.jsx

@@ -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,

web/src/components/settings/ChannelSelectorModal.jsx

@@ -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,

web/src/components/settings/ChatsSetting.jsx

@@ -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 = () => {

web/src/components/settings/DashboardSetting.jsx

@@ -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 SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements.js';
-import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ.js';
-import SettingsUptimeKuma from '../../pages/Setting/Dashboard/SettingsUptimeKuma.js';
-import SettingsDataDashboard from '../../pages/Setting/Dashboard/SettingsDataDashboard.js';
+import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo';
+import SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements';
+import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ';
+import SettingsUptimeKuma from '../../pages/Setting/Dashboard/SettingsUptimeKuma';
+import SettingsDataDashboard from '../../pages/Setting/Dashboard/SettingsDataDashboard';
 
 const DashboardSetting = () => {
   let [inputs, setInputs] = useState({

web/src/components/settings/DrawingSetting.jsx

@@ -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 = () => {

web/src/components/settings/ModelSetting.jsx

@@ -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 SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel.js';
-import SettingGlobalModel from '../../pages/Setting/Model/SettingGlobalModel.js';
+import SettingGeminiModel from '../../pages/Setting/Model/SettingGeminiModel';
+import SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel';
+import SettingGlobalModel from '../../pages/Setting/Model/SettingGlobalModel';
 
 const ModelSetting = () => {
   const { t } = useTranslation();

web/src/components/settings/OperationSetting.jsx

@@ -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 SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensitiveWords.js';
-import SettingsLog from '../../pages/Setting/Operation/SettingsLog.js';
-import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring.js';
-import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit.js';
+import SettingsGeneral from '../../pages/Setting/Operation/SettingsGeneral';
+import SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensitiveWords';
+import SettingsLog from '../../pages/Setting/Operation/SettingsLog';
+import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring';
+import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit';
 import { API, showError, toBoolean } from '../../helpers';
 
 const OperationSetting = () => {

web/src/components/settings/OtherSetting.jsx

@@ -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 = () => {

web/src/components/settings/PaymentSetting.jsx

@@ -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 SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway.js';
-import SettingsPaymentGatewayStripe from '../../pages/Setting/Payment/SettingsPaymentGatewayStripe.js';
+import SettingsGeneralPayment from '../../pages/Setting/Payment/SettingsGeneralPayment';
+import SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway';
+import SettingsPaymentGatewayStripe from '../../pages/Setting/Payment/SettingsPaymentGatewayStripe';
 import { API, showError, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 

web/src/components/settings/RateLimitSetting.jsx

@@ -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();

web/src/components/settings/RatioSetting.jsx

@@ -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 ModelRatioSettings from '../../pages/Setting/Ratio/ModelRatioSettings.js';
-import ModelSettingsVisualEditor from '../../pages/Setting/Ratio/ModelSettingsVisualEditor.js';
-import ModelRatioNotSetEditor from '../../pages/Setting/Ratio/ModelRationNotSetEditor.js';
-import UpstreamRatioSync from '../../pages/Setting/Ratio/UpstreamRatioSync.js';
+import GroupRatioSettings from '../../pages/Setting/Ratio/GroupRatioSettings';
+import ModelRatioSettings from '../../pages/Setting/Ratio/ModelRatioSettings';
+import ModelSettingsVisualEditor from '../../pages/Setting/Ratio/ModelSettingsVisualEditor';
+import ModelRatioNotSetEditor from '../../pages/Setting/Ratio/ModelRationNotSetEditor';
+import UpstreamRatioSync from '../../pages/Setting/Ratio/UpstreamRatioSync';
 
 import { API, showError, toBoolean } from '../../helpers';
 

web/src/components/table/channels/ChannelsColumnDefs.jsx

@@ -35,8 +35,8 @@ import {
   renderQuota,
   getChannelIcon,
   renderQuotaWithAmount
-} from '../../../helpers/index.js';
-import { CHANNEL_OPTIONS } from '../../../constants/index.js';
+} from '../../../helpers';
+import { CHANNEL_OPTIONS } from '../../../constants';
 import { IconTreeTriangleDown, IconMore } from '@douyinfe/semi-icons';
 import { FaRandom } from 'react-icons/fa';
 

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 {

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 { getChannelIcon } from '../../../helpers/index.js';
+import { CHANNEL_OPTIONS } from '../../../constants';
+import { getChannelIcon } from '../../../helpers';
 
 const ChannelsTabs = ({
   enableTagMode,

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 ChannelsTable from './ChannelsTable.jsx';
-import ChannelsActions from './ChannelsActions.jsx';
-import ChannelsFilters from './ChannelsFilters.jsx';
-import ChannelsTabs from './ChannelsTabs.jsx';
-import { useChannelsData } from '../../../hooks/channels/useChannelsData.js';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
-import BatchTagModal from './modals/BatchTagModal.jsx';
-import ModelTestModal from './modals/ModelTestModal.jsx';
-import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
-import EditChannelModal from './modals/EditChannelModal.jsx';
-import EditTagModal from './modals/EditTagModal.jsx';
-import MultiKeyManageModal from './modals/MultiKeyManageModal.jsx';
+import CardPro from '../../common/ui/CardPro';
+import ChannelsTable from './ChannelsTable';
+import ChannelsActions from './ChannelsActions';
+import ChannelsFilters from './ChannelsFilters';
+import ChannelsTabs from './ChannelsTabs';
+import { useChannelsData } from '../../../hooks/channels/useChannelsData';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
+import BatchTagModal from './modals/BatchTagModal';
+import ModelTestModal from './modals/ModelTestModal';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
+import EditChannelModal from './modals/EditChannelModal';
+import EditTagModal from './modals/EditTagModal';
+import MultiKeyManageModal from './modals/MultiKeyManageModal';
 import { createCardProPagination } from '../../../helpers/utils';
 
 const ChannelsPage = () => {

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,

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,

web/src/components/table/channels/modals/ModelSelectModal.jsx

@@ -1,5 +1,24 @@
+/*
+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,

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 { MODEL_TABLE_PAGE_SIZE } from '../../../../constants/index.js';
+import { copy, showError, showInfo, showSuccess } from '../../../../helpers';
+import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
 
 const ModelTestModal = ({
   showModelTestModal,

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;
 

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 {

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 MjLogsTable from './MjLogsTable.jsx';
-import MjLogsActions from './MjLogsActions.jsx';
-import MjLogsFilters from './MjLogsFilters.jsx';
-import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
-import ContentModal from './modals/ContentModal.jsx';
-import { useMjLogsData } from '../../../hooks/mj-logs/useMjLogsData.js';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
+import CardPro from '../../common/ui/CardPro';
+import MjLogsTable from './MjLogsTable';
+import MjLogsActions from './MjLogsActions';
+import MjLogsFilters from './MjLogsFilters';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
+import ContentModal from './modals/ContentModal';
+import { useMjLogsData } from '../../../hooks/mj-logs/useMjLogsData';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
 
 const MjLogsPage = () => {

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,

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 PrefillGroupManagement from './modals/PrefillGroupManagement.jsx';
-import EditPrefillGroupModal from './modals/EditPrefillGroupModal.jsx';
+import MissingModelsModal from './modals/MissingModelsModal';
+import PrefillGroupManagement from './modals/PrefillGroupManagement';
+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,

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 {

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 ModelsActions from './ModelsActions.jsx';
-import ModelsFilters from './ModelsFilters.jsx';
-import ModelsTabs from './ModelsTabs.jsx';
-import EditModelModal from './modals/EditModelModal.jsx';
-import EditVendorModal from './modals/EditVendorModal.jsx';
+import ModelsTable from './ModelsTable';
+import ModelsActions from './ModelsActions';
+import ModelsFilters from './ModelsFilters';
+import ModelsTabs from './ModelsTabs';
+import EditModelModal from './modals/EditModelModal';
+import EditVendorModal from './modals/EditVendorModal';
 import { useModelsData } from '../../../hooks/models/useModelsData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';

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

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 RedemptionsActions from './RedemptionsActions.jsx';
-import RedemptionsFilters from './RedemptionsFilters.jsx';
-import RedemptionsDescription from './RedemptionsDescription.jsx';
+import RedemptionsTable from './RedemptionsTable';
+import RedemptionsActions from './RedemptionsActions';
+import RedemptionsFilters from './RedemptionsFilters';
+import RedemptionsDescription from './RedemptionsDescription';
 import EditRedemptionModal from './modals/EditRedemptionModal';
 import { useRedemptionsData } from '../../../hooks/redemptions/useRedemptionsData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';

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,

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 {

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 TaskLogsTable from './TaskLogsTable.jsx';
-import TaskLogsActions from './TaskLogsActions.jsx';
-import TaskLogsFilters from './TaskLogsFilters.jsx';
-import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
-import ContentModal from './modals/ContentModal.jsx';
-import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData.js';
-import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
+import CardPro from '../../common/ui/CardPro';
+import TaskLogsTable from './TaskLogsTable';
+import TaskLogsActions from './TaskLogsActions';
+import TaskLogsFilters from './TaskLogsFilters';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
+import ContentModal from './modals/ContentModal';
+import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
 
 const TaskLogsPage = () => {

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,

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 {

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 TokensActions from './TokensActions.jsx';
-import TokensFilters from './TokensFilters.jsx';
-import TokensDescription from './TokensDescription.jsx';
+import TokensTable from './TokensTable';
+import TokensActions from './TokensActions';
+import TokensFilters from './TokensFilters';
+import TokensDescription from './TokensDescription';
 import EditTokenModal from './modals/EditTokenModal';
 import { useTokensData } from '../../../hooks/tokens/useTokensData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';

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,