♻️ 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/layout/HeaderBar/HeaderLogo.jsx

@@ -0,0 +1,81 @@
+/*
+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 from 'react';
+import { Link } from 'react-router-dom';
+import { Typography, Tag } from '@douyinfe/semi-ui';
+import SkeletonWrapper from './SkeletonWrapper';
+
+const HeaderLogo = ({
+  isMobile,
+  isConsoleRoute,
+  logo,
+  logoLoaded,
+  isLoading,
+  systemName,
+  isSelfUseMode,
+  isDemoSiteMode,
+  t,
+}) => {
+  if (isMobile && isConsoleRoute) {
+    return null;
+  }
+
+  return (
+    <Link to="/" className="group flex items-center gap-2">
+      <div className="relative w-8 h-8 md:w-8 md:h-8">
+        <SkeletonWrapper
+          loading={isLoading || !logoLoaded}
+          type="image"
+        />
+        <img
+          src={logo}
+          alt="logo"
+          className={`absolute inset-0 w-full h-full transition-all duration-200 group-hover:scale-110 rounded-full ${(!isLoading && logoLoaded) ? 'opacity-100' : 'opacity-0'}`}
+        />
+      </div>
+      <div className="hidden md:flex items-center gap-2">
+        <div className="flex items-center gap-2">
+          <SkeletonWrapper
+            loading={isLoading}
+            type="title"
+            width={120}
+            height={24}
+          >
+            <Typography.Title heading={4} className="!text-lg !font-semibold !mb-0">
+              {systemName}
+            </Typography.Title>
+          </SkeletonWrapper>
+          {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
+            <Tag
+              color={isSelfUseMode ? 'purple' : 'blue'}
+              className="text-xs px-1.5 py-0.5 rounded whitespace-nowrap shadow-sm"
+              size="small"
+              shape='circle'
+            >
+              {isSelfUseMode ? t('自用模式') : t('演示站点')}
+            </Tag>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default HeaderLogo;