Parcourir la source

feat: 优化 dark 主题下追加按钮显示,使用 currentColor 实现主题自适应图标

sw il y a 1 semaine
Parent
commit
916b829239

+ 1 - 0
src/app.tsx

@@ -129,6 +129,7 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
             --color-primary: ${currentTheme.token.colorPrimary};
             --color-bg-layout: ${currentTheme.token.colorBgLayout};
             --color-text: ${currentTheme.token.colorText};
+            --button-bg-hover: ${currentTheme.token.buttonBgHover};
           }`}
         </style>
         <div

+ 1 - 1
src/assets/imgs/append-view.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 1H6V6L1 6V10H6V15H10V10H15V6L10 6V1Z" fill="#030708"/>
+<path d="M10 1H6V6L1 6V10H6V15H10V10H15V6L10 6V1Z" fill="currentColor"/>
 </svg>

+ 26 - 0
src/components/AppendViewIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface AppendViewIconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const AppendViewIcon: React.FC<AppendViewIconProps> = ({
+  className,
+  style,
+}) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path d="M10 1H6V6L1 6V10H6V15H10V10H15V6L10 6V1Z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export default AppendViewIcon;

+ 10 - 7
src/pages/exam/components/BodyPositionList.tsx

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { ExtendedBodyPosition } from '../../../states/exam/bodyPositionListSlice';
 import { RootState, AppDispatch } from '../../../states/store';
 import { message } from 'antd';
-import AppendViewIcon from '@/assets/imgs/append-view.svg';
+import AppendViewIcon from '@/components/AppendViewIcon';
 import ImageViewer from './ImageViewer';
 import { getExposedImageUrl, getViewIconUrl } from '../../../API/bodyPosition';
 import {
@@ -108,12 +108,15 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
           style={{ width: '50%' }}
           onClick={addBodyPositionClick}
         >
-          <img
-            src={AppendViewIcon}
-            alt="Append View"
-            style={{ width: '50%', display: 'block' }}
-            className="mx-auto mt-2 mb-4 hover:opacity-80"
-          />
+          <div
+            style={{
+              stroke: 'var(--color-primary)',
+              strokeWidth: 0.5,
+              color: 'var(--color-text)',
+            }}
+          >
+            <AppendViewIcon className="w-full h-full hover:opacity-100 " />
+          </div>
         </div>
       )}
 

+ 2 - 0
src/themes/darkTheme.ts

@@ -7,6 +7,8 @@ export const darkTheme = {
     colorBgContainer: '#000000', // 容器背景色
     colorText: '#FFFFFF', // 文字颜色
     colorBgLayout: '#121212', // 全局背景色
+    // 按钮相关配置
+    buttonBgHover: 'rgba(255, 255, 255, 0.9)', // 按钮悬停背景色
   },
   components: {
     Layout: {

+ 2 - 0
src/themes/lightTheme.ts

@@ -7,6 +7,8 @@ export const lightTheme = {
     colorBgContainer: '#FFFFFF', // 容器背景色
     colorText: '#000000', // 文字颜色
     colorBgLayout: '#FAFAFA', // 全局背景色
+    // 按钮相关配置
+    buttonBgHover: 'rgba(0, 0, 0, 0.05)', // 按钮悬停背景色
   },
   components: {
     Layout: {