♻️ refactor(components): refactor the components folder structure and related imports

web/src/App.js

@@ -1,15 +1,15 @@
 import React, { lazy, Suspense } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
-import Loading from './components/Loading';
+import Loading from './components/common/Loading.js';
 import User from './pages/User';
 import { AuthRedirect, PrivateRoute } from './helpers';
-import RegisterForm from './components/RegisterForm';
-import LoginForm from './components/LoginForm';
+import RegisterForm from './components/auth/RegisterForm.js';
+import LoginForm from './components/auth/LoginForm.js';
 import NotFound from './pages/NotFound';
 import Setting from './pages/Setting';
 import EditUser from './pages/User/EditUser';
-import PasswordResetForm from './components/PasswordResetForm';
-import PasswordResetConfirm from './components/PasswordResetConfirm';
+import PasswordResetForm from './components/auth/PasswordResetForm.js';
+import PasswordResetConfirm from './components/auth/PasswordResetConfirm.js';
 import Channel from './pages/Channel';
 import Token from './pages/Token';
 import EditChannel from './pages/Channel/EditChannel';
@@ -22,8 +22,8 @@ import Midjourney from './pages/Midjourney';
 import Pricing from './pages/Pricing/index.js';
 import Task from './pages/Task/index.js';
 import Playground from './pages/Playground/index.js';
-import OAuth2Callback from './components/OAuth2Callback.js';
-import PersonalSetting from './components/PersonalSetting.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/SetupCheck';
 

