feat(layout): make layout configurable, allow status and brand areas to be positioned at top or bottom

src/config/pageLayout.ts

@@ -0,0 +1,22 @@
+/**
+ * 页面布局配置
+ * 该文件用于存储页面布局相关的配置信息
+ */
+
+/**
+ * 品牌与状态区域的位置类型
+ * 可能的值：'top' 或 'bottom'
+ */
+export type BrandAndStatusPosition = 'top' | 'bottom';
+
+/**
+ * 页面布局配置对象
+ * 包含品牌与状态区域的位置等配置项
+ */
+export const pageLayoutConfig = {
+  /**
+   * 品牌与状态区域的位置
+   * 可能的值：'top' 或 'bottom'
+   */
+  brandAndStatusPosition: 'bottom' as BrandAndStatusPosition,
+};

src/layouts/BasicLayout.tsx

@@ -21,6 +21,7 @@ import ExamPage from '@/pages/exam/ExamPage';
 import { RootState } from '@/states/store';
 import { setBusinessFlow } from '@/states/BusinessFlowSlice';
 import ImageProcessingPage from '@/pages/view/ImageProcessingPage';
+import { pageLayoutConfig } from '@/config/pageLayout';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -95,22 +96,23 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
         className="h-[100vh] xl:text-[48px] lg:text-[40px] md:text-[30px] sm:text-[20px] xs:text-[15px]"
       >
         {/* 第一行：品牌和状态区域 */}
-        <Row
-          className="xl:h-[9vh] text-[100%]"
-          style={{ borderBottom: '1px solid #e5e7eb' }}
-        >
-          {/* 品牌区域 */}
-          <Col xl={4} lg={4} md={5} sm={0} xs={0} className="h-full">
-            <Image src={logo} alt="Logo" height={'100%'} />
-          </Col>
-          {/* 状态区域 */}
-          <Col
-            xl={20}
-            lg={20}
-            md={19}
-            sm={0}
-            xs={0}
-            className="items-center
+        {pageLayoutConfig.brandAndStatusPosition === 'top' && (
+          <Row
+            className="xl:h-[9vh] text-[100%]"
+            style={{ borderBottom: '1px solid #e5e7eb' }}
+          >
+            {/* 品牌区域 */}
+            <Col xl={4} lg={4} md={5} sm={0} xs={0} className="h-full">
+              <Image src={logo} alt="Logo" height={'100%'} />
+            </Col>
+            {/* 状态区域 */}
+            <Col
+              xl={20}
+              lg={20}
+              md={19}
+              sm={0}
+              xs={0}
+              className="items-center
                                     justify-end xl:flex
                                     lg:flex
                                     md:flex
@@ -118,16 +120,18 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
                                     xs:hidden
                                     h-full
                                     text-[100%]"
-          >
-            {/* text-[100%] 用于传导父元素的字体大小，最终影响图标大小 */}
-            <StatusBar
-              diskStatus={status.diskStatus}
-              batteryLevel={status.batteryLevel}
-              wifiStrength={status.wifiStrength}
-              heatCapacity={status.heatCapacity}
-            />
-          </Col>
-        </Row>
+            >
+              {/* text-[100%] 用于传导父元素的字体大小，最终影响图标大小 */}
+              <StatusBar
+                diskStatus={status.diskStatus}
+                batteryLevel={status.batteryLevel}
+                wifiStrength={status.wifiStrength}
+                heatCapacity={status.heatCapacity}
+              />
+            </Col>
+          </Row>
+        )}
+
         {/* 第二行：导航区域（第1列）和内容区域（第2列） */}
         <Row
           style={{
@@ -159,6 +163,43 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
             {contentMap[currentKey]}
           </Col>
         </Row>
+
+        {/* 第一行：品牌和状态区域 */}
+        {pageLayoutConfig.brandAndStatusPosition === 'bottom' && (
+          <Row
+            className="xl:h-[9vh] text-[100%]"
+            style={{ borderBottom: '1px solid #e5e7eb' }}
+          >
+            {/* 品牌区域 */}
+            <Col xl={4} lg={4} md={5} sm={0} xs={0} className="h-full">
+              <Image src={logo} alt="Logo" height={'100%'} />
+            </Col>
+            {/* 状态区域 */}
+            <Col
+              xl={20}
+              lg={20}
+              md={19}
+              sm={0}
+              xs={0}
+              className="items-center
+                                    justify-end xl:flex
+                                    lg:flex
+                                    md:flex
+                                    sm:hidden
+                                    xs:hidden
+                                    h-full
+                                    text-[100%]"
+            >
+              {/* text-[100%] 用于传导父元素的字体大小，最终影响图标大小 */}
+              <StatusBar
+                diskStatus={status.diskStatus}
+                batteryLevel={status.batteryLevel}
+                wifiStrength={status.wifiStrength}
+                heatCapacity={status.heatCapacity}
+              />
+            </Col>
+          </Row>
+        )}
         {/* Tabbar：固定在底部，仅在手机屏幕显示 */}
         <div className="sticky bottom-0 w-full bg-red xl:hidden">
           <TabBar