♻️ 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/pages/Home/index.jsx

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

web/src/pages/Playground/index.jsx

@@ -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 { useIsMobile } from '../../hooks/common/useIsMobile.js';
+import { UserContext } from '../../context/User';
+import { useIsMobile } from '../../hooks/common/useIsMobile';
 
 // hooks
-import { usePlaygroundState } from '../../hooks/playground/usePlaygroundState.js';
-import { useMessageActions } from '../../hooks/playground/useMessageActions.js';
-import { useApiRequest } from '../../hooks/playground/useApiRequest.js';
-import { useSyncMessageAndCustomBody } from '../../hooks/playground/useSyncMessageAndCustomBody.js';
-import { useMessageEdit } from '../../hooks/playground/useMessageEdit.js';
-import { useDataLoader } from '../../hooks/playground/useDataLoader.js';
+import { usePlaygroundState } from '../../hooks/playground/usePlaygroundState';
+import { useMessageActions } from '../../hooks/playground/useMessageActions';
+import { useApiRequest } from '../../hooks/playground/useApiRequest';
+import { useSyncMessageAndCustomBody } from '../../hooks/playground/useSyncMessageAndCustomBody';
+import { useMessageEdit } from '../../hooks/playground/useMessageEdit';
+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';
-import ChatArea from '../../components/playground/ChatArea.js';
-import FloatingButtons from '../../components/playground/FloatingButtons.js';
+} from '../../components/playground/OptimizedComponents';
+import ChatArea from '../../components/playground/ChatArea';
+import FloatingButtons from '../../components/playground/FloatingButtons';
 
 // 生成头像
 const generateAvatarDataUrl = (username) => {

web/src/pages/Setting/Model/SettingGeminiModel.jsx

@@ -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',
@@ -228,7 +228,7 @@ export default function SettingGeminiModel(props) {
                   label={t('思考预算占比')}
                   field={'gemini.thinking_adapter_budget_tokens_percentage'}
                   initValue={''}
-                  extraText={t('0.002-1之间的小数')} 
+                  extraText={t('0.002-1之间的小数')}
                   min={0.002}
                   max={1}
                   onChange={(value) =>

web/src/pages/Setting/Ratio/UpstreamRatioSync.jsx

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

web/src/pages/Setting/index.jsx

@@ -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 RateLimitSetting from '../../components/settings/RateLimitSetting.js';
-import ModelSetting from '../../components/settings/ModelSetting.js';
-import DashboardSetting from '../../components/settings/DashboardSetting.js';
-import RatioSetting from '../../components/settings/RatioSetting.js';
-import ChatsSetting from '../../components/settings/ChatsSetting.js';
-import DrawingSetting from '../../components/settings/DrawingSetting.js';
-import PaymentSetting from '../../components/settings/PaymentSetting.js';
+import OperationSetting from '../../components/settings/OperationSetting';
+import RateLimitSetting from '../../components/settings/RateLimitSetting';
+import ModelSetting from '../../components/settings/ModelSetting';
+import DashboardSetting from '../../components/settings/DashboardSetting';
+import RatioSetting from '../../components/settings/RatioSetting';
+import ChatsSetting from '../../components/settings/ChatsSetting';
+import DrawingSetting from '../../components/settings/DrawingSetting';
+import PaymentSetting from '../../components/settings/PaymentSetting';
 
 const Setting = () => {
   const { t } = useTranslation();