feat(系统设置): 重构系统设置页面UI并优化响应式布局

2026-02-12 15:10:24 +08:00
parent 8de7096808
commit b2c3e6c348
1 changed files with 517 additions and 261 deletions
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import {
-  Tabs,
  Form,
  Input,
  Switch,
@@ -19,6 +18,7 @@ import {
  Typography,
  Badge,
  Tooltip,
+  Avatar,
 } from 'antd';
 import {
  SettingOutlined,
@@ -38,26 +38,41 @@ import {
  SafetyCertificateOutlined,
  ReloadOutlined,
  SaveOutlined,
+  BellOutlined,
+  CloudServerOutlined,
+  UserOutlined,
+  SecurityScanOutlined,
+  ApiOutlined,
+  ThunderboltOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
 } from '@ant-design/icons';
 import axios from 'axios';
 import { useConfig } from '../context/ConfigContext';

 const { Option } = Select;
-const { TabPane } = Tabs;
-const { Title, Text } = Typography;
+const { Title, Text, Paragraph } = Typography;

 const SystemSettings = () => {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [settings, setSettings] = useState({});
-  const [activeTab, setActiveTab] = useState('general');
+  const [activeMenu, setActiveMenu] = useState('general');
  const [systemInfo, setSystemInfo] = useState(null);
  const [form] = Form.useForm();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  const { reloadConfig } = useConfig();

  useEffect(() => {
    fetchSettings();
    fetchSystemInfo();
+    
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const fetchSettings = async () => {
@@ -99,18 +114,13 @@ const SystemSettings = () => {

      await axios.put('/api/system-settings', { settings: updates });

-      // 如果修改了前端端口，同步配置并自动重启（仅开发环境）
      if ('frontend_port' in updates) {
        try {
-          // 1. 同步端口到配置文件
          await axios.post('/api/system-settings/frontend/port/sync');
-
-          // 2. 检查是否为生产环境
          const statusRes = await axios.get('/api/system-settings/frontend/status');
          const isProduction = statusRes.data.isProduction;

          if (isProduction) {
-            // 生产环境：只显示提示，不自动重启
            Modal.info({
              title: '前端端口已修改（生产环境）',
              content: (
@@ -123,10 +133,7 @@ const SystemSettings = () => {
                    message="请手动更新服务器配置"
                    description={
                      <div>
-                        <p>生产环境由 Nginx 或其他服务器托管，请手动更新服务器配置文件：</p>
-                        <p>1. 更新 Nginx 配置中的监听端口</p>
-                        <p>2. 重启 Nginx 服务</p>
-                        <p>3. 更新 vite.config.js 中的端口配置（用于下次构建）</p>
+                        <p>生产环境由 Nginx 或其他服务器托管，请手动更新服务器配置文件</p>
                      </div>
                    }
                    type="info"
@@ -138,7 +145,6 @@ const SystemSettings = () => {
              okText: '知道了',
            });
          } else {
-            // 开发环境：显示确认对话框并自动重启
            Modal.confirm({
              title: '前端端口已修改',
              icon: <ExclamationCircleOutlined />,
@@ -149,13 +155,6 @@ const SystemSettings = () => {
                    <strong>{updates.frontend_port}</strong>
                  </p>
                  <p>是否立即重启前端服务以应用新端口？</p>
-                  <Alert
-                    message="注意"
-                    description="重启后页面将自动跳转到新地址，如果新端口无法访问，请手动使用原端口访问。"
-                    type="warning"
-                    showIcon
-                    style={{ marginTop: 16 }}
-                  />
                </div>
              ),
              okText: '立即重启',
@@ -163,20 +162,12 @@ const SystemSettings = () => {
              onOk: async () => {
                const newPort = updates.frontend_port;
                const newUrl = `http://localhost:${newPort}`;
-
-                // 先显示跳转提示，再调用重启API
-                // 因为重启API会导致当前服务中断
                Modal.success({
                  title: '正在重启前端服务',
                  content: (
                    <div>
-                      <p>
-                        前端服务正在重启，新端口：<strong>{newPort}</strong>
-                      </p>
+                      <p>前端服务正在重启，新端口：<strong>{newPort}</strong></p>
                      <p>页面将在3秒后自动跳转到新地址...</p>
-                      <p>
-                        如果跳转失败，请手动访问：<a href={newUrl}>{newUrl}</a>
-                      </p>
                    </div>
                  ),
                  okText: '立即跳转',
@@ -186,23 +177,13 @@ const SystemSettings = () => {
                    window.location.href = newUrl;
                  },
                });
-
-                // 延迟调用重启API，让用户看到提示
                setTimeout(async () => {
                  try {
-                    // 调用重启API（这个请求可能会因为服务重启而失败）
-                    await axios.post(
-                      '/api/system-settings/frontend/restart',
-                      {},
-                      { timeout: 5000 }
-                    );
+                    await axios.post('/api/system-settings/frontend/restart', {}, { timeout: 5000 });
                  } catch (error) {
-                    // 忽略错误，因为服务重启会导致连接中断
                    console.log('重启请求已发送，服务正在重启...');
                  }
                }, 1000);
-
-                // 延迟3秒后跳转
                setTimeout(() => {
                  window.location.href = newUrl;
                }, 3000);
@@ -218,7 +199,6 @@ const SystemSettings = () => {
      }

      fetchSettings();
-      // 重新加载全局配置，使更改立即生效
      await reloadConfig();
    } catch (error) {
      message.error('保存设置失败');
@@ -237,7 +217,6 @@ const SystemSettings = () => {
          await axios.post(`/api/system-settings/reset/${key}`);
          message.success('重置成功');
          fetchSettings();
-          // 重新加载全局配置，使更改立即生效
          await reloadConfig();
        } catch (error) {
          message.error('重置失败');
@@ -379,22 +358,24 @@ const SystemSettings = () => {
    return optionsMap[key] || [];
  };

-  // 设置项分组配置
  const settingGroups = {
    general: [
      {
        title: '站点信息',
        icon: <GlobalOutlined />,
+        description: '配置系统基本信息和站点标识',
        keys: ['site_name', 'site_logo'],
      },
      {
        title: '时间设置',
        icon: <ClockCircleOutlined />,
+        description: '设置系统时区和日期显示格式',
        keys: ['timezone', 'date_format'],
      },
      {
        title: '安全设置',
        icon: <SafetyCertificateOutlined />,
+        description: '配置登录安全策略和维护模式',
        keys: ['idle_timeout', 'max_login_attempts', 'maintenance_mode'],
      },
    ],
@@ -402,61 +383,261 @@ const SystemSettings = () => {
      {
        title: '主题颜色',
        icon: <BgColorsOutlined />,
+        description: '自定义系统主题配色方案',
        keys: ['primary_color', 'secondary_color'],
      },
      {
        title: '界面布局',
        icon: <DesktopOutlined />,
+        description: '调整界面显示密度和布局方式',
        keys: ['compact_mode', 'sidebar_collapsed', 'table_row_height'],
      },
      {
        title: '动画效果',
-        icon: <CheckCircleOutlined />,
+        icon: <ThunderboltOutlined />,
+        description: '控制界面动画和过渡效果',
        keys: ['animation_enabled'],
      },
    ],
  };

+  const menuItems = [
+    {
+      key: 'general',
+      icon: <GlobalOutlined />,
+      label: '全局配置',
+      description: '站点信息、时间、安全设置',
+    },
+    {
+      key: 'appearance',
+      icon: <BgColorsOutlined />,
+      label: '外观设置',
+      description: '主题颜色、界面布局',
+    },
+    {
+      key: 'about',
+      icon: <InfoCircleOutlined />,
+      label: '关于系统',
+      description: '系统信息、版本详情',
+    },
+  ];
+
  const renderSettingGroup = (group) => {
+    // 根据分组决定布局
+    const isSiteInfo = group.title === '站点信息';
+    const isTimeSetting = group.title === '时间设置';
+    const isSecurity = group.title === '安全设置';
+
    return (
      <Card
        key={group.title}
-        title={
-          <Space>
-            {group.icon}
-            <span style={{ fontWeight: 600 }}>{group.title}</span>
-          </Space>
-        }
-        style={{ marginBottom: 16, borderRadius: 8 }}
-        size="small"
+        style={{
+          marginBottom: 24,
+          borderRadius: 12,
+          border: '1px solid #e8e8e8',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+        }}
+        bodyStyle={{ padding: '24px' }}
      >
+        {/* 居中的标题区 */}
+        <div style={{ textAlign: 'center', marginBottom: 24 }}>
+          <div style={{ 
+            width: 48, 
+            height: 48, 
+            borderRadius: '50%', 
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: 12,
+          }}>
+            <span style={{ color: '#fff', fontSize: 24 }}>{group.icon}</span>
+          </div>
+          <div style={{ fontSize: 18, fontWeight: 600, color: '#262626', marginBottom: 6 }}>
+            {group.title}
+          </div>
+          <div style={{ fontSize: 14, color: '#666' }}>
+            {group.description}
+          </div>
+        </div>
+
+        <Divider style={{ margin: '0 0 24px 0' }} />
+
+        {/* 表单内容区 */}
+        {isSiteInfo && (
+          <Row gutter={[32, 16]}>
+            <Col xs={24} md={12}>
+              <Form.Item 
+                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>网站名称</span>} 
+                name="site_name"
+                style={{ marginBottom: 0 }}
+              >
+                <Input 
+                  placeholder="请输入网站名称" 
+                  style={{ height: 40, borderRadius: 8 }}
+                />
+              </Form.Item>
+            </Col>
+            <Col xs={24} md={12}>
+              <Form.Item 
+                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>网站Logo URL</span>} 
+                name="site_logo"
+                style={{ marginBottom: 0 }}
+              >
+                <Input 
+                  placeholder="请输入Logo URL" 
+                  style={{ height: 40, borderRadius: 8 }}
+                  suffix={
+                    <Button type="link" size="small" style={{ padding: 0 }}>
+                      预览
+                    </Button>
+                  }
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+        )}
+
+        {isTimeSetting && (
+          <Row gutter={[32, 16]}>
+            <Col xs={24} md={12}>
+              <Form.Item 
+                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>时区设置</span>} 
+                name="timezone"
+                style={{ marginBottom: 0 }}
+              >
+                <Select 
+                  placeholder="请选择时区" 
+                  style={{ width: '100%', height: 40 }}
+                  dropdownStyle={{ borderRadius: 8 }}
+                >
+                  {getSelectOptions('timezone').map(opt => (
+                    <Option key={opt.value} value={opt.value}>{opt.label}</Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col xs={24} md={12}>
+              <Form.Item 
+                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>日期格式</span>} 
+                name="date_format"
+                style={{ marginBottom: 0 }}
+              >
+                <Select 
+                  placeholder="请选择日期格式" 
+                  style={{ width: '100%', height: 40 }}
+                  dropdownStyle={{ borderRadius: 8 }}
+                >
+                  {getSelectOptions('date_format').map(opt => (
+                    <Option key={opt.value} value={opt.value}>{opt.label}</Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
+        )}
+
+        {isSecurity && (
+          <Row gutter={[32, 16]} align="middle">
+            <Col xs={24} md={8}>
+              <Form.Item 
+                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>用户空闲超时时间</span>} 
+                name="idle_timeout"
+                style={{ marginBottom: 0 }}
+              >
+                <Input 
+                  type="number" 
+                  placeholder="请输入超时时间" 
+                  style={{ height: 40, borderRadius: 8 }}
+                  suffix={<span style={{ color: '#999' }}>分钟</span>}
+                />
+              </Form.Item>
+            </Col>
+            <Col xs={24} md={8}>
+              <Form.Item 
+                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>最大登录尝试次数</span>} 
+                name="max_login_attempts"
+                style={{ marginBottom: 0 }}
+              >
+                <Input 
+                  type="number" 
+                  placeholder="请输入次数" 
+                  style={{ height: 40, borderRadius: 8 }}
+                  suffix={<span style={{ color: '#999' }}>次</span>}
+                />
+              </Form.Item>
+            </Col>
+            <Col xs={24} md={8}>
+              <Form.Item 
+                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>维护模式</span>} 
+                name="maintenance_mode"
+                valuePropName="checked"
+                style={{ marginBottom: 0 }}
+              >
+                <Tooltip title="开启后所有用户将无法登录">
+                  <Switch 
+                    checkedChildren="开启" 
+                    unCheckedChildren="关闭"
+                    style={{ marginTop: 8 }}
+                  />
+                </Tooltip>
+              </Form.Item>
+            </Col>
+          </Row>
+        )}
+
+        {!isSiteInfo && !isTimeSetting && !isSecurity && (
+          <Row gutter={[32, 16]}>
            {group.keys.map(key => {
              const settingData = { ...settings[key] };
-          // 确保特定字段使用正确的类型
              if (key === 'timezone' || key === 'date_format') {
                settingData.type = 'select';
              }
              if (key === 'primary_color' || key === 'secondary_color') {
                settingData.type = 'select';
              }
-          return renderFormItem(key, settingData);
+              return (
+                <Col xs={24} md={12} lg={8} key={key}>
+                  {renderFormItem(key, settingData)}
+                </Col>
+              );
            })}
+          </Row>
+        )}
      </Card>
    );
  };

-  const renderGeneralSettings = () => {
-    return (
-      <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
-        {settingGroups.general.map(renderSettingGroup)}
-        <Card style={{ borderRadius: 8 }} size="small">
-          <Space>
+  // 底部固定操作栏
+  const renderFixedFooter = (onSubmit) => (
+    <div style={{
+      position: 'sticky',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      background: '#fff',
+      borderTop: '1px solid #e8e8e8',
+      padding: '16px 24px',
+      display: 'flex',
+      justifyContent: 'center',
+      gap: 16,
+      boxShadow: '0 -2px 8px rgba(0,0,0,0.06)',
+      zIndex: 10,
+      marginTop: 24,
+    }}>
      <Button
        type="primary"
        htmlType="submit"
        loading={saving}
        icon={<SaveOutlined />}
        size="large"
+        style={{ 
+          borderRadius: 8, 
+          minWidth: 140,
+          height: 44,
+          fontSize: 15,
+          fontWeight: 500,
+        }}
      >
        保存设置
      </Button>
@@ -464,11 +645,25 @@ const SystemSettings = () => {
        onClick={() => fetchSettings()}
        icon={<ReloadOutlined />}
        size="large"
+        style={{ 
+          borderRadius: 8, 
+          minWidth: 120,
+          height: 44,
+          fontSize: 15,
+        }}
      >
        重置表单
      </Button>
-          </Space>
-        </Card>
+    </div>
+  );
+
+  const renderGeneralSettings = () => {
+    return (
+      <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
+        <div style={{ paddingBottom: 80 }}>
+          {settingGroups.general.map(group => renderSettingGroup(group))}
+        </div>
+        {renderFixedFooter()}
      </Form>
    );
  };
@@ -476,280 +671,341 @@ const SystemSettings = () => {
  const renderAppearanceSettings = () => {
    return (
      <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
+        <div style={{ paddingBottom: 80 }}>
          <Alert
            message="主题颜色设置"
            description="修改主题颜色后需要刷新页面才能生效。建议选择对比度适中的颜色组合。"
            type="info"
            showIcon
-          style={{ marginBottom: 16, borderRadius: 8 }}
+            style={{ marginBottom: 24, borderRadius: 12 }}
          />
-        {settingGroups.appearance.map(renderSettingGroup)}
-        <Card style={{ borderRadius: 8 }} size="small">
-          <Space>
-            <Button
-              type="primary"
-              htmlType="submit"
-              loading={saving}
-              icon={<SaveOutlined />}
-              size="large"
-            >
-              保存设置
-            </Button>
-            <Button
-              onClick={() => fetchSettings()}
-              icon={<ReloadOutlined />}
-              size="large"
-            >
-              重置表单
-            </Button>
-          </Space>
-        </Card>
+          {settingGroups.appearance.map(group => renderSettingGroup(group))}
+        </div>
+        {renderFixedFooter()}
      </Form>
    );
  };

  const renderAboutPage = () => {
-    const aboutKeys = [
-      'app_version',
-      'company_name',
-      'contact_email',
-      'contact_phone',
-      'company_address',
-      'system_description',
-      'privacy_policy',
-      'terms_of_service',
-    ];
-
    return (
      <div>
-        {/* 系统概览卡片 */}
        <Card
          style={{
            marginBottom: 16,
-            borderRadius: 8,
+            borderRadius: 12,
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-            color: '#fff',
+            border: 'none',
          }}
-          bodyStyle={{ padding: 24 }}
+          bodyStyle={{ padding: '24px' }}
        >
-          <Row gutter={[24, 24]} align="middle">
-            <Col>
+          <Row gutter={[20, 20]} align="middle">
+            <Col xs={24} sm={6} md={5}>
              <div
                style={{
                  width: 80,
                  height: 80,
                  borderRadius: 16,
-                  backgroundColor: 'rgba(255,255,255,0.2)',
+                  backgroundColor: 'rgba(255,255,255,0.15)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
+                  margin: '0 auto',
                }}
              >
                <DatabaseOutlined style={{ fontSize: 40, color: '#fff' }} />
              </div>
            </Col>
-            <Col flex="auto">
-              <Title level={3} style={{ color: '#fff', margin: 0, marginBottom: 8 }}>
+            <Col xs={24} sm={18} md={19}>
+              <Title level={3} style={{ color: '#fff', margin: 0, marginBottom: 6, fontSize: '22px' }}>
                机柜管理系统
              </Title>
-              <Space size={16} style={{ color: 'rgba(255,255,255,0.9)' }}>
-                <span>版本 {settings.app_version?.value || '1.0.0'}</span>
-                <span>|</span>
-                <Badge status="success" text="运行正常" style={{ color: '#fff' }} />
+              <Space size={12} wrap style={{ color: 'rgba(255,255,255,0.9)' }}>
+                <span style={{ fontSize: 14 }}>版本 {settings.app_version?.value || '1.0.0'}</span>
+                <span style={{ opacity: 0.5 }}>|</span>
+                <Badge status="success" text={<span style={{ color: '#fff' }}>运行正常</span>} />
              </Space>
+              <Paragraph style={{ color: 'rgba(255,255,255,0.85)', marginTop: 8, marginBottom: 0, fontSize: 13 }}>
+                专业的数据中心设备管理平台，提供机房、机柜、设备的全生命周期管理
+              </Paragraph>
            </Col>
          </Row>
        </Card>

-        {/* 统计信息卡片 */}
        {systemInfo && (
          <Card
-            title={
-              <Space>
-                <InfoCircleOutlined />
-                <span style={{ fontWeight: 600 }}>系统统计</span>
-              </Space>
-            }
-            style={{ marginBottom: 16, borderRadius: 8 }}
-            size="small"
+            style={{ marginBottom: 16, borderRadius: 12, border: '1px solid #e8e8e8' }}
+            bodyStyle={{ padding: '20px' }}
          >
-            <Row gutter={[16, 16]}>
-              <Col span={6}>
-                <Card size="small" style={{ textAlign: 'center', backgroundColor: '#f6ffed', border: 'none' }}>
-                  <div style={{ fontSize: 24, fontWeight: 600, color: '#52c41a' }}>
+            <div style={{ marginBottom: 16 }}>
+              <Space size={10}>
+                <Avatar style={{ backgroundColor: '#52c41a', borderRadius: 8 }} icon={<CloudServerOutlined />} size={32} />
+                <Text strong style={{ fontSize: 15 }}>系统统计</Text>
+              </Space>
+            </div>
+            <Row gutter={[12, 12]}>
+              <Col xs={12} sm={6}>
+                <div
+                  style={{
+                    textAlign: 'center',
+                    borderRadius: 10,
+                    background: 'linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%)',
+                    padding: '16px 12px',
+                  }}
+                >
+                  <div style={{ fontSize: 24, fontWeight: 700, color: '#52c41a', marginBottom: 2 }}>
                    {systemInfo.statistics?.devices || 0}
                  </div>
-                  <div style={{ color: '#666', fontSize: 12 }}>设备总数</div>
-                </Card>
+                  <Text type="secondary" style={{ fontSize: 12 }}>设备总数</Text>
+                </div>
              </Col>
-              <Col span={6}>
-                <Card size="small" style={{ textAlign: 'center', backgroundColor: '#e6f7ff', border: 'none' }}>
-                  <div style={{ fontSize: 24, fontWeight: 600, color: '#1890ff' }}>
+              <Col xs={12} sm={6}>
+                <div
+                  style={{
+                    textAlign: 'center',
+                    borderRadius: 10,
+                    background: 'linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%)',
+                    padding: '16px 12px',
+                  }}
+                >
+                  <div style={{ fontSize: 24, fontWeight: 700, color: '#1890ff', marginBottom: 2 }}>
                    {systemInfo.statistics?.racks || 0}
                  </div>
-                  <div style={{ color: '#666', fontSize: 12 }}>机柜总数</div>
-                </Card>
+                  <Text type="secondary" style={{ fontSize: 12 }}>机柜总数</Text>
+                </div>
              </Col>
-              <Col span={6}>
-                <Card size="small" style={{ textAlign: 'center', backgroundColor: '#f9f0ff', border: 'none' }}>
-                  <div style={{ fontSize: 24, fontWeight: 600, color: '#722ed1' }}>
+              <Col xs={12} sm={6}>
+                <div
+                  style={{
+                    textAlign: 'center',
+                    borderRadius: 10,
+                    background: 'linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%)',
+                    padding: '16px 12px',
+                  }}
+                >
+                  <div style={{ fontSize: 24, fontWeight: 700, color: '#722ed1', marginBottom: 2 }}>
                    {systemInfo.statistics?.rooms || 0}
                  </div>
-                  <div style={{ color: '#666', fontSize: 12 }}>机房总数</div>
-                </Card>
+                  <Text type="secondary" style={{ fontSize: 12 }}>机房总数</Text>
+                </div>
              </Col>
-              <Col span={6}>
-                <Card size="small" style={{ textAlign: 'center', backgroundColor: '#fff7e6', border: 'none' }}>
-                  <div style={{ fontSize: 24, fontWeight: 600, color: '#fa8c16' }}>
+              <Col xs={12} sm={6}>
+                <div
+                  style={{
+                    textAlign: 'center',
+                    borderRadius: 10,
+                    background: 'linear-gradient(135deg, #fff7e6 0%, #ffd591 100%)',
+                    padding: '16px 12px',
+                  }}
+                >
+                  <div style={{ fontSize: 24, fontWeight: 700, color: '#fa8c16', marginBottom: 2 }}>
                    {systemInfo.statistics?.users || 0}
                  </div>
-                  <div style={{ color: '#666', fontSize: 12 }}>用户总数</div>
-                </Card>
+                  <Text type="secondary" style={{ fontSize: 12 }}>用户总数</Text>
+                </div>
              </Col>
            </Row>

-            <Divider style={{ margin: '16px 0' }} />
+            <Divider style={{ margin: '20px 0' }} />

-            <Descriptions column={{ xs: 1, sm: 2 }} size="small">
+            <Descriptions column={{ xs: 1, sm: 2, md: 3 }} size="small" labelStyle={{ fontWeight: 500, fontSize: 13 }}>
              <Descriptions.Item label="Node.js 版本">
-                <Tag color="blue">{systemInfo.system?.nodeVersion}</Tag>
+                <Tag color="blue" size="small">{systemInfo.system?.nodeVersion}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="运行平台">
-                {systemInfo.system?.platform} ({systemInfo.system?.arch})
+                <Text style={{ fontSize: 13 }}>{systemInfo.system?.platform} ({systemInfo.system?.arch})</Text>
              </Descriptions.Item>
              <Descriptions.Item label="进程 ID">
-                <Tag>{systemInfo.system?.pid}</Tag>
+                <Tag size="small">{systemInfo.system?.pid}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="运行时间">
-                {systemInfo.system?.uptime
+                <Text style={{ fontSize: 13 }}>{systemInfo.system?.uptime
                  ? `${Math.floor(systemInfo.system.uptime / 3600)}小时${Math.floor((systemInfo.system.uptime % 3600) / 60)}分钟`
-                  : '-'}
+                  : '-'}</Text>
              </Descriptions.Item>
              <Descriptions.Item label="内存使用">
-                {systemInfo.system?.memoryUsage
+                <Text style={{ fontSize: 13 }}>{systemInfo.system?.memoryUsage
                  ? `${(systemInfo.system.memoryUsage.heapUsed / 1024 / 1024).toFixed(2)} MB`
-                  : '-'}
+                  : '-'}</Text>
              </Descriptions.Item>
              <Descriptions.Item label="系统时间">
-                {systemInfo.timestamp
+                <Text style={{ fontSize: 13 }}>{systemInfo.timestamp
                  ? new Date(systemInfo.timestamp).toLocaleString('zh-CN')
-                  : '-'}
+                  : '-'}</Text>
              </Descriptions.Item>
            </Descriptions>
          </Card>
        )}

-        {/* 公司信息卡片 */}
        <Card
-          title={
-            <Space>
-              <FileTextOutlined />
-              <span style={{ fontWeight: 600 }}>公司信息</span>
-            </Space>
-          }
-          style={{ marginBottom: 16, borderRadius: 8 }}
-          size="small"
+          style={{ marginBottom: 16, borderRadius: 12, border: '1px solid #e8e8e8' }}
+          bodyStyle={{ padding: '20px' }}
        >
-          <Form layout="vertical">
-            <Row gutter={[24, 0]}>
-              <Col span={12}>
+          <div style={{ marginBottom: 16 }}>
+            <Space size={10}>
+              <Avatar style={{ backgroundColor: '#667eea', borderRadius: 8 }} icon={<FileTextOutlined />} size={32} />
+              <Text strong style={{ fontSize: 15 }}>公司信息</Text>
+            </Space>
+          </div>
+          <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
+            <Row gutter={[24, 8]}>
+              <Col xs={24} sm={12}>
                <Form.Item label="公司名称" name="company_name">
-                  <Input prefix={<GlobalOutlined />} placeholder="请输入公司名称" />
+                  <Input prefix={<GlobalOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入公司名称" />
                </Form.Item>
              </Col>
-              <Col span={12}>
+              <Col xs={24} sm={12}>
                <Form.Item label="联系邮箱" name="contact_email">
-                  <Input prefix={<MailOutlined />} placeholder="请输入联系邮箱" />
+                  <Input prefix={<MailOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入联系邮箱" />
                </Form.Item>
              </Col>
-              <Col span={12}>
+              <Col xs={24} sm={12}>
                <Form.Item label="联系电话" name="contact_phone">
-                  <Input prefix={<PhoneOutlined />} placeholder="请输入联系电话" />
+                  <Input prefix={<PhoneOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入联系电话" />
                </Form.Item>
              </Col>
-              <Col span={12}>
+              <Col xs={24} sm={12}>
                <Form.Item label="公司地址" name="company_address">
-                  <Input prefix={<EnvironmentOutlined />} placeholder="请输入公司地址" />
+                  <Input prefix={<EnvironmentOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入公司地址" />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="系统描述" name="system_description">
-                  <Input.TextArea rows={3} placeholder="请输入系统描述" />
+                  <Input.TextArea rows={3} placeholder="请输入系统描述" style={{ borderRadius: 8 }} />
                </Form.Item>
              </Col>
            </Row>
-            <Form.Item>
-              <Space>
+            <Divider style={{ margin: '16px 0' }} />
+            <Space size="middle">
              <Button
                type="primary"
                htmlType="submit"
                loading={saving}
-                  onClick={() => form.submit()}
                icon={<SaveOutlined />}
+                style={{ borderRadius: 8 }}
              >
                保存信息
              </Button>
-                <Button onClick={() => fetchSettings()} icon={<ReloadOutlined />}>
+              <Button onClick={() => fetchSettings()} icon={<ReloadOutlined />} style={{ borderRadius: 8 }}>
                重置
              </Button>
            </Space>
-            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  };

-  const tabItems = [
-    {
-      key: 'general',
-      label: (
-        <span>
-          <GlobalOutlined /> 全局配置
-        </span>
-      ),
-      children: renderGeneralSettings(),
-    },
-    {
-      key: 'appearance',
-      label: (
-        <span>
-          <BgColorsOutlined /> 外观设置
-        </span>
-      ),
-      children: renderAppearanceSettings(),
-    },
-    {
-      key: 'about',
-      label: (
-        <span>
-          <InfoCircleOutlined /> 关于系统
-        </span>
-      ),
-      children: renderAboutPage(),
-    },
-  ];
+  const renderContent = () => {
+    switch (activeMenu) {
+      case 'general':
+        return renderGeneralSettings();
+      case 'appearance':
+        return renderAppearanceSettings();
+      case 'about':
+        return renderAboutPage();
+      default:
+        return renderGeneralSettings();
+    }
+  };
+
+  // 顶部导航栏菜单
+  const renderTopNav = () => (
+    <div style={{ 
+      display: 'flex', 
+      alignItems: 'center',
+      gap: '4px',
+      flexWrap: 'nowrap',
+      overflowX: 'auto',
+      scrollbarWidth: 'none',
+      msOverflowStyle: 'none',
+    }}>
+      {menuItems.map(item => (
+        <div
+          key={item.key}
+          onClick={() => setActiveMenu(item.key)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 16px',
+            borderRadius: 20,
+            cursor: 'pointer',
+            transition: 'all 0.3s ease',
+            backgroundColor: activeMenu === item.key ? 'rgba(255,255,255,0.25)' : 'transparent',
+            color: '#fff',
+            whiteSpace: 'nowrap',
+            fontSize: 14,
+            fontWeight: activeMenu === item.key ? 600 : 400,
+          }}
+          onMouseEnter={(e) => {
+            if (activeMenu !== item.key) {
+              e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (activeMenu !== item.key) {
+              e.currentTarget.style.backgroundColor = 'transparent';
+            }
+          }}
+        >
+          <span style={{ marginRight: 6, fontSize: 16 }}>{item.icon}</span>
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+
+  // 移动端下拉菜单
+  const renderMobileNav = () => (
+    <Select
+      value={activeMenu}
+      onChange={(value) => setActiveMenu(value)}
+      style={{ width: 140 }}
+      bordered={false}
+      dropdownStyle={{ borderRadius: 8 }}
+      suffixIcon={<MenuUnfoldOutlined style={{ color: '#fff' }} />}
+    >
+      {menuItems.map(item => (
+        <Option key={item.key} value={item.key}>
+          <Space>
+            {item.icon}
+            {item.label}
+          </Space>
+        </Option>
+      ))}
+    </Select>
+  );

  return (
-    <div style={{ padding: 24, maxWidth: 1200, margin: '0 auto' }}>
-      <Card
-        title={
-          <Space>
-            <SettingOutlined style={{ fontSize: 20, color: '#667eea' }} />
-            <Title level={4} style={{ margin: 0 }}>系统设置</Title>
+    <div style={{ minHeight: '100vh', background: '#f5f7fa', display: 'flex', flexDirection: 'column' }}>
+      {/* 顶部固定导航栏 */}
+      <div style={{ 
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '16px 24px',
+        position: 'sticky',
+        top: 0,
+        zIndex: 100,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      }}>
+        <div style={{ maxWidth: '100%', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Space align="center">
+            <SettingOutlined style={{ fontSize: 20, color: '#fff' }} />
+            <Title level={4} style={{ margin: 0, color: '#fff', fontSize: 18 }}>系统设置</Title>
          </Space>
-        }
-        style={{ borderRadius: 12 }}
-        bodyStyle={{ padding: 0 }}
-      >
-        <Tabs
-          activeKey={activeTab}
-          onChange={setActiveTab}
-          items={tabItems}
-          style={{ padding: '0 24px 24px' }}
-          tabBarStyle={{ marginBottom: 24 }}
-        />
-      </Card>
+          
+          {/* 桌面端导航 */}
+          {!isMobile && renderTopNav()}
+          
+          {/* 移动端导航 */}
+          {isMobile && renderMobileNav()}
+        </div>
+      </div>
+
+      {/* 主内容区 - 平铺填充 */}
+      <div style={{ flex: 1, padding: '16px 24px' }}>
+        <div style={{ maxWidth: '100%' }}>
+          {renderContent()}
+        </div>
+      </div>
    </div>
  );
 };