Bläddra i källkod

✨ feat(dashboard): 优化仪表盘页面UI设计

- 添加卡片悬停效果和阴影过渡动画
- 引入图标增强视觉表现,包括用户、消息和眼睛图标
- 优化统计数字显示,增加增长箭头和单位
- 添加数据趋势说明文字,显示增长率和在线率
- 调整响应式布局,适配不同屏幕尺寸

✨ feat(login): 改进登录页面视觉效果和用户体验

- 添加蓝色渐变背景,增强视觉层次感
- 增加登录卡片悬停阴影效果
- 添加用户图标和圆形背景装饰
- 优化表单样式,添加标签和聚焦状态效果
- 为密码框添加显示/隐藏密码功能
- 更新页脚信息,添加版权声明和测试账号提示
yourname 5 månader sedan
förälder
incheckning
c5ad8193b6
2 ändrade filer med 75 tillägg och 30 borttagningar
  1. 44 13
      src/client/admin/pages/Dashboard.tsx
  2. 31 17
      src/client/admin/pages/Login.tsx

+ 44 - 13
src/client/admin/pages/Dashboard.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { 
-  Card, Row, Col, Typography, Statistic
+import {
+  Card, Row, Col, Typography, Statistic, Space
 } from 'antd';
+import {
+  UserOutlined, BellOutlined, EyeOutlined
+} from '@ant-design/icons';
 
 const { Title } = Typography;
 
@@ -9,33 +12,61 @@ const { Title } = Typography;
 export const DashboardPage = () => {
   return (
     <div>
-      <Title level={2}>仪表盘</Title>
-      <Row gutter={16}>
-        <Col span={8}>
-          <Card>
+      <div className="mb-6 flex justify-between items-center">
+        <Title level={2}>仪表盘</Title>
+      </div>
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} lg={8}>
+          <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
+            <div className="flex items-center justify-between mb-2">
+              <Typography.Title level={5}>活跃用户</Typography.Title>
+              <UserOutlined style={{ fontSize: 24, color: '#1890ff' }} />
+            </div>
             <Statistic
-              title="活跃用户"
               value={112893}
               loading={false}
+              valueStyle={{ fontSize: 28 }}
+              prefix={<span style={{ color: '#52c41a' }}>↑</span>}
+              suffix="人"
             />
+            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
+              较昨日增长 12.5%
+            </div>
           </Card>
         </Col>
-        <Col span={8}>
-          <Card>
+        <Col xs={24} sm={12} lg={8}>
+          <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
+            <div className="flex items-center justify-between mb-2">
+              <Typography.Title level={5}>系统消息</Typography.Title>
+              <BellOutlined style={{ fontSize: 24, color: '#faad14' }} />
+            </div>
             <Statistic
-              title="系统消息"
               value={93}
               loading={false}
+              valueStyle={{ fontSize: 28 }}
+              prefix={<span style={{ color: '#faad14' }}>●</span>}
+              suffix="条"
             />
+            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
+              其中 5 条未读
+            </div>
           </Card>
         </Col>
-        <Col span={8}>
-          <Card>
+        <Col xs={24} sm={12} lg={8}>
+          <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
+            <div className="flex items-center justify-between mb-2">
+              <Typography.Title level={5}>在线用户</Typography.Title>
+              <EyeOutlined style={{ fontSize: 24, color: '#722ed1' }} />
+            </div>
             <Statistic
-              title="在线用户"
               value={1128}
               loading={false}
+              valueStyle={{ fontSize: 28 }}
+              suffix="人"
             />
+            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
+              当前在线率 32.1%
+            </div>
           </Card>
         </Col>
       </Row>

+ 31 - 17
src/client/admin/pages/Login.tsx

@@ -8,6 +8,9 @@ import {
 } from 'antd';
 import {
   UserOutlined,
+  LockOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined
 } from '@ant-design/icons';
 import { useNavigate } from 'react-router';
 import {
@@ -54,15 +57,19 @@ export const LoginPage = () => {
   };
   
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            登录管理后台
+        <div className="text-center">
+          <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+            <UserOutlined style={{ fontSize: 32, color: '#1890ff' }} />
+          </div>
+          <h2 className="mt-2 text-center text-3xl font-extrabold text-gray-900">
+            管理后台登录
           </h2>
+          <p className="mt-2 text-gray-500">请输入您的账号和密码</p>
         </div>
         
-        <Card>
+        <Card className="shadow-lg border-none transition-all duration-300 hover:shadow-xl">
           <Form
             form={form}
             name="login"
@@ -73,40 +80,47 @@ export const LoginPage = () => {
             <Form.Item
               name="username"
               rules={[{ required: true, message: '请输入用户名' }]}
+              label="用户名"
             >
-              <Input 
-                prefix={<UserOutlined />} 
-                placeholder="用户名" 
+              <Input
+                prefix={<UserOutlined className="text-primary" />}
+                placeholder="请输入用户名"
                 size="large"
+                className="transition-all duration-200 focus:border-primary focus:ring-1 focus:ring-primary"
               />
             </Form.Item>
             
             <Form.Item
               name="password"
               rules={[{ required: true, message: '请输入密码' }]}
+              label="密码"
             >
-              <Input.Password 
-                placeholder="密码" 
+              <Input.Password
+                prefix={<LockOutlined className="text-primary" />}
+                placeholder="请输入密码"
                 size="large"
+                iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
+                className="transition-all duration-200 focus:border-primary focus:ring-1 focus:ring-primary"
               />
             </Form.Item>
             
             <Form.Item>
-              <Button 
-                type="primary" 
-                htmlType="submit" 
-                size="large" 
+              <Button
+                type="primary"
+                htmlType="submit"
+                size="large"
                 block
                 loading={loading}
+                className="h-12 text-lg transition-all duration-200 hover:shadow-lg"
               >
                 登录
               </Button>
             </Form.Item>
           </Form>
           
-          <div className="mt-4 text-center text-gray-500">
-            <p>测试账号: admin / admin123</p>
-            {/* <p>普通账号: user1 / 123456</p> */}
+          <div className="mt-6 text-center text-gray-500 text-sm">
+            <p>测试账号: <span className="font-medium">admin</span> / <span className="font-medium">admin123</span></p>
+            <p className="mt-1">© {new Date().getFullYear()} 管理系统. 保留所有权利.</p>
           </div>
         </Card>
       </div>