feat: improve user interface layout for better accessibility

src/App.tsx

@@ -6,7 +6,6 @@ import PublicQueryPage from './pages/PublicQuery';
 import DashboardPage from './pages/Dashboard';
 import GeneratePage from './pages/Generate';
 import ManagePage from './pages/Manage';
-import AdminQueryPage from './pages/AdminQuery';
 import ProfilePage from './pages/Profile';
 
 const PrivateRoute = () => {
@@ -39,7 +38,6 @@ function App() {
             <Route path="/admin/dashboard" element={<DashboardPage />} />
             <Route path="/admin/generate" element={<GeneratePage />} />
             <Route path="/admin/manage" element={<ManagePage />} />
-            <Route path="/admin/query" element={<AdminQueryPage />} />
             <Route path="/admin/profile" element={<ProfilePage />} />
           </Route>
         </Route>

src/components/AdminLayout.tsx

@@ -4,7 +4,6 @@ import {
   DashboardOutlined,
   QrcodeOutlined,
   TeamOutlined,
-  SearchOutlined,
   UserOutlined,
   LogoutOutlined,
   LockOutlined,
@@ -40,12 +39,6 @@ function AdminLayout() {
       label: '企业管理',
       onClick: () => navigate('/admin/manage'),
     },
-    {
-      key: 'query',
-      icon: <SearchOutlined />,
-      label: '序列号查询',
-      onClick: () => navigate('/admin/query'),
-    },
   ];
 
   const handleLogout = () => {
@@ -99,7 +92,6 @@ function AdminLayout() {
     if (path.includes('/dashboard')) return 'dashboard';
     if (path.includes('/generate')) return 'generate';
     if (path.includes('/manage')) return 'manage';
-    if (path.includes('/query')) return 'query';
     if (path.includes('/profile')) return 'profile';
     return 'dashboard';
   };

src/pages/AdminQuery.tsx

@@ -1,100 +0,0 @@
-import { useState } from 'react';
-import { Form, Input, Button, Card, message, Result, Alert } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
-import { serialApi } from '@/services/api';
-import type { Serial } from '@/types';
-
-function AdminQueryPage() {
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState<Serial | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleQuery = async (values: { serialNumber: string }) => {
-    setLoading(true);
-    setError(null);
-    setResult(null);
-    
-    try {
-      const data = await serialApi.query(values.serialNumber.trim());
-      setResult(data);
-      message.success('查询成功！');
-    } catch (err: any) {
-      setError(err.message || '查询失败');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
-      <Card title="序列号查询" bordered={false}>
-        <Form
-          form={form}
-          onFinish={handleQuery}
-          layout="vertical"
-        >
-          <Form.Item
-            label="授权序列号"
-            name="serialNumber"
-            rules={[{ required: true, message: '请输入授权序列号' }]}
-          >
-            <Input
-              placeholder="请输入授权序列号（如：BF20260001）"
-              size="large"
-            />
-          </Form.Item>
-
-          <Form.Item>
-            <Button
-              type="primary"
-              htmlType="submit"
-              loading={loading}
-              size="large"
-              block
-              icon={<SearchOutlined />}
-            >
-              立即查询
-            </Button>
-          </Form.Item>
-        </Form>
-      </Card>
-
-      {result && (
-        <Card style={{ marginTop: '24px' }}>
-          <Result
-            status="success"
-            title="授权有效"
-            subTitle="您的序列号已验证通过"
-          />
-          
-          <Alert
-            message={
-              <div>
-                <p><strong>序列号:</strong> {result.serialNumber}</p>
-                <p><strong>企业名称:</strong> {result.companyName}</p>
-                <p><strong>授权状态:</strong> <span style={{ color: '#52c41a', fontWeight: 'bold' }}>有效</span></p>
-                <p><strong>有效期至:</strong> {new Date(result.validUntil).toLocaleString('zh-CN')}</p>
-                <p><strong>创建时间:</strong> {new Date(result.createdAt).toLocaleString('zh-CN')}</p>
-              </div>
-            }
-            type="success"
-            showIcon
-          />
-        </Card>
-      )}
-
-      {error && (
-        <Card style={{ marginTop: '24px' }}>
-          <Result
-            status="error"
-            title="无效序列号"
-            subTitle={error}
-          />
-        </Card>
-      )}
-    </div>
-  );
-}
-
-export default AdminQueryPage;

src/pages/Generate.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { Form, Input, Button, Card, Radio, InputNumber, DatePicker, message, Modal, Space, ColorPicker, Divider } from 'antd';
+import { Form, Input, Button, Card, Radio, InputNumber, DatePicker, message, Modal, Space, ColorPicker, Divider, Row, Col } from 'antd';
 import { QrcodeOutlined } from '@ant-design/icons';
 import QRCode from 'qrcode';
 import type { Color } from 'antd/es/color-picker';
 import { useNavigate } from 'react-router-dom';
+import './styles/Generate.css';
 
 function GeneratePage() {
   const [form] = Form.useForm();
@@ -93,8 +94,16 @@ function GeneratePage() {
   };
 
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+    <div>
-      <Card title="生成二维码" bordered={false}>
+      <Card
+        title={
+          <Space>
+            <QrcodeOutlined />
+            <span>生成二维码</span>
+          </Space>
+        }
+        bordered={false}
+      >
         <Form
           form={form}
           onFinish={handleGenerate}
@@ -106,6 +115,8 @@ function GeneratePage() {
             validDays: 365,
           }}
         >
+          <Row gutter={24}>
+            <Col span={12}>
               <Form.Item
                 label="企业名称"
                 name="companyName"
@@ -145,7 +156,9 @@ function GeneratePage() {
               >
                 <InputNumber min={1} max={100} style={{ width: '100%' }} />
               </Form.Item>
+            </Col>
 
+            <Col span={12}>
               <Form.Item label="有效期设置" name="validOption">
                 <Radio.Group>
                   <Radio value="days">按天数</Radio>
@@ -212,6 +225,8 @@ function GeneratePage() {
                   />
                 </div>
               </Form.Item>
+            </Col>
+          </Row>
 
           <Form.Item>
             <Button

src/pages/styles/Generate.css

@@ -0,0 +1,3 @@
+.generate-page {
+  padding: 24px;
+}