fix: 修复多个问题并优化用户体验

- 修复ESLint警告:使用useCallback优化React Hooks依赖
- 修复JavaScript初始化错误:调整函数声明顺序
- 优化历史记录查看:添加自动滚动到顶部功能
- 统一网站logo:全部更换为traditional_chinese_gold_red_dragon_symbol.jpg
- 提升代码质量和用户体验
This commit is contained in:
patdelphi
2025-08-20 18:27:08 +08:00
parent 71ec3b4615
commit 98faa2031b
6 changed files with 34 additions and 30 deletions

View File

@@ -52,7 +52,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
<Link to="/" className="flex items-center space-x-2 group" onClick={closeMobileMenu}>
<div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center shadow-lg border-2 border-yellow-600 group-hover:scale-110 transition-transform duration-300">
<img
src="/traditional-chinese-bagua-eight-trigrams-black-gold.jpg"
src="/traditional_chinese_gold_red_dragon_symbol.jpg"
alt="神机阁"
className="w-7 h-7 rounded-full object-cover"
/>

View File

@@ -86,6 +86,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
);
}
// eslint-disable-next-line react-refresh/only-export-components
export function useAuth() {
const context = useContext(AuthContext);
if (context === undefined) {

View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useMemo, useRef } from 'react';
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { localApi } from '../lib/localApi';
import { ChineseButton } from '../components/ui/ChineseButton';
@@ -42,16 +42,7 @@ const AnalysisPage: React.FC = () => {
return undefined;
}, [analysisType, formData.birth_date, formData.birth_time, formData.name, formData.gender]);
useEffect(() => {
loadProfile();
}, [user]);
// 切换分析类型时清空分析结果
useEffect(() => {
setAnalysisResult(null);
}, [analysisType]);
const loadProfile = async () => {
const loadProfile = useCallback(async () => {
if (!user) return;
try {
@@ -71,7 +62,16 @@ const AnalysisPage: React.FC = () => {
} catch (error) {
console.error('加载档案失败:', error);
}
};
}, [user]);
useEffect(() => {
loadProfile();
}, [user, loadProfile]);
// 切换分析类型时清空分析结果
useEffect(() => {
setAnalysisResult(null);
}, [analysisType]);
const handleAnalysis = async () => {
if (!user) return;
@@ -111,7 +111,7 @@ const AnalysisPage: React.FC = () => {
case 'ziwei':
response = await localApi.analysis.ziwei(birthData);
break;
case 'yijing':
case 'yijing': {
const yijingData = {
question: formData.question,
user_id: user.id,
@@ -121,6 +121,7 @@ const AnalysisPage: React.FC = () => {
};
response = await localApi.analysis.yijing(yijingData);
break;
}
default:
throw new Error(`不支持的分析类型: ${analysisType}`);
}

View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { localApi } from '../lib/localApi';
import { ChineseButton } from '../components/ui/ChineseButton';
@@ -41,11 +41,7 @@ const HistoryPage: React.FC = () => {
}
};
useEffect(() => {
loadHistory();
}, [user]);
const loadHistory = async () => {
const loadHistory = useCallback(async () => {
if (!user) return;
try {
@@ -93,7 +89,11 @@ const HistoryPage: React.FC = () => {
} finally {
setLoading(false);
}
};
}, [user]);
useEffect(() => {
loadHistory();
}, [user, loadHistory]);
const handleDeleteReading = async (readingId: string) => {
if (!confirm('确定要删除这条分析记录吗?')) {
@@ -122,6 +122,8 @@ const HistoryPage: React.FC = () => {
const handleViewReading = (reading: NumerologyReading) => {
setSelectedReading(reading);
setViewingResult(true);
// 滚动到页面顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const getAnalysisTypeIcon = (type: string) => {

View File

@@ -71,8 +71,8 @@ const HomePage: React.FC = () => {
{/* 太极符号装饰 */}
<div className="w-12 h-12 md:w-14 md:h-14 mx-auto mb-4 md:mb-6 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center shadow-lg border-2 border-red-600">
<img
src="/traditional-chinese-bagua-eight-trigrams-black-gold.jpg"
alt="太极八卦"
src="/traditional_chinese_gold_red_dragon_symbol.jpg"
alt="神机阁"
className="w-8 h-8 md:w-10 md:h-10 rounded-full object-cover"
/>
</div>

View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { localApi } from '../lib/localApi';
@@ -24,11 +24,7 @@ const ProfilePage: React.FC = () => {
username: ''
});
useEffect(() => {
loadProfile();
}, [user]);
const loadProfile = async () => {
const loadProfile = useCallback(async () => {
if (!user) return;
try {
@@ -54,7 +50,11 @@ const ProfilePage: React.FC = () => {
console.error('加载档案失败:', error);
toast.error('加载档案失败');
}
};
}, [user]);
useEffect(() => {
loadProfile();
}, [user, loadProfile]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();