style(前端页面): 优化多个页面的UI样式和交互体验

重构页面布局和组件样式，统一设计语言
添加渐变背景、圆角边框和阴影效果
优化按钮、卡片和表格的视觉表现
改进模态框的标题和内容区域样式
增强导航按钮的悬停交互效果

frontend/src/pages/RoomManagement.jsx

@@ -176,30 +176,144 @@ function RoomManagement() {
     },
   ];
 
+  const pageHeaderStyle = {
+    marginBottom: '24px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: '16px'
+  };
+
+  const titleStyle = {
+    fontSize: '24px',
+    fontWeight: '700',
+    margin: 0,
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    backgroundClip: 'text'
+  };
+
+  const cardStyle = {
+    borderRadius: '16px',
+    border: 'none',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
+    overflow: 'hidden'
+  };
+
+  const cardHeadStyle = {
+    borderBottom: '1px solid #f0f0f0',
+    padding: '16px 24px',
+    background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)'
+  };
+
+  const tableStyle = {
+    borderRadius: '12px',
+    overflow: 'hidden'
+  };
+
+  const statusTagStyle = (color) => ({
+    padding: '4px 12px',
+    borderRadius: '20px',
+    fontSize: '12px',
+    fontWeight: '500',
+    border: 'none',
+    background: color === 'green' ? '#f6ffed' : color === 'orange' ? '#fff7e6' : '#f5f5f5',
+    color: color === 'green' ? '#52c41a' : color === 'orange' ? '#faad14' : '#8c8c8c'
+  });
+
+  const primaryButtonStyle = {
+    height: '40px',
+    borderRadius: '8px',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    border: 'none',
+    boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
+    fontWeight: '500',
+    transition: 'all 0.3s ease'
+  };
+
+  const actionButtonStyle = {
+    height: '32px',
+    borderRadius: '6px',
+    border: '1px solid #e8e8e8',
+    transition: 'all 0.3s ease'
+  };
+
   return (
-    <div>
-      <Card title="机房管理" extra={
-        <Space>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+    <div style={{ padding: '8px' }}>
+      <div style={pageHeaderStyle}>
+        <h1 style={titleStyle}>机房管理</h1>
+        <Space size="middle">
+          <Button 
+            icon={<ReloadOutlined />} 
+            onClick={fetchRooms}
+            style={actionButtonStyle}
+          >
+            刷新
+          </Button>
+          <Button 
+            type="primary" 
+            icon={<PlusOutlined />} 
+            onClick={() => showModal()}
+            style={primaryButtonStyle}
+          >
             添加机房
           </Button>
         </Space>
-      }>
+      </div>
+
+      <Card style={cardStyle} headStyle={cardHeadStyle} bodyStyle={{ padding: '20px 24px' }}>
         <Table
           columns={columns}
           dataSource={rooms}
           rowKey="roomId"
           loading={loading}
-          pagination={{ pageSize: 10 }}
+          pagination={{ 
+            pageSize: 10,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total) => `共 ${total} 条记录`
+          }}
+          style={tableStyle}
+          rowClassName={() => 'table-row'}
         />
-      </Card>
 
       <Modal
-        title={editingRoom ? '编辑机房' : '添加机房'}
+        title={
+          <div style={{ 
+            fontSize: '18px', 
+            fontWeight: '600',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px'
+          }}>
+            <span style={{
+              width: '4px',
+              height: '20px',
+              background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
+              borderRadius: '2px'
+            }}></span>
+            {editingRoom ? '编辑机房' : '添加机房'}
+          </div>
+        }
         open={modalVisible}
         onCancel={handleCancel}
         footer={null}
         width={600}
+        destroyOnClose
+        styles={{
+          body: { padding: '24px' },
+          header: {
+            borderBottom: '1px solid #f0f0f0',
+            padding: '16px 24px',
+            marginBottom: '0'
+          }
+        }}
+        style={{
+          borderRadius: '16px',
+          overflow: 'hidden'
+        }}
       >
         <Form
           form={form}
@@ -211,7 +325,7 @@ function RoomManagement() {
             label="机房ID"
             rules={[{ required: true, message: '请输入机房ID' }]}
           >
-            <Input placeholder="请输入机房ID" />
+            <Input placeholder="请输入机房ID" style={{ borderRadius: '8px' }} />
           </Form.Item>
 
           <Form.Item
@@ -219,7 +333,7 @@ function RoomManagement() {
             label="机房名称"
             rules={[{ required: true, message: '请输入机房名称' }]}
           >
-            <Input placeholder="请输入机房名称" />
+            <Input placeholder="请输入机房名称" style={{ borderRadius: '8px' }} />
           </Form.Item>
 
           <Form.Item
@@ -227,7 +341,7 @@ function RoomManagement() {
             label="位置"
             rules={[{ required: true, message: '请输入机房位置' }]}
           >
-            <Input placeholder="请输入机房位置" />
+            <Input placeholder="请输入机房位置" style={{ borderRadius: '8px' }} />
           </Form.Item>
 
           <Form.Item
@@ -235,7 +349,7 @@ function RoomManagement() {
             label="面积(㎡)"
             rules={[{ required: true, message: '请输入机房面积' }]}
           >
-            <InputNumber placeholder="请输入机房面积" min={0} step={0.1} style={{ width: '100%' }} />
+            <InputNumber placeholder="请输入机房面积" min={0} step={0.1} style={{ width: '100%', borderRadius: '8px' }} />
           </Form.Item>
 
           <Form.Item
@@ -243,7 +357,7 @@ function RoomManagement() {
             label="容量(机柜数)"
             rules={[{ required: true, message: '请输入机柜容量' }]}
           >
-            <InputNumber placeholder="请输入机柜容量" min={0} style={{ width: '100%' }} />
+            <InputNumber placeholder="请输入机柜容量" min={0} style={{ width: '100%', borderRadius: '8px' }} />
           </Form.Item>
 
           <Form.Item
@@ -251,7 +365,7 @@ function RoomManagement() {
             label="状态"
             rules={[{ required: true, message: '请选择状态' }]}
           >
-            <Select placeholder="请选择状态">
+            <Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
               <Option value="active">在用</Option>
               <Option value="maintenance">维护中</Option>
               <Option value="inactive">停用</Option>
@@ -262,13 +376,27 @@ function RoomManagement() {
             name="description"
             label="描述"
           >
-            <Input.TextArea placeholder="请输入机房描述" rows={3} />
+            <Input.TextArea placeholder="请输入机房描述" rows={3} style={{ borderRadius: '8px' }} />
           </Form.Item>
 
-          <Form.Item style={{ textAlign: 'right' }}>
+          <Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
             <Space>
-              <Button onClick={handleCancel}>取消</Button>
-              <Button type="primary" htmlType="submit">
+              <Button 
+                onClick={handleCancel}
+                style={{ borderRadius: '8px', height: '40px' }}
+              >
+                取消
+              </Button>
+              <Button 
+                type="primary" 
+                htmlType="submit"
+                style={{
+                  ...primaryButtonStyle,
+                  width: 'auto',
+                  paddingLeft: '24px',
+                  paddingRight: '24px'
+                }}
+              >
                 确定
               </Button>
             </Space>