Răsfoiți Sursa

💄 style(error): 优化错误页面UI设计
- 移除Ant Design依赖,使用原生CSS实现样式
- 添加渐变背景和卡片阴影效果
- 优化错误图标和布局结构
- 添加按钮悬停效果和过渡动画

💄 style(notfound): 改进404页面视觉效果
- 移除Ant Design组件依赖
- 设计新的卡片式布局和蓝色主题配色
- 添加信息图标和详细说明文本
- 优化返回首页按钮样式和交互效果

📝 docs(home): 添加页脚导航链接
- 在首页底部添加"管理后台"链接
- 添加"Api"链接指向/ui页面
- 优化链接样式和间距

♻️ refactor(member): 移除未使用的调试日志
- 删除rpcLogger调试日志变量
- 清理导入语句,减少不必要的依赖

yourname 4 luni în urmă
părinte
comite
20f8b3f16f

+ 35 - 29
src/client/home/components/ErrorPage.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useRouteError, useNavigate } from 'react-router';
-import { Alert, Button } from 'antd';
 
 export const ErrorPage = () => {
   const navigate = useNavigate();
@@ -8,34 +7,41 @@ export const ErrorPage = () => {
   const errorMessage = error?.statusText || error?.message || '未知错误';
   
   return (
-    <div className="flex flex-col items-center justify-center flex-grow p-4"
-    >
-      <div className="max-w-3xl w-full">
-        <h1 className="text-2xl font-bold mb-4">发生错误</h1>
-        <Alert 
-          type="error"
-          message={error?.message || '未知错误'}
-          description={
-            error?.stack ? (
-              <pre className="text-xs overflow-auto p-2 bg-gray-100 dark:bg-gray-800 rounded">
-                {error.stack}
-              </pre>
-            ) : null
-          }
-          className="mb-4"
-        />
-        <div className="flex gap-4">
-          <Button 
-            type="primary" 
-            onClick={() => navigate(0)}
-          >
-            重新加载
-          </Button>
-          <Button 
-            onClick={() => navigate('/admin')}
-          >
-            返回首页
-          </Button>
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-4">
+      <div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
+        <div className="bg-red-50 dark:bg-red-900/30 px-6 py-4 border-b border-red-100 dark:border-red-800">
+          <h1 className="text-2xl font-bold text-red-600 dark:text-red-400">发生错误</h1>
+        </div>
+        <div className="p-6">
+          <div className="flex items-start mb-4">
+            <div className="flex-shrink-0 bg-red-100 dark:bg-red-900/50 p-3 rounded-full">
+              <svg className="w-8 h-8 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <div className="ml-4">
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white">{error?.message || '未知错误'}</h3>
+              {error?.stack && (
+                <pre className="mt-2 text-xs text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 p-3 rounded overflow-x-auto max-h-40">
+                  {error.stack}
+                </pre>
+              )}
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <button
+              onClick={() => navigate(0)}
+              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
+            >
+              重新加载
+            </button>
+            <button
+              onClick={() => navigate('/')}
+              className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
+            >
+              返回首页
+            </button>
+          </div>
         </div>
       </div>
     </div>

+ 21 - 12
src/client/home/components/NotFoundPage.tsx

@@ -1,24 +1,33 @@
 import React from 'react';
 import { useNavigate } from 'react-router';
-import { Button } from 'antd';
 
 export const NotFoundPage = () => {
   const navigate = useNavigate();
   
   return (
-    <div className="flex flex-col items-center justify-center flex-grow p-4">
-      <div className="max-w-3xl w-full">
-        <h1 className="text-2xl font-bold mb-4">404 - 页面未找到</h1>
-        <p className="mb-6 text-gray-600 dark:text-gray-300">
-          您访问的页面不存在或已被移除
-        </p>
-        <div className="flex gap-4">
-          <Button 
-            type="primary" 
-            onClick={() => navigate('/admin')}
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-4">
+      <div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
+        <div className="bg-blue-50 dark:bg-blue-900/30 px-6 py-4 border-b border-blue-100 dark:border-blue-800">
+          <h1 className="text-2xl font-bold text-blue-600 dark:text-blue-400">404 - 页面未找到</h1>
+        </div>
+        <div className="p-6">
+          <div className="flex items-start mb-6">
+            <div className="flex-shrink-0 bg-blue-100 dark:bg-blue-900/50 p-3 rounded-full">
+              <svg className="w-10 h-10 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <div className="ml-4">
+              <p className="text-lg text-gray-700 dark:text-gray-300">您访问的页面不存在或已被移除</p>
+              <p className="mt-2 text-gray-500 dark:text-gray-400">请检查URL是否正确或返回首页</p>
+            </div>
+          </div>
+          <button
+            onClick={() => navigate('/')}
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 w-full"
           >
             返回首页
-          </Button>
+          </button>
         </div>
       </div>
     </div>

+ 5 - 0
src/client/home/pages/HomePage.tsx

@@ -89,6 +89,11 @@ const HomePage: React.FC = () => {
       <footer className="bg-white border-t border-gray-200 py-4">
         <div className="container mx-auto px-4 text-center text-gray-500 text-sm">
           网站模板 ©{new Date().getFullYear()} Created with React & Tailwind CSS
+          <div className="mt-2 space-x-4">
+            <a href="/admin" className="text-blue-600 hover:underline">管理后台</a>
+            <span className="text-gray-300">|</span>
+            <a href="/ui" className="text-blue-600 hover:underline">Api</a>
+          </div>
         </div>
       </footer>
     </div>

+ 0 - 1
src/client/home/pages/MemberPage.tsx

@@ -1,5 +1,4 @@
 import debug from 'debug';
-const rpcLogger = debug('frontend:api:rpc');
 import React from 'react';
 import { UserIcon, PencilIcon } from '@heroicons/react/24/outline';
 import { useParams, useNavigate } from 'react-router-dom';