web/src/components/LoginForm.js → web/src/components/auth/LoginForm.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
-import { UserContext } from '../context/User';
+import { UserContext } from '../../context/User/index.js';
 import {
   API,
   getLogo,
@@ -13,7 +13,7 @@ import {
   onGitHubOAuthClicked,
   onOIDCClicked,
   onLinuxDOOAuthClicked
-} from '../helpers';
+} from '../../helpers/index.js';
 import Turnstile from 'react-turnstile';
 import {
   Button,
@@ -28,11 +28,11 @@ 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 OIDCIcon from '../common/logo/OIDCIcon.js';
+import WeChatIcon from '../common/logo/WeChatIcon.js';
+import LinuxDoIcon from '../common/logo/LinuxDoIcon.js';
 import { useTranslation } from 'react-i18next';
-import Background from '../images/example.png';
+import Background from '/example.png';
 
 const LoginForm = () => {
   const [inputs, setInputs] = useState({

web/src/components/OAuth2Callback.js → web/src/components/auth/OAuth2Callback.js

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Spin, Typography, Space } from '@douyinfe/semi-ui';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { API, showError, showSuccess, updateAPI, setUserData } from '../helpers';
-import { UserContext } from '../context/User';
+import { API, showError, showSuccess, updateAPI, setUserData } from '../../helpers';
+import { UserContext } from '../../context/User';
 
 const OAuth2Callback = (props) => {
   const [searchParams, setSearchParams] = useSearchParams();

web/src/components/PasswordResetConfirm.js → web/src/components/auth/PasswordResetConfirm.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { API, copy, showError, showNotice, getLogo, getSystemName } from '../helpers';
+import { API, copy, showError, showNotice, getLogo, getSystemName } from '../../helpers';
 import { useSearchParams, Link } from 'react-router-dom';
 import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
 import { IconMail, IconLock } from '@douyinfe/semi-icons';
 import { useTranslation } from 'react-i18next';
-import Background from '../images/example.png';
+import Background from '/example.png';
 
 const { Text, Title } = Typography;
 

web/src/components/PasswordResetForm.js → web/src/components/auth/PasswordResetForm.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { API, getLogo, showError, showInfo, showSuccess, getSystemName } from '../helpers';
+import { API, getLogo, showError, showInfo, showSuccess, getSystemName } from '../../helpers';
 import Turnstile from 'react-turnstile';
 import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
 import { IconMail } from '@douyinfe/semi-icons';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import Background from '../images/example.png';
+import Background from '/example.png';
 
 const { Text, Title } = Typography;
 

web/src/components/RegisterForm.js → web/src/components/auth/RegisterForm.js

@@ -9,7 +9,7 @@ import {
   updateAPI,
   getSystemName,
   setUserData
-} from '../helpers';
+} from '../../helpers/index.js';
 import Turnstile from 'react-turnstile';
 import {
   Button,
@@ -26,14 +26,14 @@ import {
   onGitHubOAuthClicked,
   onLinuxDOOAuthClicked,
   onOIDCClicked,
-} from '../helpers';
-import OIDCIcon from './common/logo/OIDCIcon.js';
-import LinuxDoIcon from './common/logo/LinuxDoIcon.js';
-import WeChatIcon from './common/logo/WeChatIcon.js';
+} 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';
 import TelegramLoginButton from 'react-telegram-login/src';
-import { UserContext } from '../context/User/index.js';
+import { UserContext } from '../../context/User/index.js';
 import { useTranslation } from 'react-i18next';
-import Background from '../images/example.png';
+import Background from '/example.png';
 
 const RegisterForm = () => {
   const { t } = useTranslation();

web/src/components/Footer.js → web/src/components/layout/Footer.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useMemo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Typography } from '@douyinfe/semi-ui';
-import { getFooterHTML, getLogo, getSystemName } from '../helpers';
-import { StatusContext } from '../context/Status';
+import { getFooterHTML, getLogo, getSystemName } from '../../helpers';
+import { StatusContext } from '../../context/Status';
 
 const FooterBar = () => {
   const { t } = useTranslation();

web/src/components/HeaderBar.js → web/src/components/layout/HeaderBar.js

@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
-import { UserContext } from '../context/User';
-import { useSetTheme, useTheme } from '../context/Theme';
+import { UserContext } from '../../context/User/index.js';
+import { useSetTheme, useTheme } from '../../context/Theme/index.js';
 import { useTranslation } from 'react-i18next';
-import { API, getLogo, getSystemName, showSuccess, stringToColor } from '../helpers';
+import { API, getLogo, getSystemName, showSuccess, stringToColor } from '../../helpers/index.js';
 import fireworks from 'react-fireworks';
 import { CN, GB } from 'country-flag-icons/react/3x2';
-import NoticeModal from './NoticeModal';
+import NoticeModal from './NoticeModal.js';
 
 import {
   IconClose,
@@ -29,8 +29,8 @@ import {
   Typography,
   Skeleton,
 } from '@douyinfe/semi-ui';
-import { StatusContext } from '../context/Status/index.js';
-import { useStyle, styleActions } from '../context/Style/index.js';
+import { StatusContext } from '../../context/Status/index.js';
+import { useStyle, styleActions } from '../../context/Style/index.js';
 
 const HeaderBar = () => {
   const { t, i18n } = useTranslation();

web/src/components/NoticeModal.js → web/src/components/layout/NoticeModal.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Modal, Empty } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
-import { API, showError } from '../helpers';
+import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
 

web/src/components/PageLayout.js → web/src/components/layout/PageLayout.js

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

web/src/components/SiderBar.js → web/src/components/layout/SiderBar.js

@@ -1,14 +1,12 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate, useLocation } from 'react-router-dom';
-import { UserContext } from '../context/User';
-import { StatusContext } from '../context/Status';
+import { Link, useLocation } from 'react-router-dom';
+import { StatusContext } from '../../context/Status/index.js';
 import { useTranslation } from 'react-i18next';
 
 import {
   isAdmin,
   showError
-} from '../helpers';
-import '../index.css';
+} from '../../helpers/index.js';
 
 import {
   IconCalendarClock,
@@ -17,26 +15,19 @@ import {
   IconTerminal,
   IconCreditCard,
   IconGift,
-  IconHelpCircle,
   IconHistogram,
-  IconHome,
   IconImage,
   IconKey,
   IconLayers,
-  IconPriceTag,
   IconSetting,
   IconUser,
 } from '@douyinfe/semi-icons';
 import {
-  Avatar,
-  Dropdown,
-  Layout,
   Nav,
-  Switch,
   Divider,
 } from '@douyinfe/semi-ui';
-import { useSetTheme, useTheme } from '../context/Theme/index.js';
-import { useStyle, styleActions } from '../context/Style/index.js';
+import { useSetTheme, useTheme } from '../../context/Theme/index.js';
+import { useStyle, styleActions } from '../../context/Style/index.js';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
 // 自定义侧边栏按钮样式

web/src/components/ModelSetting.js → web/src/components/settings/ModelSetting.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
 
-import { API, showError, showSuccess } from '../helpers';
+import { API, showError, showSuccess } 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.js';
+import SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel.js';
+import SettingGlobalModel from '../../pages/Setting/Model/SettingGlobalModel.js';
 
 const ModelSetting = () => {
   const { t } = useTranslation();

web/src/components/OperationSetting.js → web/src/components/settings/OperationSetting.js

@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
-import SettingsGeneral from '../pages/Setting/Operation/SettingsGeneral.js';
-import SettingsDrawing from '../pages/Setting/Operation/SettingsDrawing.js';
-import SettingsSensitiveWords from '../pages/Setting/Operation/SettingsSensitiveWords.js';
-import SettingsLog from '../pages/Setting/Operation/SettingsLog.js';
-import SettingsDataDashboard from '../pages/Setting/Operation/SettingsDataDashboard.js';
-import SettingsMonitoring from '../pages/Setting/Operation/SettingsMonitoring.js';
-import SettingsCreditLimit from '../pages/Setting/Operation/SettingsCreditLimit.js';
-import ModelSettingsVisualEditor from '../pages/Setting/Operation/ModelSettingsVisualEditor.js';
-import GroupRatioSettings from '../pages/Setting/Operation/GroupRatioSettings.js';
-import ModelRatioSettings from '../pages/Setting/Operation/ModelRatioSettings.js';
+import SettingsGeneral from '../../pages/Setting/Operation/SettingsGeneral.js';
+import SettingsDrawing from '../../pages/Setting/Operation/SettingsDrawing.js';
+import SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensitiveWords.js';
+import SettingsLog from '../../pages/Setting/Operation/SettingsLog.js';
+import SettingsDataDashboard from '../../pages/Setting/Operation/SettingsDataDashboard.js';
+import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring.js';
+import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit.js';
+import ModelSettingsVisualEditor from '../../pages/Setting/Operation/ModelSettingsVisualEditor.js';
+import GroupRatioSettings from '../../pages/Setting/Operation/GroupRatioSettings.js';
+import ModelRatioSettings from '../../pages/Setting/Operation/ModelRatioSettings.js';
 
-import { API, showError, showSuccess } from '../helpers';
-import SettingsChats from '../pages/Setting/Operation/SettingsChats.js';
+import { API, showError, showSuccess } from '../../helpers';
+import SettingsChats from '../../pages/Setting/Operation/SettingsChats.js';
 import { useTranslation } from 'react-i18next';
-import ModelRatioNotSetEditor from '../pages/Setting/Operation/ModelRationNotSetEditor.js';
+import ModelRatioNotSetEditor from '../../pages/Setting/Operation/ModelRationNotSetEditor.js';
 
 const OperationSetting = () => {
   const { t } = useTranslation();

web/src/components/OtherSetting.js → web/src/components/settings/OtherSetting.js

@@ -9,10 +9,10 @@ import {
   Space,
   Card,
 } from '@douyinfe/semi-ui';
-import { API, showError, showSuccess, timestamp2string } from '../helpers';
+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/index.js';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
 const OtherSetting = () => {

web/src/components/PersonalSetting.js → web/src/components/settings/PersonalSetting.js

@@ -15,9 +15,9 @@ import {
   onGitHubOAuthClicked,
   onOIDCClicked,
   onLinuxDOOAuthClicked
-} from '../helpers';
+} from '../../helpers';
 import Turnstile from 'react-turnstile';
-import { UserContext } from '../context/User';
+import { UserContext } from '../../context/User';
 import {
   Avatar,
   Banner,

web/src/components/RateLimitSetting.js → web/src/components/settings/RateLimitSetting.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
 
-import { API, showError, showSuccess } from '../helpers';
-import SettingsChats from '../pages/Setting/Operation/SettingsChats.js';
+import { API, showError, showSuccess } from '../../helpers/index.js';
+import SettingsChats from '../../pages/Setting/Operation/SettingsChats.js';
 import { useTranslation } from 'react-i18next';
-import RequestRateLimit from '../pages/Setting/RateLimit/SettingsRequestRateLimit.js';
+import RequestRateLimit from '../../pages/Setting/RateLimit/SettingsRequestRateLimit.js';
 
 const RateLimitSetting = () => {
   const { t } = useTranslation();

web/src/components/SystemSetting.js → web/src/components/settings/SystemSetting.js

@@ -18,7 +18,7 @@ import {
   showError,
   showSuccess,
   verifyJSON
-} from '../helpers';
+} from '../../helpers';
 import axios from 'axios';
 
 const SystemSetting = () => {

web/src/components/ChannelsTable.js → web/src/components/table/ChannelsTable.js

@@ -8,9 +8,9 @@ import {
   renderGroup,
   renderNumberWithPoint,
   renderQuota
-} from '../helpers';
+} from '../../helpers/index.js';
 
-import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
+import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../../constants/index.js';
 import {
   Button,
   Divider,
@@ -29,7 +29,7 @@ import {
   Card,
   Select
 } from '@douyinfe/semi-ui';
-import EditChannel from '../pages/Channel/EditChannel';
+import EditChannel from '../../pages/Channel/EditChannel.js';
 import {
   IconList,
   IconTreeTriangleDown,
@@ -46,8 +46,8 @@ import {
   IconCopy,
   IconSmallTriangleRight
 } from '@douyinfe/semi-icons';
-import { loadChannelModels } from '../helpers';
-import EditTagModal from '../pages/Channel/EditTagModal.js';
+import { loadChannelModels } from '../../helpers/index.js';
+import EditTagModal from '../../pages/Channel/EditTagModal.js';
 import { useTranslation } from 'react-i18next';
 
 const ChannelsTable = () => {

web/src/components/LogsTable.js → web/src/components/table/LogsTable.js

@@ -20,7 +20,7 @@ import {
   renderQuota,
   stringToColor,
   getLogOther
-} from '../helpers';
+} from '../../helpers';
 
 import {
   Avatar,
@@ -41,7 +41,7 @@ import {
   Input,
   DatePicker,
 } from '@douyinfe/semi-ui';
-import { ITEMS_PER_PAGE } from '../constants';
+import { ITEMS_PER_PAGE } from '../../constants';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
 import {
   IconRefresh,

web/src/components/MjLogsTable.js → web/src/components/table/MjLogsTable.js

@@ -7,7 +7,7 @@ import {
   showError,
   showSuccess,
   timestamp2string,
-} from '../helpers';
+} from '../../helpers';
 
 import {
   Button,
@@ -25,7 +25,7 @@ import {
   Tag,
   Typography,
 } from '@douyinfe/semi-ui';
-import { ITEMS_PER_PAGE } from '../constants';
+import { ITEMS_PER_PAGE } from '../../constants';
 import {
   IconEyeOpened,
   IconSearch,

web/src/components/ModelPricing.js → web/src/components/table/ModelPricing.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef, useMemo, useState } from 'react';
-import { API, copy, showError, showInfo, showSuccess } from '../helpers';
+import { API, copy, showError, showInfo, showSuccess } from '../../helpers/index.js';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -26,9 +26,9 @@ import {
   IconInfoCircle,
   IconCrown,
 } from '@douyinfe/semi-icons';
-import { UserContext } from '../context/User/index.js';
+import { UserContext } from '../../context/User/index.js';
 import { AlertCircle } from 'lucide-react';
-import { MODEL_CATEGORIES } from '../constants';
+import { MODEL_CATEGORIES } from '../../constants/index.js';
 
 const ModelPricing = () => {
   const { t } = useTranslation();

web/src/components/RedemptionsTable.js → web/src/components/table/RedemptionsTable.js

@@ -6,9 +6,9 @@ import {
   showSuccess,
   timestamp2string,
   renderQuota
-} from '../helpers';
+} from '../../helpers';
 
-import { ITEMS_PER_PAGE } from '../constants';
+import { ITEMS_PER_PAGE } from '../../constants';
 import {
   Button,
   Card,
@@ -33,7 +33,7 @@ import {
   IconPlay,
   IconMore,
 } from '@douyinfe/semi-icons';
-import EditRedemption from '../pages/Redemption/EditRedemption';
+import EditRedemption from '../../pages/Redemption/EditRedemption';
 import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;

web/src/components/TaskLogsTable.js → web/src/components/table/TaskLogsTable.js

@@ -7,7 +7,7 @@ import {
   showError,
   showSuccess,
   timestamp2string,
-} from '../helpers';
+} from '../../helpers';
 
 import {
   Button,
@@ -24,7 +24,7 @@ import {
   Tag,
   Typography,
 } from '@douyinfe/semi-ui';
-import { ITEMS_PER_PAGE } from '../constants';
+import { ITEMS_PER_PAGE } from '../../constants';
 import {
   IconEyeOpened,
   IconSearch,

web/src/components/TokensTable.js → web/src/components/table/TokensTable.js

@@ -8,9 +8,9 @@ import {
   timestamp2string,
   renderGroup,
   renderQuota
-} from '../helpers';
+} from '../../helpers';
 
-import { ITEMS_PER_PAGE } from '../constants';
+import { ITEMS_PER_PAGE } from '../../constants';
 import {
   Button,
   Card,
@@ -40,9 +40,9 @@ import {
   IconHistogram,
   IconRotate,
 } from '@douyinfe/semi-icons';
-import EditToken from '../pages/Token/EditToken';
+import EditToken from '../../pages/Token/EditToken';
 import { useTranslation } from 'react-i18next';
-import { UserContext } from '../context/User';
+import { UserContext } from '../../context/User';
 
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;

web/src/components/UsersTable.js → web/src/components/table/UsersTable.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { API, showError, showSuccess, renderGroup, renderNumber, renderQuota } from '../helpers';
+import { API, showError, showSuccess, renderGroup, renderNumber, renderQuota } from '../../helpers';
 import {
   Button,
   Card,
@@ -25,9 +25,9 @@ import {
   IconArrowUp,
   IconArrowDown,
 } from '@douyinfe/semi-icons';
-import { ITEMS_PER_PAGE } from '../constants';
-import AddUser from '../pages/User/AddUser';
-import EditUser from '../pages/User/EditUser';
+import { ITEMS_PER_PAGE } from '../../constants';
+import AddUser from '../../pages/User/AddUser';
+import EditUser from '../../pages/User/EditUser';
 import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;

web/src/index.js

@@ -7,8 +7,9 @@ import { StatusProvider } from './context/Status';
 import { Layout } from '@douyinfe/semi-ui';
 import { ThemeProvider } from './context/Theme';
 import { StyleProvider } from './context/Style/index.js';
-import PageLayout from './components/PageLayout.js';
+import PageLayout from './components/layout/PageLayout.js';
 import './i18n/i18n.js';
+import './index.css';
 
 // initialization
 

web/src/pages/Channel/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ChannelsTable from '../../components/ChannelsTable';
+import ChannelsTable from '../../components/table/ChannelsTable';
 
 const File = () => {
   return (

web/src/pages/Home/index.js

@@ -5,9 +5,9 @@ import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
 import { IconGithubLogo } from '@douyinfe/semi-icons';
-import exampleImage from '../../images/example.png';
+import exampleImage from '..//example.png';
 import { Link } from 'react-router-dom';
-import NoticeModal from '../../components/NoticeModal';
+import NoticeModal from '../../components/layout/NoticeModal';
 import { Moonshot, OpenAI, XAI, Zhipu, Volcengine, Cohere, Claude, Gemini, Suno, Minimax, Wenxin, Spark, Qingyan, DeepSeek, Qwen, Midjourney, Grok, AzureAI, Hunyuan, Xinference } from '@lobehub/icons';
 
 const { Text } = Typography;

web/src/pages/Log/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import LogsTable from '../../components/LogsTable';
+import LogsTable from '../../components/table/LogsTable';
 
 const Token = () => (
   <>

web/src/pages/Midjourney/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MjLogsTable from '../../components/MjLogsTable';
+import MjLogsTable from '../../components/table/MjLogsTable';
 
 const Midjourney = () => (
   <>

web/src/pages/Pricing/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ModelPricing from '../../components/ModelPricing.js';
+import ModelPricing from '../../components/table/ModelPricing.js';
 
 const Pricing = () => (
   <>

web/src/pages/Redemption/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import RedemptionsTable from '../../components/RedemptionsTable';
+import RedemptionsTable from '../../components/table/RedemptionsTable';
 
 const Redemption = () => {
   return (

web/src/pages/Setting/index.js

@@ -3,13 +3,13 @@ import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import SystemSetting from '../../components/SystemSetting';
+import SystemSetting from '../../components/settings/SystemSetting.js';
 import { isRoot } from '../../helpers';
-import OtherSetting from '../../components/OtherSetting';
-import PersonalSetting from '../../components/PersonalSetting';
-import OperationSetting from '../../components/OperationSetting';
-import RateLimitSetting from '../../components/RateLimitSetting.js';
-import ModelSetting from '../../components/ModelSetting.js';
+import OtherSetting from '../../components/settings/OtherSetting';
+import PersonalSetting from '../../components/settings/PersonalSetting.js';
+import OperationSetting from '../../components/settings/OperationSetting.js';
+import RateLimitSetting from '../../components/settings/RateLimitSetting.js';
+import ModelSetting from '../../components/settings/ModelSetting.js';
 
 const Setting = () => {
   const { t } = useTranslation();

web/src/pages/Task/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TaskLogsTable from '../../components/TaskLogsTable.js';
+import TaskLogsTable from '../../components/table/TaskLogsTable.js';
 
 const Task = () => (
   <>

web/src/pages/Token/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TokensTable from '../../components/TokensTable';
+import TokensTable from '../../components/table/TokensTable';
 
 const Token = () => {
   return (

web/src/pages/User/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import UsersTable from '../../components/UsersTable';
+import UsersTable from '../../components/table/UsersTable';
 
 const User = () => {
   return (