ソースを参照

fix: 修复logo图片高度显示异常,替换Antd Image为原生img标签

- 移除 BasicLayout.tsx 和 BottomBar.tsx 中的 Image 组件导入
- 将 Antd Image 组件替换为原生 img 标签以避免额外 DOM 包裹
- 移除 BottomBar Row 的 padding,添加 height: 100% 确保容器填满
- 添加 h-full className 到 logo 容器,确保图片高度填充满 StatusBar
- 使用 object-contain 保持图片宽高比
- 更新版本号从 1.1.2 到 1.1.3

改动文件:
- src/layouts/BasicLayout.tsx
- src/layouts/BottomBar.tsx
- package.json
dengdx 4 日 前
コミット
e570782749
3 ファイル変更15 行追加14 行削除
  1. 1 1
      package.json
  2. 7 4
      src/layouts/BasicLayout.tsx
  3. 7 9
      src/layouts/BottomBar.tsx

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

+ 7 - 4
src/layouts/BasicLayout.tsx

@@ -1,7 +1,7 @@
 // BasicLayout.tsx
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Layout, Row, Col, ConfigProvider, Image } from 'antd';
+import { Layout, Row, Col, ConfigProvider } from 'antd';
 import { TabBar } from 'antd-mobile';
 
 import logo from '@/assets/imgs/logo-v3.jpg';
@@ -135,7 +135,11 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
           >
             {/* 品牌区域 */}
             <Col xl={4} lg={4} md={5} sm={0} xs={0} className="h-full">
-              <Image src={logo} alt="Logo" height={'100%'} />
+              <img 
+                src={logo} 
+                alt="Logo" 
+                className="h-full w-auto object-contain"
+              />
             </Col>
             {/* 状态区域 */}
             <Col
@@ -204,9 +208,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
           >
             {/* 品牌区域 */}
             <Col xl={8} lg={8} md={5} sm={0} xs={0} className="h-full">
-              {/* <Image src={logo} alt="Logo" height={'100%'} /> */}
               {/* 底部通栏:仅在桌面端显示 */}
-              <div className="xl:block lg:block md:hidden sm:hidden xs:hidden">
+              <div className="xl:block lg:block md:hidden sm:hidden xs:hidden h-full">
                 <BottomBar />
               </div>
             </Col>

+ 7 - 9
src/layouts/BottomBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Row, Col, Image } from 'antd';
+import { Row, Col } from 'antd';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/states/store';
 import { isLoggedIn } from '../states/user_info';
@@ -37,19 +37,17 @@ const BottomBar: React.FC = () => {
                     bottom: 0,
                     left: 0,
                     width: '100%',
-                    padding: '8px 16px',
+                    height: '100%',
                     boxShadow: '0 -2px 5px rgba(0,0,0,0.1)',
                     alignItems: 'center',
                 }}
             >
                 {/* Logo */}
-                <Col flex="none">
-                    <Image
-                        src={logo}
-                        alt="Logo"
-                        height={'40px'}
-                        preview={false}
-                        style={{ display: 'block' }}
+                <Col flex="none" className="h-full">
+                    <img 
+                        src={logo} 
+                        alt="Logo" 
+                        className="h-full w-auto object-contain"
                     />
                 </Col>