♻️ 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`.
This commit is contained in:
t0ng7u
2025-08-18 04:14:35 +08:00
parent cfc6bc8e5e
commit adc7fbd424
173 changed files with 299 additions and 280 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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';
@@ -222,7 +222,7 @@ function TokensPage() {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [modelOptions, selectedModel, tokensData.t, fluentNoticeOpen]);
useEffect(() => {
const selector = '#fluent-new-api-container';
const root = document.body || document.documentElement;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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 UsersActions from './UsersActions.jsx';
import UsersFilters from './UsersFilters.jsx';
import UsersDescription from './UsersDescription.jsx';
import AddUserModal from './modals/AddUserModal.jsx';
import EditUserModal from './modals/EditUserModal.jsx';
import UsersTable from './UsersTable';
import UsersActions from './UsersActions';
import UsersFilters from './UsersFilters';
import UsersDescription from './UsersDescription';
import AddUserModal from './modals/AddUserModal';
import EditUserModal from './modals/EditUserModal';
import { useUsersData } from '../../../hooks/users/useUsersData';
import { useIsMobile } from '../../../hooks/common/useIsMobile';
import { createCardProPagination } from '../../../helpers/utils';

View File

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

View File

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