bowong
/
bw-mini-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: update history page styles and improve text readability

This commit is contained in:
iHeyTang 2025-09-28 15:12:04 +08:00
parent bb7bf19236
commit b7c4fc8b92
2 changed files with 33 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/history/index.css
View File

@ -1,5 +1,5 @@
.history { .history {
background: #fff; background: #f5f6f8;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -17,8 +17,8 @@
} }
.history-title { .history-title {
font-size: 48px; font-size: 32px;
font-weight: 500; font-weight: 600;
color: #1d1f22; color: #1d1f22;
} }
@ -40,7 +40,6 @@
} }
.loading-state { .loading-state {
background: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -48,7 +47,7 @@
} }
.loading-text { .loading-text {
font-size: 32px; font-size: 18px;
color: #666; color: #666;
font-weight: 500; font-weight: 500;
margin: 0 auto; margin: 0 auto;
@ -56,12 +55,12 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto; margin: 80px auto;
padding: 40px 20px;
} }
.empty-icon { .empty-icon {
@ -72,17 +71,18 @@
} }
.empty-icon-image { .empty-icon-image {
width: 110px; width: 64px;
height: 110px; height: 64px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
opacity: 0.6;
} }
.empty-text { .empty-text {
font-size: 24px; font-size: 16px;
color: #b9b9b9; color: #b9b9b9;
display: block; display: block;
margin-top: 32px; margin-top: 16px;
} }
.history-item { .history-item {
@ -152,7 +152,7 @@
} }
.item-title { .item-title {
font-size: 28px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #1d1f22; color: #1d1f22;
flex: 1; flex: 1;
@ -171,7 +171,7 @@
} }
.item-status { .item-status {
font-size: 22px; font-size: 14px;
font-weight: 600; font-weight: 600;
padding: 8px 16px; padding: 8px 16px;
border-radius: 24px; border-radius: 24px;
@ -241,7 +241,7 @@
} }
.item-type { .item-type {
font-size: 22px; font-size: 14px;
font-weight: 600; font-weight: 600;
background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%); background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
color: #fff; color: #fff;
@ -252,7 +252,7 @@
} }
.item-time { .item-time {
font-size: 22px; font-size: 14px;
color: #b9b9b9; color: #b9b9b9;
font-weight: 400; font-weight: 400;
opacity: 0.7; opacity: 0.7;
@ -280,7 +280,7 @@
} }
.hint-text { .hint-text {
font-size: 20px; font-size: 14px;
color: #007aff; color: #007aff;
background: rgb(0 122 255 / 10%); background: rgb(0 122 255 / 10%);
padding: 4px 12px; padding: 4px 12px;
@ -336,7 +336,7 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
border: 3px solid transparent; border: 3px solid transparent;
border-top: 3px solid #ffffff; border-top: 3px solid #fff;
border-radius: 50%; border-radius: 50%;
z-index: 6; z-index: 6;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@ -346,7 +346,7 @@
/* 缩略图进度文字 */ /* 缩略图进度文字 */
.thumbnail-scan-progress { .thumbnail-scan-progress {
font-size: 24px; font-size: 24px;
color: #ffffff; color: #fff;
font-weight: 700; font-weight: 700;
z-index: 7; z-index: 7;
text-shadow: 0 2px 4px rgb(0 0 0 / 50%), 0 0 8px rgb(0 0 0 / 30%), 0 0 16px rgb(0 0 0 / 20%); text-shadow: 0 2px 4px rgb(0 0 0 / 50%), 0 0 8px rgb(0 0 0 / 30%), 0 0 16px rgb(0 0 0 / 20%);

54
src/pages/history/index.tsx
View File

@ -13,29 +13,12 @@ export default function History() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const serverSdk = useServerSdk(); const serverSdk = useServerSdk();
// 计算生成中任务的进度（暂时未使用，但保留以备后用）
// const calculateProgress = (record: any) => {
// if (!record?.createdAt || record.status !== 'processing') return 0;
// const createdAt = new Date(record.createdAt).getTime();
// const now = Date.now();
// const elapsedMinutes = (now - createdAt) / (1000 * 60);
// // 根据任务类型确定预计时间
// const isVideo = record.taskType === 'video' || record.outputType === 'video' || record.type === 'video';
// const estimatedTime = isVideo ? 2.5 : 1; // 视频2.5分钟，图片1分钟
// // 计算进度百分比，最大95%
// const calculatedProgress = Math.min((elapsedMinutes / estimatedTime) * 100, 95);
// return Math.max(calculatedProgress, 0);
// };
const loadRecords = async () => { const loadRecords = async () => {
try { try {
const logs = await serverSdk.getMineLogs(); const logs = await serverSdk.getMineLogs();
setRecords(logs || []); setRecords(logs || []);
} catch (error) { } catch (error) {
console.error('加载记录失败:', error); console.error('Failed to load records:', error);
alert(t('common.operationFailed')); alert(t('common.operationFailed'));
} finally { } finally {
setLoading(false); setLoading(false);
@ -44,47 +27,47 @@ export default function History() {
useEffect(() => { useEffect(() => {
loadRecords(); loadRecords();
// 设置页面标题 // Set page title
i18nManager.updateNavigationBarTitle('history'); i18nManager.updateNavigationBarTitle('history');
}, []); }, []);
// 定时更新生成中任务的进度 // Regularly update progress of generating tasks
useEffect(() => { useEffect(() => {
const hasGeneratingTasks = records.some(record => record.status === 'processing'); const hasGeneratingTasks = records.some(record => record.status === 'processing');
if (!hasGeneratingTasks) return; if (!hasGeneratingTasks) return;
const interval = setInterval(() => { const interval = setInterval(() => {
// 触发重新渲染以更新进度 // Trigger re-render to update progress
setRecords(prevRecords => [...prevRecords]); setRecords(prevRecords => [...prevRecords]);
}, 1000); }, 1000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [records]); }, [records]);
// 下拉刷新 // Pull to refresh
const handleRefresh = async () => { const handleRefresh = async () => {
setRefreshing(true); setRefreshing(true);
try { try {
await loadRecords(); await loadRecords();
alert(t('home.refreshSuccess')); alert(t('home.refreshSuccess'));
} catch (error) { } catch (error) {
console.error('刷新失败:', error); console.error('Refresh failed:', error);
alert(t('home.refreshFailed')); alert(t('home.refreshFailed'));
} finally { } finally {
setRefreshing(false); setRefreshing(false);
} }
}; };
// 点击历史记录项 // Click history record item
const handleItemClick = (record: any) => { const handleItemClick = (record: any) => {
if (record.status === 'completed' && record.outputUrl) { if (record.status === 'completed' && record.outputUrl) {
// 跳转到结果页面查看 // Navigate to result page to view
navigate(`/result?taskId=${record.executionId}`); navigate(`/result?taskId=${record.executionId}`);
} else if (record.status === 'failed') { } else if (record.status === 'failed') {
// 显示错误信息 // Show error message
alert(`${t('common.operationFailed')}\n${record.errorMessage || t('common.operationFailed')}`); alert(`${t('common.operationFailed')}\n${record.errorMessage || t('common.operationFailed')}`);
} else if (record.status === 'processing') { } else if (record.status === 'processing') {
// 跳转到生成页面查看进度 // Navigate to generation page to view progress
navigate(`/result?taskId=${record.executionId}`); navigate(`/result?taskId=${record.executionId}`);
} }
}; };
@ -103,17 +86,10 @@ export default function History() {
return ( return (
<div className="history"> <div className="history">
{/* 设置区域 */} {/* Settings area */}
<div className="history-header">
<div className="header-content">
<span className="history-title">{t('navigation.mine')}</span>
{/* 语言切换器已隐藏 - 只支持英语 */}
</div>
</div>
<div className="history-list"> <div className="history-list">
<div className="refresh-area" onClick={handleRefresh}> <div className="refresh-area" onClick={handleRefresh}>
{refreshing && <div className="refresh-indicator">刷新中...</div>} {refreshing && <div className="refresh-indicator">Refreshing...</div>}
</div> </div>
<div className="history-grid"> <div className="history-grid">
{loading ? ( {loading ? (
@ -127,7 +103,7 @@ export default function History() {
</div> </div>
) : ( ) : (
records.map(record => { records.map(record => {
// const progress = calculateProgress(record); // 暂时未使用 // const progress = calculateProgress(record); // Temporarily unused
const isGenerating = record.status === 'processing'; const isGenerating = record.status === 'processing';
return ( return (
<div key={record.id} className="history-item" onClick={() => handleItemClick(record)}> <div key={record.id} className="history-item" onClick={() => handleItemClick(record)}>
@ -137,12 +113,12 @@ export default function History() {
) : ( ) : (
<div className={`thumbnail-placeholder ${record.status}`}> <div className={`thumbnail-placeholder ${record.status}`}>
<img className="thumbnail-image" src={record.inputImageUrl.split(',')[0]} alt="thumbnail" /> <img className="thumbnail-image" src={record.inputImageUrl.split(',')[0]} alt="thumbnail" />
{/* 生成中状态的扫描效果 */} {/* Scanning effect for generating state */}
{isGenerating && ( {isGenerating && (
<div className="thumbnail-overlay"> <div className="thumbnail-overlay">
<div className="thumbnail-progress-overlay" /> <div className="thumbnail-progress-overlay" />
<div className="thumbnail-scan-light" /> <div className="thumbnail-scan-light" />
{/* 加载loading 转圈 */} {/* Loading spinner */}
<div className="thumbnail-loader" /> <div className="thumbnail-loader" />
</div> </div>
)} )}