♻️ 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/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,
@@ -1653,50 +1653,50 @@ const EditChannelModal = (props) => {
                   />
 
                   <Form.TextArea
-                      field='param_override'
-                      label={t('参数覆盖')}
-                      placeholder={
-                          t('此项可选，用于覆盖请求参数。不支持覆盖 stream 参数') +
-                          '\n' + t('旧格式（直接覆盖）：') +
-                          '\n{\n  "temperature": 0,\n  "max_tokens": 1000\n}' +
-                          '\n\n' + t('新格式（支持条件判断与json自定义）：') +
-                          '\n{\n  "operations": [\n    {\n      "path": "temperature",\n      "mode": "set",\n      "value": 0.7,\n      "conditions": [\n        {\n          "path": "model",\n          "mode": "prefix",\n          "value": "gpt"\n        }\n      ]\n    }\n  ]\n}'
-                      }
-                      autosize
-                      onChange={(value) => handleInputChange('param_override', value)}
-                      extraText={
-                        <div className="flex gap-2 flex-wrap">
-                          <Text
-                              className="!text-semi-color-primary cursor-pointer"
-                              onClick={() => handleInputChange('param_override', JSON.stringify({ temperature: 0 }, null, 2))}
-                          >
-                            {t('旧格式模板')}
-                          </Text>
-                          <Text
-                              className="!text-semi-color-primary cursor-pointer"
-                              onClick={() => handleInputChange('param_override', JSON.stringify({
-                                operations: [
+                    field='param_override'
+                    label={t('参数覆盖')}
+                    placeholder={
+                      t('此项可选，用于覆盖请求参数。不支持覆盖 stream 参数') +
+                      '\n' + t('旧格式（直接覆盖）：') +
+                      '\n{\n  "temperature": 0,\n  "max_tokens": 1000\n}' +
+                      '\n\n' + t('新格式（支持条件判断与json自定义）：') +
+                      '\n{\n  "operations": [\n    {\n      "path": "temperature",\n      "mode": "set",\n      "value": 0.7,\n      "conditions": [\n        {\n          "path": "model",\n          "mode": "prefix",\n          "value": "gpt"\n        }\n      ]\n    }\n  ]\n}'
+                    }
+                    autosize
+                    onChange={(value) => handleInputChange('param_override', value)}
+                    extraText={
+                      <div className="flex gap-2 flex-wrap">
+                        <Text
+                          className="!text-semi-color-primary cursor-pointer"
+                          onClick={() => handleInputChange('param_override', JSON.stringify({ temperature: 0 }, null, 2))}
+                        >
+                          {t('旧格式模板')}
+                        </Text>
+                        <Text
+                          className="!text-semi-color-primary cursor-pointer"
+                          onClick={() => handleInputChange('param_override', JSON.stringify({
+                            operations: [
+                              {
+                                path: "temperature",
+                                mode: "set",
+                                value: 0.7,
+                                conditions: [
                                   {
-                                    path: "temperature",
-                                    mode: "set",
-                                    value: 0.7,
-                                    conditions: [
-                                      {
-                                        path: "model",
-                                        mode: "prefix",
-                                        value: "gpt"
-                                      }
-                                    ],
-                                    logic: "AND"
+                                    path: "model",
+                                    mode: "prefix",
+                                    value: "gpt"
                                   }
-                                ]
-                              }, null, 2))}
-                          >
-                            {t('新格式模板')}
-                          </Text>
-                        </div>
-                      }
-                      showClear
+                                ],
+                                logic: "AND"
+                              }
+                            ]
+                          }, null, 2))}
+                        >
+                          {t('新格式模板')}
+                        </Text>
+                      </div>
+                    }
+                    showClear
                   />
 
 

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;