feat (1.66.0 -> 1.66.1): 优化系统模式选择界面布局，提升用户体验

- 将单选按钮组改为卡片式选择界面，提供更直观的选择体验
- 移除背景色和阴影，使用简洁的边框和颜色区分选中状态
- 添加勾选图标显示当前选中模式
- 集成 Ant Design 主题系统，确保视觉一致性
- 改善响应式布局，适配不同屏幕尺寸

改动文件：
- src/pages/system/SettingsModal/sections/SystemHome/SystemMode.tsx

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 本项目的所有重要变更都将记录在此文件中.
 
+## [1.66.1] - 2026-01-12 15:58
+
+### 新增 (Added)
+
+- **优化系统模式选择界面，提升用户体验和视觉效果** - 重新设计 SystemMode 组件的界面布局，从单选按钮组改为卡片式选择界面，提供更直观和美观的用户交互体验
+  - 将传统的单选按钮组改为可点击的卡片布局
+  - 移除背景色和阴影效果，使用简洁的边框和颜色区分选中状态
+  - 添加勾选图标显示当前选中状态
+  - 优化布局间距和响应式设计，适配不同屏幕尺寸
+  - 集成 Ant Design 主题系统，使用主题色确保视觉一致性
+
+**改动文件:**
+
+- src/pages/system/SettingsModal/sections/SystemHome/SystemMode.tsx
+
 ## [1.66.0] - 2026-01-12 14:47
 
 ### 新增 (Added)

package.json

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

src/pages/system/SettingsModal/sections/SystemHome/SystemMode.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { SPACING } from '../../constants';
 import Space from 'antd/es/space';
 import Card from 'antd/es/card';
 import Typography from 'antd/es/typography';
-import { Button, Radio, message, Spin, Tooltip } from 'antd';
+import { Button, message, Spin } from 'antd';
 import { useIntl } from 'react-intl';
 import { getConfig, modifyConfig } from '@/API/system/options';
+import { theme } from 'antd';
 
 interface SystemModeOption {
   label: string;
@@ -47,6 +48,8 @@ export const SystemMode: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [saving, setSaving] = useState(false);
 
+  const { useToken } = theme;
+  const colorPrimary = useToken().token.colorPrimary;
   useEffect(() => {
     loadCurrentMode();
   }, []);
@@ -117,41 +120,89 @@ export const SystemMode: React.FC = () => {
     desc: intl.formatMessage({ id: `systemMode.${option.value}.desc` }),
   }));
 
+  const handleModeSelect = (modeValue: string) => {
+    setSelectedMode(modeValue);
+  };
+
   return (
     <div style={{ padding: SPACING.LG }}>
-      <Space direction="vertical" style={{ display: 'flex' }}>
-        <Card
-          title={intl.formatMessage({ id: 'systemMode.title' })}
-          variant="borderless"
-        >
-          {loading ? (
-            <Spin size="small" />
-          ) : (
-            <Radio.Group
-              block
-              value={selectedMode}
-              onChange={(e) => setSelectedMode(e.target.value)}
-              optionType="button"
-              buttonStyle="solid"
-            >
-              {radioOptions.map((radioItem) => (
-                <Tooltip
-                  title={radioItem.desc}
-                  placement="bottom"
-                  key={radioItem.value}
+      <Space direction="vertical" style={{ display: 'flex', width: '100%' }}>
+        <Text strong style={{ fontSize: '16px' }}>
+          {intl.formatMessage({ id: 'systemMode.title' })}
+        </Text>
+
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '20px' }}>
+            <Spin />
+          </div>
+        ) : (
+          <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+            {radioOptions.map((option) => (
+              <Card
+                key={option.value}
+                hoverable
+                style={{
+                  flex: '1',
+                  minWidth: '200px',
+                  cursor: 'pointer',
+                  borderColor:
+                    selectedMode === option.value ? colorPrimary : 'inherit',
+                  borderWidth: '2px',
+                  // border: `2px solid ${
+                  //   selectedMode === option.value ? colorPrimary
+                  // }`,
+
+                  transition: 'all 0.2s ease',
+                  position: 'relative',
+                }}
+                onClick={() => handleModeSelect(option.value)}
+                styles={{
+                  body: { padding: '16px' },
+                }}
+              >
+                <div
+                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                 >
-                  <Radio value={radioItem.value}>{radioItem.label}</Radio>
-                </Tooltip>
-              ))}
-            </Radio.Group>
-          )}
-        </Card>
-        <Text type="secondary">
+                  <div style={{ flex: 1 }}>
+                    <Text
+                      strong
+                      style={{
+                        display: 'block',
+                        marginBottom: '4px',
+                      }}
+                    >
+                      {option.label}
+                    </Text>
+                    <Text type="secondary" style={{ fontSize: '12px' }}>
+                      {option.desc}
+                    </Text>
+                  </div>
+                  {selectedMode === option.value && (
+                    <CheckCircleOutlined
+                      style={{
+                        color: colorPrimary,
+                        fontSize: '20px',
+                      }}
+                    />
+                  )}
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        <Text type="secondary" style={{ marginTop: '16px' }}>
           <InfoCircleOutlined style={{ marginRight: 6 }} />
           {intl.formatMessage({ id: 'systemMode.hint' })}
         </Text>
-        <div>
-          <Button type="primary" onClick={saveSystemMode} loading={saving}>
+
+        <div style={{ marginTop: '16px' }}>
+          <Button
+            type="primary"
+            onClick={saveSystemMode}
+            loading={saving}
+            disabled={!selectedMode}
+          >
             {intl.formatMessage({ id: 'systemMode.save' })}
           </Button>
         </div>