feat(UI): 优化多个页面的UI设计和交互体验

refactor(ProtectedRoute): 调整加载状态布局和样式
feat(DeviceFieldManagement): 添加设计令牌和样式优化
feat(App): 重构侧边栏和顶部导航栏样式
feat(ConsumableStatistics): 重新设计统计卡片和表格样式
style: 统一多个组件的设计语言和配色方案

frontend/src/pages/DeviceFieldManagement.jsx

@@ -1,9 +1,130 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber, Switch } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber, Switch, Tag, Statistic } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, AppstoreOutlined, FontSizeOutlined, NumberOutlined, CheckCircleOutlined, CalendarOutlined, FileTextOutlined } from '@ant-design/icons';
 import axios from 'axios';
 
-const { Option } = Select;
+const { Option = Select.Option } = Select;
+
+const designTokens = {
+  colors: {
+    primary: {
+      main: '#667eea',
+      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      light: '#8b9ff0',
+      dark: '#4f5db8'
+    },
+    success: {
+      main: '#10b981',
+      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
+    },
+    warning: {
+      main: '#f59e0b',
+      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
+    },
+    error: {
+      main: '#ef4444',
+      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)'
+    },
+    text: {
+      primary: '#1e293b',
+      secondary: '#64748b',
+      tertiary: '#94a3b8',
+      inverse: '#ffffff'
+    },
+    background: {
+      primary: '#ffffff',
+      secondary: '#f8fafc',
+      tertiary: '#f1f5f9'
+    },
+    border: {
+      light: '#e2e8f0',
+      medium: '#cbd5e1',
+      dark: '#94a3b8'
+    },
+    fieldType: {
+      string: '#3b82f6',
+      number: '#10b981',
+      boolean: '#f59e0b',
+      select: '#8b5cf6',
+      date: '#06b6d4',
+      textarea: '#64748b'
+    }
+  },
+  shadows: {
+    small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    large: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    glow: '0 0 20px rgba(102, 126, 234, 0.15)'
+  },
+  borderRadius: {
+    small: '6px',
+    medium: '10px',
+    large: '16px'
+  },
+  transitions: {
+    fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
+    normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)'
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px'
+  }
+};
+
+const pageContainerStyle = {
+  minHeight: '100vh',
+  background: designTokens.colors.background.secondary,
+  padding: designTokens.spacing.lg
+};
+
+const titleRowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: designTokens.spacing.lg
+};
+
+const titleStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: designTokens.spacing.sm,
+  fontSize: '20px',
+  fontWeight: '600',
+  color: designTokens.colors.text.primary
+};
+
+const actionButtonStyle = {
+  height: '36px',
+  padding: `0 ${designTokens.spacing.md}px`,
+  borderRadius: designTokens.borderRadius.small,
+  fontSize: '13px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: designTokens.spacing.xs
+};
+
+const primaryActionStyle = {
+  ...actionButtonStyle,
+  background: designTokens.colors.primary.gradient,
+  border: 'none',
+  color: '#ffffff',
+  boxShadow: designTokens.shadows.small
+};
+
+const tableCardStyle = {
+  background: designTokens.colors.background.primary,
+  borderRadius: designTokens.borderRadius.large,
+  boxShadow: designTokens.shadows.small,
+  border: `1px solid ${designTokens.colors.border.light}`,
+  overflow: 'hidden'
+};
+
+const tableStyle = {
+  background: designTokens.colors.background.primary
+};
 
 function DeviceFieldManagement() {
   const [fields, setFields] = useState([]);
@@ -12,7 +133,6 @@ function DeviceFieldManagement() {
   const [editingField, setEditingField] = useState(null);
   const [form] = Form.useForm();
 
-  // 获取所有字段配置
   const fetchFields = async () => {
     try {
       setLoading(true);
@@ -30,11 +150,9 @@ function DeviceFieldManagement() {
     fetchFields();
   }, []);
 
-  // 打开模态框
   const showModal = (field = null) => {
     setEditingField(field);
     if (field) {
-      // 将options对象转换为JSON字符串以便在TextArea中显示
       const fieldData = {
         ...field,
         options: field.options ? JSON.stringify(field.options, null, 2) : ''
@@ -46,27 +164,22 @@ function DeviceFieldManagement() {
     setModalVisible(true);
   };
 
-  // 关闭模态框
   const handleCancel = () => {
     setModalVisible(false);
     setEditingField(null);
   };
 
-  // 提交表单
   const handleSubmit = async (values) => {
     try {
-      // 处理选项配置，将JSON字符串转换为对象
       const fieldData = {
         ...values,
         options: values.options ? JSON.parse(values.options) : null
       };
 
       if (editingField) {
-        // 更新字段
         await axios.put(`/api/deviceFields/${editingField.fieldId}`, fieldData);
         message.success('字段更新成功');
       } else {
-        // 创建字段
         await axios.post('/api/deviceFields', fieldData);
         message.success('字段创建成功');
       }
@@ -80,7 +193,6 @@ function DeviceFieldManagement() {
     }
   };
 
-  // 删除字段
   const handleDelete = async (fieldId) => {
     Modal.confirm({
       title: '确认删除',
@@ -101,64 +213,141 @@ function DeviceFieldManagement() {
     });
   };
 
-  // 表格列配置
+  const getFieldTypeIcon = (type) => {
+    const iconMap = {
+      string: <FontSizeOutlined />,
+      number: <NumberOutlined />,
+      boolean: <CheckCircleOutlined />,
+      select: <AppstoreOutlined />,
+      date: <CalendarOutlined />,
+      textarea: <FileTextOutlined />
+    };
+    return iconMap[type] || <FontSizeOutlined />;
+  };
+
   const columns = [
     {
       title: '字段名称',
       dataIndex: 'fieldName',
       key: 'fieldName',
+      width: 150,
+      render: (text) => (
+        <span style={{ fontWeight: '500', color: designTokens.colors.text.primary }}>
+          {text}
+        </span>
+      )
     },
     {
       title: '显示名称',
       dataIndex: 'displayName',
       key: 'displayName',
+      width: 120,
     },
     {
       title: '字段类型',
       dataIndex: 'fieldType',
       key: 'fieldType',
+      width: 110,
       render: (type) => {
         const typeMap = {
-          string: '文本',
-          number: '数字',
-          boolean: '布尔值',
-          select: '下拉选择',
-          date: '日期',
-          textarea: '多行文本'
+          string: { text: '文本', color: designTokens.colors.fieldType.string },
+          number: { text: '数字', color: designTokens.colors.fieldType.number },
+          boolean: { text: '布尔值', color: designTokens.colors.fieldType.boolean },
+          select: { text: '下拉选择', color: designTokens.colors.fieldType.select },
+          date: { text: '日期', color: designTokens.colors.fieldType.date },
+          textarea: { text: '多行文本', color: designTokens.colors.fieldType.textarea }
         };
-        return typeMap[type] || type;
+        const config = typeMap[type] || { text: type, color: designTokens.colors.text.tertiary };
+        return (
+          <Tag
+            style={{
+              border: 'none',
+              borderRadius: designTokens.borderRadius.small,
+              background: `${config.color}15`,
+              color: config.color,
+              fontWeight: '500'
+            }}
+          >
+            {getFieldTypeIcon(type)}
+            <span style={{ marginLeft: '4px' }}>{config.text}</span>
+          </Tag>
+        );
       }
     },
     {
       title: '必填',
       dataIndex: 'required',
       key: 'required',
+      width: 80,
       render: (required) => (
-        <Switch checked={required} disabled />
+        <span style={{
+          color: required ? designTokens.colors.success.main : designTokens.colors.text.tertiary,
+          fontWeight: '500'
+        }}>
+          {required ? '是' : '否'}
+        </span>
       )
     },
     {
       title: '可见',
       dataIndex: 'visible',
       key: 'visible',
+      width: 80,
       render: (visible) => (
-        <Switch checked={visible} disabled />
+        <span style={{
+          color: visible ? designTokens.colors.primary.main : designTokens.colors.text.tertiary,
+          fontWeight: '500'
+        }}>
+          {visible ? '是' : '否'}
+        </span>
       )
     },
     {
       title: '顺序',
       dataIndex: 'order',
       key: 'order',
+      width: 80,
+      render: (order) => (
+        <span style={{
+          background: designTokens.colors.background.tertiary,
+          padding: `2px ${designTokens.spacing.sm}`,
+          borderRadius: designTokens.borderRadius.small,
+          fontSize: '12px',
+          fontWeight: '500'
+        }}>
+          {order}
+        </span>
+      )
     },
     {
       title: '操作',
       key: 'action',
+      width: 160,
+      fixed: 'right',
       render: (_, record) => (
-        <Space size="middle">
-          <Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
+        <Space size="small">
+          <Button
+            type="text"
+            icon={<EditOutlined />}
+            onClick={() => showModal(record)}
+            style={{
+              color: designTokens.colors.primary.main,
+              height: '28px',
+              padding: '0 8px'
+            }}
+          >
             编辑
           </Button>
-          <Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.fieldId)} size="small">
+          <Button
+            type="text"
+            danger
+            icon={<DeleteOutlined />}
+            onClick={() => handleDelete(record.fieldId)}
+            style={{
+              height: '28px',
+              padding: '0 8px'
+            }}
+          >
             删除
           </Button>
         </Space>
@@ -167,27 +356,55 @@ function DeviceFieldManagement() {
   ];
 
   return (
-    <div>
-      <Card title="设备字段管理" extra={
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+    <div style={pageContainerStyle}>
+      <div style={titleRowStyle}>
+        <div style={titleStyle}>
+          <AppstoreOutlined style={{ color: designTokens.colors.primary.main }} />
+          设备字段管理
+        </div>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => showModal()}
+          style={primaryActionStyle}
+        >
           添加字段
         </Button>
-      }>
+      </div>
+
+      <div style={tableCardStyle}>
         <Table
           columns={columns}
           dataSource={fields}
           rowKey="fieldId"
           loading={loading}
-          pagination={{ pageSize: 10 }}
+          pagination={{
+            pageSize: 10,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 共 ${total} 条`
+          }}
+          scroll={{ x: 900 }}
+          style={tableStyle}
         />
-      </Card>
+      </div>
 
       <Modal
-        title={editingField ? '编辑字段' : '添加字段'}
+        title={
+          <span style={{ fontWeight: '600' }}>
+            {editingField ? '编辑字段' : '添加字段'}
+          </span>
+        }
         open={modalVisible}
         onCancel={handleCancel}
         footer={null}
         width={600}
+        styles={{
+          body: { padding: designTokens.spacing.lg }
+        }}
+        style={{
+          borderRadius: designTokens.borderRadius.large
+        }}
       >
         <Form
           form={form}
@@ -196,7 +413,7 @@ function DeviceFieldManagement() {
         >
           <Form.Item
             name="fieldName"
-            label="字段名称"
+            label={<span style={{ fontWeight: '500' }}>字段名称</span>}
             rules={[{ required: true, message: '请输入字段名称' }]}
           >
             <Input placeholder="请输入字段名称（英文，如：deviceId）" />
@@ -204,7 +421,7 @@ function DeviceFieldManagement() {
 
           <Form.Item
             name="displayName"
-            label="显示名称"
+            label={<span style={{ fontWeight: '500' }}>显示名称</span>}
             rules={[{ required: true, message: '请输入显示名称' }]}
           >
             <Input placeholder="请输入显示名称（中文，如：设备ID）" />
@@ -212,7 +429,7 @@ function DeviceFieldManagement() {
 
           <Form.Item
             name="fieldType"
-            label="字段类型"
+            label={<span style={{ fontWeight: '500' }}>字段类型</span>}
             rules={[{ required: true, message: '请选择字段类型' }]}
           >
             <Select placeholder="请选择字段类型">
@@ -225,23 +442,29 @@ function DeviceFieldManagement() {
             </Select>
           </Form.Item>
 
-          <Form.Item
-            name="required"
-            label="必填"
-          >
-            <Switch />
-          </Form.Item>
+          <div style={{ display: 'flex', gap: designTokens.spacing.md }}>
+            <Form.Item
+              name="required"
+              label={<span style={{ fontWeight: '500' }}>必填</span>}
+              valuePropName="checked"
+              style={{ flex: 1 }}
+            >
+              <Switch />
+            </Form.Item>
 
-          <Form.Item
-            name="visible"
-            label="可见"
-          >
-            <Switch defaultChecked />
-          </Form.Item>
+            <Form.Item
+              name="visible"
+              label={<span style={{ fontWeight: '500' }}>可见</span>}
+              valuePropName="checked"
+              style={{ flex: 1 }}
+            >
+              <Switch defaultChecked />
+            </Form.Item>
+          </div>
 
           <Form.Item
             name="order"
-            label="显示顺序"
+            label={<span style={{ fontWeight: '500' }}>显示顺序</span>}
             rules={[{ required: true, message: '请输入显示顺序' }]}
           >
             <InputNumber placeholder="请输入显示顺序" min={0} style={{ width: '100%' }} />
@@ -249,21 +472,20 @@ function DeviceFieldManagement() {
 
           <Form.Item
             name="options"
-            label="选项配置（仅下拉选择类型，JSON格式）"
-            tooltip="格式示例：[{value: 'option1', label: '选项1'}]，使用单引号"
+            label={<span style={{ fontWeight: '500' }}>选项配置（JSON格式）</span>}
+            tooltip="格式示例：[{value: 'option1', label: '选项1'}]，仅下拉选择类型需要配置"
           >
-            <Input.TextArea 
-              rows={3} 
+            <Input.TextArea
+              rows={3}
               placeholder="请输入JSON格式的选项配置，使用单引号"
+              style={{ fontFamily: 'monospace' }}
             />
           </Form.Item>
 
-          <Form.Item style={{ textAlign: 'right' }}>
+          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
             <Space>
               <Button onClick={handleCancel}>取消</Button>
-              <Button type="primary" htmlType="submit">
-                确定
-              </Button>
+              <Button type="primary" htmlType="submit">确定</Button>
             </Space>
           </Form.Item>
         </Form>
@@ -272,4 +494,4 @@ function DeviceFieldManagement() {
   );
 }
 
-export default DeviceFieldManagement;
+export default DeviceFieldManagement;